MERN to ES6 and host to heroku

Node, React

Home » Blog » Javascript » Node » MERN to ES6 and host to heroku

Converting your express code to es6 will make the MERN developer work more easier. Since most of the react code written at the current moment when I am writing this post are using ES6 but the nodejs are written in ES5. So it will be easier if we could make the code base of the react and node same. With this the developer do not have to switch between es5 and es6 and most interestingly we can use advance features of es6 in node which will going to make our code more readable.

Finally we will going to setup everything in our heroku application. Lets create a Procfile which will going to start our script in the heroku server.

Babel will going to compile the ES6 code to ES5 so additional configuration needs to be done on babelrc file. Create a .babelrc file and insert the following code

Now we will going to configure the package.json file which will going to hold all the information needed to run our application.

This configuration will going to look inside the files inside the server directory and change all the ES6 to ES5 . So create a folder name server and write our first express code inside it

Now we will create a react app using react-cli

Inside the package.json file of the client insert the proxy as below

After all these steps host your MERN application to the heroku server using github/heroku git. It will compile all the express ES6 and serve the react folder in the server. You can build all the files in your local machine and put it directly in the heroku server but its all about preferences. Hope it helps

About Author