thumbnail for blog post - custom react app boilerplate

React app boilerplate 2021 (with mongoose)

Introduction

 So it’s been sometime I have updated my react app boilerplate so I decided to  update my react starter project. In this project, I have decided to incorporate latest features from redux like redux tool kit and I have also done setup for Express & nodemon in a  better way than the previous version, so if you want to have a look at the previous version you can click, here.

https://github.com/ovpv/react-ssr-basic

 Features

  • react isomorphic app using express js
  • webpack watch setup with nodemon re compiler for server files along with client files compilation
  • reusable route setup (common file setup for both client and serverside rendering)
  • mongo/ mongoose js db connection setup

How to use it?

Follow these steps if you want to quickly start a custom react app project with all the latest features of redux and it will be an app that is already set up with mongoose JS. All you have to do is provide your connection string and your App will be connected to the  mongo DB database

 step 1

https://github.com/ovpv/isomorphic-react-mongoose-starter

 go to this GitHub URL.  now you can download this project by the following ways:

  •  Do GIT clone in your terminal at your specified directory with the URL
  • Or you can directly click on the download Zip  button and  use the project inside it
 step 2
  • When you open the project in your  code editor eg. Visual Studio code, you should be able to see all the folders with react pages and  redux set up folders in it.
  •  you can also see in the ‘/src’ folder it has a server  file  and in that file the setup is already done for Mongoose DB connection.
  • [This is Important] You need to also create an .env file in your project with your mongoose db connection string in the following format:

DB_URL = "mongodb://username:password@<your server ip>:<port>/<dbName>?authSource=admin"

  •  all you have to do now is start a terminal in your  project level and run the command npm start
  •  this will fire up your webpack command and a server instance will start running at the specified view put that is 3000 by default
  •   once that is done you can open the browser and  and paste the following URL in the address bar: http://localhost:3000
  • you should be seeing the react application output as follows
 step 3
  • So if you are planning to maintain git versioning for your project,  you need to do the following.
  •  open a terminal at a project level and run the following command: rm -rf .git
  •  this command deletes the git versioning that I have  maintained which is not required for you.
  •  now that my git folder is deleted, you will have to create your git folder in your project with the following command: git init
  •  now that your git folder is created you need to link that with the repository that you are created for this project  by doing the following: git remote add origin <YOUR_GIT_REPO_URL>
  •  once this is done, you can now push your changes to your repository.

Conclusion

I am also planning to make more improvements related to hot module reload setup and branch out based on various feature requirements. Let me know in the comments section what you feel about this boilerpalte project, what I have missed or could have incorporated. Hope this helps. Happy Coding!!

3
3