{"id":44511,"date":"2016-07-22T19:46:56","date_gmt":"2016-07-22T16:46:56","guid":{"rendered":"https:\/\/www.altoros.com\/blog\/?p=44511"},"modified":"2019-06-20T19:21:58","modified_gmt":"2019-06-20T16:21:58","slug":"how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example","status":"publish","type":"post","link":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/","title":{"rendered":"How to Deploy a React.js App to GE&#8217;s Predix"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-transparent ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#Introduction_to_React\" >Introduction to React<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#Configuring_a_React_project\" >Configuring a React project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#Project_structure\" >Project structure<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#Decomposition_of_the_components\" >Decomposition of the components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#Deploying_the_app_to_Predix\" >Deploying the app to Predix<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#Further_reading\" >Further reading<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Introduction_to_React\"><\/span>Introduction to React<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><p><a href=\"https:\/\/reactjs.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">React<\/a> is a JavaScript library for building user interfaces. The technology is backed by Facebook and Instagram\u2014among others. 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. One of the examples can be found below.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">example.js\t\t\t\t\r\nimport React from 'react';\r\n\t\t\t\t\t\r\nclass Hello extends React.Component { \r\n\trender() {\r\n\t\t\t\t\t\r\n\t\treturn (\r\n\t\t\t&lt;h1&gt;Hello World&lt;\/h1&gt;\r\n\t\t); \r\n\t}\r\n}\r\n\t\t\t\t\t\r\nReact.render(&lt;Hello \/&gt;, document.getElementById('root'));<\/pre>\n<p><\/p>\n<p>The main reasons why React is great are as follows:<\/p>\n<ul>\n<li style=\"margin-bottom: 6px;\"><strong>It is declarative.<\/strong> Instead of telling your program how to do something, you tell what you want to do (for example, using <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">Array<\/code> 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.<\/li>\n<li style=\"margin-bottom: 6px;\"><strong>It is JavaScript.<\/strong> Moving HTML to JavaScript 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: <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">*ngFor<\/code>, <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">[click]<\/code>, <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">ng-repeat<\/code>, and <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">ng-click<\/code>). If you know JavaScript, you can write in React easily.<\/li>\n<li style=\"margin-bottom: 6px;\"><strong>Unidirectional data flow.<\/strong><\/li>\n<li style=\"margin-bottom: 6px;\"><strong>Decomposition.<\/strong> The app is broken into smaller components.<\/li>\n<li><strong>Explicit mutations.<\/strong> Explicit changes of the state are done via the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">setState<\/code> method.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Configuring_a_React_project\"><\/span>Configuring a React project<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><strong>npm<\/strong><\/p>\n<p><a href=\"https:\/\/www.npmjs.com\/\" rel=\"noopener noreferrer\" target=\"_blank\">npm<\/a> 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 JavaScript packages.<\/p>\n<p>If you already installed npm, just type <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">npm init<\/code> in the terminal to start working with it. It will initialize a new project for you by creating the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">package.json<\/code> file.<\/p>\n<p>To install a module, type <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">npm install &lt;module name&gt; --save<\/code> (the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">--save<\/code> flag tells npm to save this module in <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">package.json<\/code>). There are two types of dependencies in the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">package.json<\/code> file: <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">dependencies<\/code> and <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">devDependencies<\/code>. The first type includes frameworks or libraries needed for the application code. The second type in general contains bundle packages needed for transforming the code.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>npm scripts<\/strong><\/p>\n<p>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 <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">package.json<\/code> file. Just describe your command in <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">package.json<\/code>.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">&quot;scripts&quot;: {\r\n &quot;start&quot;: &quot;webpack-dev-server --progress&quot;,\r\n &quot;build&quot;: &quot;NODE_ENV=production node_modules\/.bin\/webpack -p --progress --colors&quot;\r\n}<\/pre>\n<p>To run a command, type <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">npm run &lt;command name&gt;<\/code>.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>webpack<\/strong><\/p>\n<p><a href=\"https:\/\/webpack.js.org\/\" rel=\"noopener noreferrer\" target=\"_blank\">webpack<\/a> bundles all your code into a single file. However, it can be quite tricky to write your first webpack config, since its documentation is not extensive (on the moment of writing this article). So, we are going to keep things pretty simple.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">entry:  __dirname + &quot;\/app\/App.js&quot;,\r\n  output: {\r\n    path: __dirname + &quot;\/public&quot;,\r\n    filename: &quot;bundle.js&quot;\r\n  }\r\n<\/pre>\n<p>Here, the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">entry<\/code> field is the root component of the app. It compiles all the code in a single file called <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">bundle.js<\/code> to the path <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">public\/bundle.js<\/code>. 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.) See the example below.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">module: {\r\n loaders: &#x5B;{\r\n   test: \/\\.jsx?$\/,\r\n   exclude: \/node_modules\/,\r\n   loader: 'babel',\r\n   query: {\r\n     presets: &#x5B;'es2015','react']\r\n   }\r\n }]\r\n}<\/pre>\n<p>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.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Babel<\/strong><\/p>\n<p><a href=\"https:\/\/babeljs.io\/\" rel=\"noopener noreferrer\" target=\"_blank\">Babel<\/a>, a JavaScript compiler, allows you to do the transformation that we discussed above. As you can see below, this is not valid JavaScript code.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">class Hello extends React.Component { \r\n\trender() {\r\n\t\t\t\t\t\r\n\t\treturn (\r\n\t\t\t&lt;h1&gt;Hello World&lt;\/h1&gt;\t\t\t\t\t\r\n\t\t); \r\n\t}\r\n}<\/pre>\n<p><\/p>\n<p>The syntax is called JSX, and many programmers really like it. Babel transforms the JSX code into regular JavaScript, so that the browser can understand it. Furthermore, Babel can be used for adding the ES6 syntactic sugar to your project. We use two presets in our project: JSX and ES6 transformations.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">query: {\r\n presets: &#x5B;'es2015','react']\r\n}<\/pre>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Project_structure\"><\/span>Project structure<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>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.<\/p>\n<p>It is important to separate two types of React components\u2014containers and representative components\u2014and 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.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Decomposition_of_the_components\"><\/span>Decomposition of the components<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>The main component that renders our <code style=\"color: black; background-color: #e6e6e6;\">Board<\/code> component is <code style=\"color: black; background-color: #e6e6e6;\">App<\/code>.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">class App extends Component {\r\n render() {\r\n   return (\r\n     &lt;Board&gt;&lt;\/Board&gt;\r\n   );\r\n }\r\n}\r\n\r\nrender(&lt;App \/&gt;, document.getElementById('root'));\r\n<\/pre>\n<p>To render the main component, you need the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">react-dom<\/code> module.<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">import {render} from 'react-dom'<\/pre>\n<p>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.<\/p>\n<p>All React decomposition can be represented as a graph. For example, our app is represented by the scheme below.<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/reactjs-decomposition.png\" alt=\"reactjs-decomposition\" width=\"272\" height=\"245\" class=\"aligncenter size-medium wp-image-44513\" \/><\/center><\/p>\n<p>That is why you have to fill in only the main entry in the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">webpack.config<\/code> file.<\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Deploying_the_app_to_Predix\"><\/span>Deploying the app to Predix<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Before deploying your app to Predix,  install the Cloud Foundry CLI and verify the installation by typing <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">cf<\/code> in the terminal.<\/p>\n<p>To deploy your app, create a space in your Predix account\u2014log in to <a href=\"https:\/\/www.predix.io\" target=\"_blank\" rel=\"noopener noreferrer\">www.predix.io<\/a> and use the <i>Create space<\/i> button.<\/p>\n<p>Then, you need to log in to Cloud Foundry\u2014go to the terminal and type <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">cf login<\/code>.<\/p>\n<p>The terminal asks for the API endpoint, so we use the following: <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">https:\/\/api.system.aws-usw02-pr.ice.predix.io<\/code>.<\/p>\n<p>Next, enter your Predix account credentials and select the previously created space.<\/p>\n<p><a href=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/deploying-react-app-to-ge-predix.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/deploying-react-app-to-ge-predix.jpg\" alt=\"deploying-react-app-to-ge-predix\" width=\"508\" height=\"381\" class=\"aligncenter size-full wp-image-44514\" \/><\/a><\/p>\n<p>For deploying an app to Predix, you also need to create the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">manifest.yml<\/code> file.<\/p>\n<p><a href=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/ge-predix-manifest-file.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/ge-predix-manifest-file.jpg\" alt=\"ge-predix-manifest-file\" width=\"572\" height=\"90\" class=\"aligncenter size-full wp-image-44515\" \/><\/a><\/p>\n<p>Replace <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">&lt;app name&gt;<\/code> with your app name. In our case, it is <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">react-tictac<\/code>.<\/p>\n<p>Then, move the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">manifest.yml<\/code> to the directory with the compiled project.<\/p>\n<p><a href=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/react-project-on-ge-predix.jpg\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/react-project-on-ge-predix.jpg\" alt=\"react-project-on-ge-predix\" width=\"350\" height=\"334\" class=\"aligncenter size-full wp-image-44516\" \/><\/a><\/p>\n<p>Go to the terminal, type <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">cd &lt;compiled-files-folder&gt;<\/code>, and then use the <code style=\"color: #222222; background-color: #e6e6e6; padding: 1px 2px;\">cf push<\/code> command.<\/p>\n<p><a href=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/deploying-react-project-to-ge-predix.jpg\"><img decoding=\"async\" src=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/deploying-react-project-to-ge-predix.jpg\" alt=\"deploying-react-project-to-ge-predix\" width=\"640\" class=\"aligncenter size-full wp-image-44517\" \/><\/a><\/p>\n<p>That\u2019s it. Your app is available via HTTPS. (The URL is highlighted in the screenshot above.)<\/p>\n<p><a href=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/react-app-deployed-to-ge-predix.jpg\"><img decoding=\"async\" src=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2019\/06\/react-app-deployed-to-ge-predix.jpg\" alt=\"react-app-deployed-to-ge-predix\" width=\"640\" class=\"aligncenter size-full wp-image-44518\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Further_reading\"><\/span>Further reading<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ul>\n<li><a href=\"https:\/\/www.altoros.com\/blog\/introducing-a-one-click-button-for-deploying-to-ge-predix\/\">Introducing a One-Click Button for Deploying to GE Predix<\/a><\/li>\n<li><a href=\"https:\/\/www.altoros.com\/blog\/how-to-configure-predix-analytics-services-and-use-them-from-a-node-js-app\/\">How to Set Up Predix Analytics Services and Use Them from a Node.js App<\/a><\/li>\n<li><a href=\"https:\/\/www.altoros.com\/blog\/how-to-create-a-page-layout-and-login-by-using-predix-ui\/\">How to Create a Page Layout and Login by Using Predix UI<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<p><center><small>This post was written by <b>Dmitry Kozhukh<\/b> with assistance from <a href=\"https:\/\/www.altoros.com\/blog\/author\/viktoryia-fedzkovich\/\">Victoria Fedzkovich<\/a> and <a href=\"https:\/\/www.altoros.com\/blog\/author\/alex\/\">Alex Khizhniak<\/a>.<\/small><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction to React<\/p>\n<p><p>React is a JavaScript library for building user interfaces. The technology is backed by Facebook and Instagram\u2014among others. 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. One of the [&#8230;]<\/p>\n","protected":false},"author":129,"featured_media":44540,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[214],"tags":[873,647],"class_list":["post-44511","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-cloud-native","tag-predix"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Deploy a React.js App to GE&#039;s Predix | Altoros<\/title>\n<meta name=\"description\" content=\"This tutorial demonstrates how to create a simple Tic Tac Toe game with React and deploy it to the Predix platform.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Deploy a React.js App to GE&#039;s Predix | Altoros\" \/>\n<meta property=\"og:description\" content=\"Introduction to React React is a JavaScript library for building user interfaces. The technology is backed by Facebook and Instagram\u2014among others. 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. One of the [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Altoros\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-22T16:46:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-06-20T16:21:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2016\/07\/deploying-a-react-based-app-to-predix.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"381\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Dmitry Kozhukh\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dmitry Kozhukh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/\",\"url\":\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/\",\"name\":\"How to Deploy a React.js App to GE's Predix | Altoros\",\"isPartOf\":{\"@id\":\"https:\/\/www.altoros.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2016\/07\/deploying-a-react-based-app-to-predix.gif\",\"datePublished\":\"2016-07-22T16:46:56+00:00\",\"dateModified\":\"2019-06-20T16:21:58+00:00\",\"author\":{\"@id\":\"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/43fcfb65ce2772635d757068c8605e41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#primaryimage\",\"url\":\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2016\/07\/deploying-a-react-based-app-to-predix.gif\",\"contentUrl\":\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2016\/07\/deploying-a-react-based-app-to-predix.gif\",\"width\":640,\"height\":381},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.altoros.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Deploy a React.js App to GE&#8217;s Predix\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.altoros.com\/blog\/#website\",\"url\":\"https:\/\/www.altoros.com\/blog\/\",\"name\":\"Altoros\",\"description\":\"Insight\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.altoros.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/43fcfb65ce2772635d757068c8605e41\",\"name\":\"Dmitry Kozhukh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2017\/01\/Dmitry_Kozuch.jpg\",\"contentUrl\":\"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2017\/01\/Dmitry_Kozuch.jpg\",\"caption\":\"Dmitry Kozhukh\"},\"description\":\"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\u2014according to the latest trends in the industry.\",\"url\":\"https:\/\/www.altoros.com\/blog\/author\/dmitry-kozhukh\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Deploy a React.js App to GE's Predix | Altoros","description":"This tutorial demonstrates how to create a simple Tic Tac Toe game with React and deploy it to the Predix platform.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/","og_locale":"en_US","og_type":"article","og_title":"How to Deploy a React.js App to GE's Predix | Altoros","og_description":"Introduction to React React is a JavaScript library for building user interfaces. The technology is backed by Facebook and Instagram\u2014among others. 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. One of the [...]","og_url":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/","og_site_name":"Altoros","article_published_time":"2016-07-22T16:46:56+00:00","article_modified_time":"2019-06-20T16:21:58+00:00","og_image":[{"width":640,"height":381,"url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2016\/07\/deploying-a-react-based-app-to-predix.gif","type":"image\/gif"}],"author":"Dmitry Kozhukh","twitter_misc":{"Written by":"Dmitry Kozhukh","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/","url":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/","name":"How to Deploy a React.js App to GE's Predix | Altoros","isPartOf":{"@id":"https:\/\/www.altoros.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#primaryimage"},"image":{"@id":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2016\/07\/deploying-a-react-based-app-to-predix.gif","datePublished":"2016-07-22T16:46:56+00:00","dateModified":"2019-06-20T16:21:58+00:00","author":{"@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/43fcfb65ce2772635d757068c8605e41"},"breadcrumb":{"@id":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#primaryimage","url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2016\/07\/deploying-a-react-based-app-to-predix.gif","contentUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2016\/07\/deploying-a-react-based-app-to-predix.gif","width":640,"height":381},{"@type":"BreadcrumbList","@id":"https:\/\/www.altoros.com\/blog\/how-to-deploy-a-react-js-app-to-ge-predix-a-tic-tac-toe-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.altoros.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Deploy a React.js App to GE&#8217;s Predix"}]},{"@type":"WebSite","@id":"https:\/\/www.altoros.com\/blog\/#website","url":"https:\/\/www.altoros.com\/blog\/","name":"Altoros","description":"Insight","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.altoros.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/43fcfb65ce2772635d757068c8605e41","name":"Dmitry Kozhukh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.altoros.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2017\/01\/Dmitry_Kozuch.jpg","contentUrl":"https:\/\/www.altoros.com\/blog\/wp-content\/uploads\/2017\/01\/Dmitry_Kozuch.jpg","caption":"Dmitry Kozhukh"},"description":"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\u2014according to the latest trends in the industry.","url":"https:\/\/www.altoros.com\/blog\/author\/dmitry-kozhukh\/"}]}},"_links":{"self":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/44511","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/users\/129"}],"replies":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/comments?post=44511"}],"version-history":[{"count":10,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/44511\/revisions"}],"predecessor-version":[{"id":44561,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/posts\/44511\/revisions\/44561"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/media\/44540"}],"wp:attachment":[{"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/media?parent=44511"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/categories?post=44511"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.altoros.com\/blog\/wp-json\/wp\/v2\/tags?post=44511"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}