Node & React starter kit

This starter kit is designed to help you start project as soon as possible. It contain all necessary things to develop and maintain a project.

Getting started

In this project we used ESLint and Stylelint, so at the beginning check your code editor plugins or settings to support these linters.

You can create a new project based on node-react-starter-kit:

git clone https://github.com/keenethics/node-react-starter-kit.git <project-name>
cd <project-name>

Install the project dependencies:

npm i

Create .env file from example and make sure it has correct values:

cp .env.example .env

We are using sequelize and you can follow it's tutorial to perform operations. E.g. to run migrations you can run

npm run migrate

Running seeds:

npm run seeds

Running the project in development mode:

npm run dev

Start enviroments

process.env.ANALYZE - set this variable to on to turn on webpack-bundle-analyzer (intended to use only during development).

Naming conventions

We preferably use UpperCamelCase for classes and files they're in. lowerCamelCase for other files, variables and functions.

We setup aliases to import components (you can see list of aliases in webpack config) and we use uppercase names for them.

Linting

You can lint the project via:

npm run lint

Check default lint-rules in .eslintrc and .stylelintrc. We support a11y ideas. We use rules and plugins that help making project more responsive and accessible.

Tests

E2E tests

There're some example tests in __tests__ folder. For this kind of tests we use Jest and Puppeteer.

Command to run E2E tests:

npm run test

API tests

There're server side tests in this kit too. More specifically - API tests.

You can find them in /server/tests/ directory.

Command to run API tests:

npm run test-server

Instruments used for API tests: SuperTest, Mocha and Chai

Reset styles

We use reset CSS from Eric A. Meyer, you can find this styles in /clien/styles/reset.scss

The goal of reset-stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

Developing for Accessibility

Declaring a language attribute on the HTML element enables a screen reader to read out the text with correct pronunciation. Just add lang attribute to html tag.

We use ARIA (Accessible Rich Internet Applications) Landmark roles and attributes for elements. This things can help assistive technology users to quickly navigate to and past blocks of content in a web interface. For more information, read ARIA Landmark roles and WAI-ARIA.

PWA features

Service worker

There's sample code for adding service worker to your app. You just need to uncomment it (one part of it is in webpack config and another one is in index.js).

Service worker file is generated and connected via Workbox webpack plugin.

Swagger

Project uses Swagger to document documentation API routes. You can check example comments and follow same convention.