Featured image for the article react ssr hmr

React SSR with HMR: Quick setup guide

Introduction

React SSR with HMR is a Quick setup guide to quickly bootstrap your react project with helpful features like Server-side rendering and Hot Module Reload. I created this project in order to understand the working of create react app project and making customization my project’s config is far easier (less complex) than the config we get after ejecting the create react app project. If you want the detailed guide of my “Create Custom React SSR from scratch”, Click here.

Here We Go

In order to get started on the set up all you have to do are the following:

  • on your desktop, create an empty folder with your project name
  • In the terminal traverse inside your project folder and run the following command:
    • git init
    • This initializes your git for your project and now you are on the master branch of your project
  • Now you have to set an upstream on your project. It is basically creating a link from your project to mine with which you can download the latest updates for the project
  • Use the following command to create the upstream:
    • git remote add upstream https://github.com/ovpv/react-ssr-basic.git
  • Once the upstream is set all you have to do is fetch the latest update on the dev branch of my project
  • Use the following command to fetch the latest update
    • git fetch upstream
    • It will fetch and the all the branches the upstream has as follows:
  • Once you have fetched the upstream branches and commit updates, the next step is to merge the remote upstream branch with your project’s master branch. Use the following command to do so:
    • git merge upstream/dev
    • Once you execute the command you will see that new folders and files are added to your project as shown below:
    • react ssr project directory

What’s next?

Well now that you have your react project ready, just run the install command as follows:

  • to install all necessary node modules: npm i
  • once that is done, to start the development server with HMR just run: npm run dev
  • Once all development is complete build your app for production with: npm run build

Conclusion

I hope this Quick guide on React SSR with HMR saves a lot of time for developers who want to create their custom server-side rendering app from scratch. You can also keep track of this project’s updates here. Do give it a start if this project helped you. Let me know your thoughts/suggestions or any improvements you need in the upcoming updates for the project in the comments section below. I hope you all have a good day ahead!

20
20