React app boilerplate 2021 (with mongoose)
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.
- 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
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
- 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
- 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
- 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:
- 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.
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