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
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.
Top comments (0)