Supercharge Your Strapi CMS Setup ⚡

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

Install below packages

 npm i -D eslint eslint-config-google babel-eslint

Update .eslintrc

{
  "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

npm i -D prettier

Create .prettierrc file

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

Create .prettierignore file

copy the content of the file in the link

---

3️⃣ Enable Unit testing with Jest

Follow the tutorial link in official strapi docs Link

Add jest configuration in package.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

npm i -D husky

update package.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

#  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

const strapi = require('strapi');

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

---

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

ns23 / strapi-template

Strapi CMS Supercharged

A quick description of your strapi application

View on GitHub

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

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