Supercharge Your Strapi CMS Setup ⚡
Tags: node, javascript, backend, strapi
Published: 2021-04-06 07:24:40

---
title: Supercharge Your Strapi CMS Setup ⚡
published: true
description: Improve productivity with strapi development.
tags: node,javascript,backend,strapi
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjpxhww2nmjv69kr7y5s.jpeg
---

## Introduction

In this tutorial, I am going to share few tips which will help a developer ease backend development.

## 1️⃣ Improve Eslint configuration

By default when we create a project with `npx create-strapi-app my-project --quickstart` the `.eslintrc` uses `"extends": "eslint:recommended",`, which I found does not enforces rules strictly.

Alternative is to use [eslint-config-google](https://github.com/google/eslint-config-google)

### Install below packages
```bash
 npm i -D eslint eslint-config-google babel-eslint
```

### Update `.eslintrc`

```JSON
{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "google"],
  "env": {
    "commonjs": true,
    "es6": true,
    "node": true,
    "browser": false,
    "jest": true
  },
  "parserOptions": {
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": false,
      "impliedStrict": true
    },
    "sourceType": "module"
  },
  "globals": {
    "strapi": true
  },
  "rules": {
    "indent": ["error", 2, { "SwitchCase": 1 }],
    "linebreak-style": ["off", "unix"],
    "no-console": "error",
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-var": "error",
    "eqeqeq": ["error", "always"],
    "object-curly-spacing": "off"
  }
}
```

----


## 2️⃣ Add Prettier

### Install Prettier as Dev dependency

```bash
npm i -D prettier
```

### Create `.prettierrc` file

```JSON
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 70
}
```

### Create `.prettierignore` file

> copy the content of the file in the [link](https://raw.githubusercontent.com/ns23/strapi-template/main/.prettierignore)

---

## 3️⃣ Enable Unit testing with Jest

> Follow the tutorial link in official strapi docs [Link](https://strapi.io/documentation/developer-docs/latest/guides/unit-testing.html#testing-auth-endpoint-controller)



### Add jest configuration in `package.json`

```json
 "scripts":{
    "test": "jest --forceExit --detectOpenHandles",
    "coverage": "jest --coverage --forceExit --detectOpenHandles"
  },
  "jest": {
    "testPathIgnorePatterns": [
      "/node_modules/",
      ".tmp",
      ".cache"
    ],
    "testEnvironment": "node",
    "collectCoverage": false,
    "collectCoverageFrom": [
      "api/**/*.js",
      "config/functions/**/*.js",
      "config/policies/**/*.js",
      "extensions/**/*.js"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 70,
        "functions": 70,
        "lines": 70,
        "statements": 70
      }
    }
```
---

## 4️⃣ Use Husky to add a pre-commit hook

With husky, we can add pre-commit hooks to check for any linting issues and apply prettier formatting before committing changes to git.

### Install Husky

```bash
npm i -D husky
```

### update package.json

```json
"scripts": {
    "eslint-fix": "eslint . --fix",
    "eslint": "eslint .",
    "lint": "prettier --check .",
    "format": "prettier --write .",
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },
```


## 5️⃣ Add bitbucket build pipeline

Here a build pipeline is used to make sure code passes certain before it can be merged.

### Create `bitbucket-pipelines.yml` and copy below code

```yaml
#  Template NodeJS build

#  This template allows you to validate your NodeJS code.
#  The workflow allows running tests and code linting on the default branch.

image: node:12.4.0

pipelines:
  default:
    - step:
        name: Code linting
        script:
          - npm install eslint babel-eslint eslint-config-google
          - npx eslint .
        caches:
          - node
  pull-requests:
    "**":
      - step:
          name: Build and Test
          caches:
            - node
          script:
            - npm install
            - npm run coverage
            - pipe: atlassian/slack-notify:1.0.0
              variables:
                WEBHOOK_URL: $WEBHOOK_URL
                MESSAGE: "Pull request build"
```
---

## 6️⃣ Create `server.js`

```js
const strapi = require('strapi');

strapi(/* {...} */).start();
```
---

I have created a template repo with all the changes above,it can be accessed at 

{% github ns23/strapi-template%}

Please share your tips and tricks that you use to ease development in strapi.


Thanks for reading, I appreciate it! Have a good day.