Hi all, from this material we are going to create a sample react app from scratch, which will include the concepts from setting up a proper project with TDD and BDD approach along with linting.
New to React? Please check Basics to get to know the basics.
In this Part-1 we are going to use the below libraries and tools to set up our project.
- For E2E testing will use Cypress, Jest, Enzyme, Sinon, and Istanbul for code coverage
- We will use Typescript to follow OOPS concepts like enums, interface, types, etc.,
- Storybook to document components for reuse and automatically visually test components. To maintain code quality will use ESLint, Prettier, and SassLint.
- And will call these e2e tests and linting rules in the pre-commit hook using husky, so before the developer wants to push his changes to the repository they can fix the coding standard errors, and make better code.
So let's start with setting up the project by following below steps:
- Create a react app using create-react-app with template typescript, later we will eject it to follow our standards. “npx create-react-app react-typescript-jest-cypress — template typescript”
- Now run the “npm run eject” to eject and segregate the dependencies and devDependencies like mentioned in package.json
- We will use Sass in our application so we can use variables, mixins, nested rules and functions to make well-organized and theming across the projects. To install sass package run “npm install node-sass -D”
- Now we will install and use cypress for E2E tesing with cross-browser compatibility, so we can see visually the flow, debug and fix the bugs. “npm install cypress -D”. Update the package.json with cypress test commands.
Now let's run cypress, using “cypress-test” command.
Note: Some of you can face issues in some versions: Using
babel-preset-react-app requires that you specify
BABEL_ENV environment variables. Valid values are “development”, “test”, and “production”. Instead, received: undefined. When the app is created using create-react-app. To overcome this issue go to package.json and remove the below code snippet.
- Lets install storybook by running “npx sb init”. Once it got installed we will customize it like below.
- We will configure our unit testing with jest, enzyme, sinon and chai tools.
6.1 For snapshot testing we are going to use react-test-renderer, so let's install it “npm install react-test-renderer -D”
6.2 We will configure jest.
6.2.2 Now we will install enzyme, adapter, sinon and chai. “npm install enzyme @types/enzyme sinon @types/sinon chai @types/chai enzyme-adapter-react-17-updated -D”
Will use “husky” as our pre-commit hook and we will specify the commands which are to be executed when the developers commits the code, if all rules are getting passed will allow him to push to the repository. “npm install -D pretty-quick husky”
Linting: will use to analyse code for potential errors
10.1 Scss-Lint: Create a .sasslintrc.json in the root folder and specify the sass rules, and call it in the package.json. “npm install scss-lint sass-lint-auto-fix -D”
10.2 Typescript-ESlint: Install “npm i -D eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin” then create a .eslintrc.js and .eslintignore in root folder. eslintignore will ignore the paths/files from linting.
So now we are ready with the proper project setup, in the next part, we will dockerize it along with CI/CD pipeline using Docker and Jenkins.
Part -2: Contains the Docker containers for MongoDB, NodeJS API, and ReactAPP using Docker-Compose. Along with NVM.
Part-3: Contains setup “i18next and redux, saga” and “axios” configurations. And also we are going to use Figma to create our wireframes, which we are going to develop.
Part-4: Contains Jenkins setup and connecting with nodeJS API with MongoDB to get the articles from the database and performing the CRUD operations.
Part-5: We will publish our app on the Heroku server using ci/cd pipelines.
Please find here the complete project setup & Storybook with core component package: Link