Blog

How to Deploy a React.js App to GE Predix (a Tic Tac Toe Example)

Dmitry Kozhukh

react-js-predix

React is a JavaScript library for building user interfaces; the technology is backed by Facebook and Instagram—among others. This article shows how to create a simple Tic Tac Toe game with React and then deploy the app to the Predix platform. The post also explains some of the React basics.

 

Introduction to React

For building user interfaces, React provides only a view layer and uses a JavaScript syntax extension called JSX to write HTML markup right in the component code. For example:

example.js				
import React from 'react';
					
class Hello extends React.Component { 
	render() {
					
		return (
			<h1>Hello World</h1>
		); 
	}
}
					
React.render(<Hello />, document.getElementById('root'));

The main reasons React is great:

  • It is declarative. Instead of telling your program how to do something, you tell what you want to do (for example, using Array methods as opposed to the manual implementation of some operations with elements). React is declarative when we describe components; however, it is more imperative when we describe state changes.

  • It is JavaScript. Moving HTML to JS code (JSX) is a good idea. JavaScript can process whole HTML elements inside faster than individual DOM node changes. A virtual DOM keeps a copy of the real DOM tree and makes changes only when necessary. Another advantage is that you do not have to learn specific syntax for writing templates (unlike different template syntax in different AngularJS versions: *ngFor, [click], ng-repeat, and ng-click). If you know JS, you can write in React easily.

  • Unidirectional data flow.

  • Decomposition. The app is broken into smaller components.

  • Explicit mutations. Explicit changes of the state are done via the setState method.

 

Configuring a React project

npm

npm is the package manager for JavaScript. Not so long ago, npm was used only for Node.js, but now it is a universal package manager that contains all types of JS packages.

If you already installed npm, just type npm init in the terminal to start working with it. It will initialize a new project for you by creating the package.json file.

To install a module, type npm install <module name> --save (the --save flag tells npm to save this module in package.json). There are two types of dependencies in the package.json file: dependencies and devDependencies. The first type (dependencies) includes frameworks or libraries needed for the application code. The second type (devDependencies) in general contains bundle packages needed for transforming the code.

 

npm scripts

npm scripts are also a very important feature of the package manager. Sometimes, it is difficult to start the project server and tests or build the project when you look at it for the first time. npm scripts allow you to make aliases for any commands. If you are not familiar with the project structure, you can see the main commands in the scripts section in the package.json file. Just describe your command in package.json.

"scripts": {
 "start": "webpack-dev-server --progress",
 "build": "NODE_ENV=production node_modules/.bin/webpack -p --progress --colors"
}

To run a command, type npm run <command name>.

 

webpack

webpack bundles all your code into one file. However, it can be quite tricky to write your first webpack config since its documentation is not perfect. So, we are going to keep things pretty simple.

entry:  __dirname + "/app/App.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }

Here, the entry field is the root component of the app. It compiles all our code in one file called bundle.js to the path public/bundle.js. During the compilation, we run the code through different loaders that do some transformation. (In our case, Babel compiles ES6 and React JSX into ES5.) For example:

module: {
 loaders: [{
   test: /\.jsx?$/,
   exclude: /node_modules/,
   loader: 'babel',
   query: {
     presets: ['es2015','react']
   }
 }]
}

The bottom line is that webpack allows you to take your code, transform it, and then compile it all together and output in a single file.

 

Babel

Babel, a JavaScript compiler, allows you to do the transformation that we discussed above. As you can see, this is not valid JS code:

class Hello extends React.Component { 
	render() {
					
		return (
			<h1>Hello World</h1>					
		); 
	}
}

The syntax is called JSX, and many programmers really like it. Babel transforms the JSX code into regular JS so that the browser can understand it. Also, Babel can be used for adding ES6 syntactic sugar to your project. We use two presets in our project—JSX and ES6 transformations:

query: {
 presets: ['es2015','react']
}

 

Project structure

For this article, we use a simple project structure, because the project is not big enough. We placed the code of all the components in a single-folder app. However, if the project grows, this approach will not be suitable.

It is important to separate two types of React components—containers and representative components—and place them into different directories. Containers are the components that contain app logic and can be reusable. Representative components are simple views that include only the render method, get data, and render the view according to props.

 

Decomposition of the components

The main component that renders our Board component is App.

class App extends Component {
 render() {
   return (
     <Board></Board>
   );
 }
}

render(<App />, document.getElementById('root'));

To render the main component, you need the react-dom module:

import {render} from 'react-dom'

Previously, this module was a part of React, but now it is an independent module for rendering. It was separated to have the possibility to use the module with other frameworks, not only with React.

All React decomposition can be represented as a graph. For example, our app is represented by the scheme below.

reactjs-decomposition

That is why you have to fill in only the main entry in the webpack.config file.

 

Deploying the app to Predix

Before deploying your app to Predix, install the Cloud Foundry CLI and verify the installation by typing cf in the terminal.

To deploy your app, create a space in your Predix account—log in to www.predix.io and use the Create space button.

Then, you need to log in to Cloud Foundry—go to the terminal and type cf login.

The terminal asks for the API endpoint; we use the following: https://api.system.aws-usw02-pr.ice.predix.io.

Next, enter your Predix account credentials and select the previously created space.

deploying-react-app-to-ge-predix

For deploying an app to Predix, you also need to create the manifest.yml file.

ge-predix-manifest-file

Replace <app name> with your app name. In our case, it is react-tictac.

Then, move the manifest.yml to the directory with the compiled project.

react-project-on-ge-predix

Go to the terminal, type cd <compiled-files-folder>, and then use the cf push command.

deploying-react-project-to-ge-predix

That’s it. Your app is available via HTTPS. (The URL is highlighted in the screenshot above.)

react-app-deployed-to-ge-predix

 

Related reading:


About the author:

Dmitry Kozhukh is a front-end developer at Altoros. Using JavaScript, HTML, and CSS, he specializes in creating interactive, yet functional web applications and digital interfaces—according to the latest trends in the industry.


To stay tuned with the latest updates, subscribe to our blog or follow @altoros.

Get new posts right in your inbox!

1 Comment
  • Kush Shah

    Hi Dmitry,
    Nice post! Have you got the sample code on github as it would be very handy for new Predix developers.
    Thanks
    Kush

Benchmarks and Research

Subscribe to new posts

Get new posts right in your inbox!