Tutorials, articles and quizzes on Software Development

Set up ES6 and React with an Express application on A2 Hosting

This article is associated with the following course

First what we want to do is go to our completed A2 hosting application. Mine is the in folder, A2Nodejs.

Go into the package.json file and add the following under dependancies.

  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  },

Next we want to add a build script hat uses the parcel bundler. Add the following command inside the “scripts” object

"build": "./node_modules/parcel-bundler/bin/cli.js public/index.js --out-dir public/dist"

So your scripts object should look like the following

Now let’s go into our public folder and create an index.js file. This is where our ES6 syntax Javascript code will live.

Open up the index.js file and add the following code:

const myFunction = () => {
    console.log('Hello es6');
};

myFunction();

Note the es6 syntax here is using const instead of var and an arrow function instead of a normal Javascript function.

Lets save that and go into our index.ejs file in our views directory, we’ll add the following script into our header

<script async src='http://victoryflame.a2hosted.com/a2nodejs/static/dist/index.js'></script>

Which will make our header look like the following

Now lets click on Setup Node.js app in our cPanel interface and select our node js application.

From there we want to click on the “Run NPM install” button on, and then we want to click on the “Run JS script button next to it.

You’ll be presented with the following modal

Click on build and then click Run JS script

Now let’s go back into File Manger and into our project. When there go into the public folder and you should see the a folder names dist. Inside contains your compiled Javascript which will be cross compatible with browsers that do not support es6 syntax

Now if you go to your application’s url and go to the console you should see the following:

Note the hello world on the chrome inspector is coming from our es6 arrow function

Now what if we wanted to run React on this application? Since we’re already using parcel, we can easily run React in our application.

First what we want to do is go into our projects package.json and add the following lines to our “dependancies” object (Not dev-dependancies this time)

"react": "^16.12.0",
"react-dom": "^16.12.0"

So our dependancies object will look like the following

And our whole package.json should look like this.

Save your package.json file and go to your cPanel and back to Setup Node.js app, go to your application and click on run NPM install

Now go to your index.ejs file, and add a div with an id of app, so your entire ejs file should look like the following

<!DOCTYPE html>
<html>
    <head>
        <link rel='stylesheet' href='http://victoryflame.a2hosted.com/a2nodejs/static/stylesheets/style.css'/>
        <script async src='http://victoryflame.a2hosted.com/a2nodejs/static/dist/index.js'></script>
    </head>
    <body>
        <h1>Hello Victoryflame <%=title%>!!!!</h1>
        <div id="app">
            
        </div>
    </body>
</html>

Now lets go into our index.js file in our public folder and replace that hello world es6 code with a React component

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {

  render() {
    return (
      <div><h1>I am a React component!</h1></div>
    )
  }
}

ReactDOM.render(MyComponent, document.getElementById('app');

Now go back into Setup Node.js app, select your project and click on the Run JS script button. When the model opens, choose build and wait for it to complete. Now go to your url and you should see your React component

Note that in the video version, we added async at the end to the script tag in our ejs file. Here it works already because I added when we added the script to our index.ejs file.

How to set up a Node.js app on A2 Hosting