Setting up the React Application

Setting up React for Local Development

To start up the React application we need to have NodeJS and NPM installed on our computer. After installing those navigate with your Terminal to the directory sa-frontend (clone the repo) and type the following command:

$ npm install

This downloads all the Javascript libraries required by the React Application and places them in the folder node_modules. After everything downloads follow up with the next command:

$ npm start

This starts our application and displays the port to which it is listening. By default, it is localhost:3000. Feel free to make edits to the Front end code and see the effect immediately in your browser.

This works well during development especially because of the Hot Module Replacement functionality that provides immediate feedback, though for production we need to build the application into static files and host them with a WebServer that offers better capabilities.

Building the React Application

To build the React application you need to be in the sa-frontend directory and execute the following command:

$ npm run build

This creates a new folder in your project tree, namely sa-frontend/build, This folder contains all the static files needed for our ReactJS application.

Serving static files with Nginx

Install and Start the Nginx WebServer, and then move the contents of the sa-frontend/build folder to [nginx_installation_dir]/html. 

If in the end the index.html generated by react build step is accessible in [nginx_installation_dir]/html/index.html, then everything was done correctly, as this is the default file that Nginx serves.

If you started Nginx server it is listening to a port (port 80 by default) you can specify the port by updating the file nginx.conf in [nginx_installation_dir]/conf. The port is defined in the listen property located under server.

Open your browser and hit the endpoint localhost:80, see the ReactJS applicaiton appear.

Typing in the field: “Type your sentence.” and pressing the button Send will fail with a 404 error (You can check it in your browser console). But why that? Let’s inspect the code.

Inspecting the Code

In the file App.js pressing the Send button triggers the analyzeSentence method, The code for this method is shown below, each line that is commented with #Number will be explained under the script:

1. URL at which a POST call is made (an application should be listening for calls at that URL).
2. The Request body sent to that application as displayed below:

{
    sentence: “I like yogobella!”
}

3. The response updates the component state, which triggers a re-render of the component, which gets us back into the render() method and if we received the data (i.e. the json object containing the typed sentence and the polarity) we would display the component polarityComponent because the condition would be fulfilled and we would define the component:

const polarityComponent = this.state.polarity !== undefined ?
    <Polarity sentence={this.state.sentence} 
              polarity={this.state.polarity}/> :
    null;

But it’s not, why? If you guessed that we didn’t set up anything to listen on localhost:8080, then you are correct! We must start our Spring Web application to listen on that port!