Overview:

This project shows you how to implement scroll spy using react-router-dom v6

Prerequisites:

• nodeJS > 14.X.X or Docker

Installing / Getting Started:

Development (locally):

• Clone repo => git clone [email protected]:DonAdam2/webpack-react-boilerplate.git
• Navigate to project directory cd webpack-react-boilerplate
• Install dependencies => yarn install
• Start the development server => yarn start

Development (using Docker):

• Clone repo => git clone [email protected]:DonAdam2/webpack-react-boilerplate.git
• Navigate to project directory cd webpack-react-boilerplate
• Install dependencies (required for prettier) => yarn install
• Start the development server => docker-compose up web-dev

Docker for production (basic setup) (modify it to your needs):

• Update the production section of the Dockerfile to meet your needs
• Run the following command to build your image => docker-compose up web-prod

Configuring Prettier

This build relies on Prettier formatter to enforce code style. And ESLint for identifying problematic patterns found in the code.

• Setting up prettier:

  1- You can find steps on how to set up prettier formatter with WebStorm/PhpStorm here.

  Notes:

  • It's better to use the local node_modules version of prettier instead of a global one, to avoid version conflicts (in case the globally installed version does not match the version specified in package.json).

  2- Follow the next steps to set up prettier and eslint in VS Code:

  • Install prettier plugin

  • Install eslint plugin

  • Open VS Code settings CTRL + ,:

    a- Search for formatter => check Format on save

    b- Search for prettier => add .prettierrc in Prettier: Config Path section && check Prettier: Require Config

  3- Please refer to other tutorials if you are using a different IDE.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode.
It will open http://localhost:3000 automatically in the browser to see your app.

All changes will be injected automatically without reloading the page.

You will see in the console the following:

• All redux store related changes
• Any of the following errors:
  1. Linting errors.
  2. Code format errors (because of prettier)

yarn build

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

yarn build:serve

Serves the app on http://localhost:8080/ from the dist folder to check the production version.

Note: Use this script only if you ran the build script yarn build.

yarn analyze-bundle

It allows you to analyze the bundle size.

yarn generate component || container || page || hook || service || reducer || progressiveWebApp

• It creates a boilerplate for component, container, page, custom hook, service, reducer or progressive web app setup.