🌺 React Boilerplate

This is a solid React + Typescript Boilerplate, using Webpack and Babel, with CSS Modules, SASS and traditional CSS stylesheets. Supports React-Router and Redux-Toolkit too!

This boilerplate also uses a webapck dashboard provided by FormidableLabs, which makes you feel like you work at NASA!

🌟 Features

This boilerplate has a lot of features, some worth mentioning are:

• Change the theme with the click of a button!
• TypeScript support
• React-Router and Redux Toolkit support
• CSS Modules and SASS support
• React Refresh for Webpack
• Dotenv for Webpack
• ESLint
• Prettier
• Husky with lint-staged
• Webpack Bundle Analyzer
• Docker support added in v2.0.1!
• Atomic Design as described by Brad Frost, is followed in this boilerplate. It is highly opinionated, and hence the boilerplate structure is very flexible, adjustable according to you requirements.
• Improved styles with atomic design approach with SASS for reference.
• Redux Thunk example for fetching posts from JSON Placeholder.

⤵️ Installation

• Install the boilerplate using the following command:

  npx degit https://github.com/sydrawat/react-boilerplate my-app

Please note that you'll need the degit package pre-installed on your system. If you do not have it installed beforehand, it automatically prompts you to install the package when you run the above command.

• You'll need to install the dependencies as well:

  #for yarn users
  yarn
  #for npm users
  npm i

🔬 Usage

If you do not want to install the template using a third party package, you can do so by downloading this boilerplate manually from here. Here's how to do so:

• Clone the repository

  git clone https://github.com/sydrawat/react-boilerplate.git my-app

• Run the following command

  #for yarn users
  yarn
  #for npm users
  npm i

🚧 Development

To run the development server, run the following command:

  #for yarn users
  yarn start
  #for npm users
  npm run start

This serves the app on localhost:3000 via the webpack-dev-server package.

🚀 Build

• Run the following command to build your project for production:

  #for yarn users
  yarn build
  #for npm users
  npm run build

• To see bundle info from Webpack Bundle Analyzer plugin, use the following command(s):

  #for yarn users
  yarn build:info
  #for npm users
  npm run build:info

Bundle info will be shown on localhost:3001. This will open automatically in your preferred browser when you run the above command(s).

• To see the app in prodution mode, navigate to the build/ folder that is generated after running the above command. This will serve the production ready app to localhost:5000.

  cd build/;
  npx serve

🐳 Docker

If you wish to dockerise your project, and make it available as a docker image at docker hub, you can do so with a few simple commands!

Development

To test the application as a docket container in development mode, we need to simply run the following command(s):

• To create a docker image that will run a container, use:

  docker-compose build

• Once the above command completes it's execution, we can now run either of the following commands:

  • No-strings-attached dev server:

    docker-compose up
    # Or, to run in detached mode (i.e, in the background)
    docker-compose up -d

  • To see the cool webpack-dashboard:

    docker-compose run -p 3000:3000 dev

  • To peform cleanup:

    docker-compose down

Deploy on Docker Hub

To deploy or push your project docker image to the docker hub, use the following set of command(s):

  docker build -t <username>/<repository>:<tag> .
  docker tag <username>/<repository>:<tag> <username>/<repository>:latest
  docker push <username>/<repository>:<tag>

  # It might look something like this:
  docker build -t user/app:v1.0.0 .
  docker tag user/app:v1.0.0 user/app:latest
  docker push user/app:v1.0.0

If all went well, your image will now be live on Docker Hub and it will be easy to share.

Next Steps

At this point, I can see that my application is running from a docker container locally, and I have that image on Docker Hub, so that's a big portion of the battle. From here, there are two more issues to cover:

• Setting up a continuous integration tool to test and deploy code
• Setting up a production server to receive and serve code (maybe change it from Firebase to DigitalOcean?)

🚧 This is still a Work-In-Progress. Please refer to this issue for more details.

📜 License