DevOps Automation

As I promised on my last post, our team create many short tutorials to make the life easier when playing around with IBM Cloud and all the cool services it offers to us. Fábio Henriques my teammate and one of Hop’s awesome developers is the author of the first post! His main interest is frontend technologies and the most recent passion is React JS. The theme of the post is how you deploy a React JS web app using Cloud Foundry on IBM Cloud.

Web development is growing faster than never and powerful libraries are making the development process easier for teams. This is where React comes in! React is a Javascript library created for building user interfaces in a simple and scalable manner. With React you build components that represents UI blocks of your web page and manage their own state. Also, you can combine them to make complex UIs and entire pages.  React is used successfully worldwide by large companies such as Facebook, Instagram, Netflix, Whatsapp, IBM, Airbnb, Microsoft, Dropbox and so on. Likewise, cloud-based and PaaS development are turning into a must-be requirement for web services and apps given the speedup it does on the delivery. What about join the power of React and the scalability and reliability of IBM Cloud platform?

Following I will share with you a short step-by-step to get an up and running app on IBM Cloud:

1. First, we’ll run the create-react-app command to generate a basic React app: create-react-app my-app-name
2. Now, change your current directory to the my-app-name directory created and so you can run yarn start (or npm start) to start the application and check if everything is all right.
3. You must have a manifest.yml file to determine the Cloud Foundry app configurations. Also, we'll need to use a static file buildpack to serve the React app, for that reason create a Staticfile file in your public folder containing the following: pushstate: enabled
4. Create the manifest.yml file in the project root directory with the following content:

5. ---
   path: build/
   memory: 64M
   instances: 1
   domain: mybluemix.net
   disk_quota: 1024M
   buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git

6. A short explanation about what is each line on the manifest.yml:

   • path – When you build your app, all bundled and minified files are created in build/ folder. In CF environment we want to expose only these files, so we’ll specify this folder as root directory for the app;
   • memory – How much memory your app runtime will use. Since we are using a staticfile buildpack, we only need a little memory to run it. The M suffix stands for Megabytes;
   • instances – How much container instances your app will have; We’ll leave it as default value 1;
   • domain – Hosting domain for your app. In this tutorial we’ll be using IBM Cloud to host the CF app;
   • disk_quota – How much disk space your app will use. We’ll leave it as default;
   • buildpack – The buildpack used to run the CF app.
7. Now, it is time to build and send the app to the cloud! Run yarn build (or npm run build) to create the bundled production files in build/ folder.
8. But wait... the build command also creates source maps for JS and CSS files. It makes possible to anyone easily beautify and make readable your production files again. If you don’t want this behavior, we need to tell the build script to not generate source maps in the process.
9. So, let’s add a development dependency called cross-env. With this library we can use environment variables in a cross-platform manner. Run yarn add –dev cross-env (or npm install –save-dev cross-env).
10. We’ll create a script to set the GENERATE_SOURCEMAP env to false and build the app. Add this script to scripts object in package.json:
11. "build-prd": "cross-env GENERATE_SOURCEMAP=false react-scripts build"

12. Your package.json will looks like:

13. {
     "name": "my-app-name",
     "version": "0.1.0",
     "private": true,
     "dependencies": {
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "1.1.4"
     },
     "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject",
     "build-prd": "cross-env GENERATE_SOURCEMAP=false react-scripts build"
     },
     "devDependencies": {
     "cross-env": "^5.2.0"
     }
    }

14. Now let us run yarn build-prd (or npm run build-prd) to generate the bundled production files without source maps. Once the process finishes, it’s time to deploy your app!
15. You’ll need login in a IBM Cloud CF environment first to be able to push the app to cloud. Once you’re logged, run this command in the project root directory (where your manifest file was created): bx app push my-app-name

This command will build the CF app and start it in the cloud. After the process completes, check out your new online web app! In my case, the URL will be http://myapp-name.mybluemix.net. Easy, right? You have a React JS app up and running on the IBM Cloud. If you have question about the process, please let us know. You can also reach me on my Twitter @thvmoura.
#DevOpsAutomation
#IBMChampion
#ChampionsCorner