DEV Community

loading...
Cover image for Supercharge Your Strapi CMS Setup ⚡

Supercharge Your Strapi CMS Setup ⚡

ns23 profile image Nitesh Sawant ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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"
  }
}
Enter fullscreen mode Exit fullscreen mode

2️⃣ Add Prettier

Install Prettier as Dev dependency

npm i -D prettier
Enter fullscreen mode Exit fullscreen mode

Create .prettierrc file

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 70
}
Enter fullscreen mode Exit fullscreen mode

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
      }
    }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
    ]
  },
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

6️⃣ Create server.js

const strapi = require('strapi');

strapi(/* {...} */).start();
Enter fullscreen mode Exit fullscreen mode

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

Strapi CMS Supercharged

A quick description of your strapi application

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

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

Discussion (0)

pic
Editor guide