Technical Articles
Deploy your ReactJS application in Cloud Foundry
Hello Everyone,
In this blog, we will discuss how you can deploy your ReactJS application on SAP Cloud Foundry.
React.js in layman’s terms
React is an open-source JavaScript library for building user interfaces. You can build beautiful web applications using React. One of the reasons why it’s so popular today as the web development is growing faster is the strong community of developers who make open-source packages and powerful libraries updating it with great features.
Assumption
This blog assumes that you have already created a React application and are looking for to deploy your application in SAP Cloud Foundry.
Let’s get started…
1. Running React Application
First, ensure that your application is running as expected. For this, open a command prompt on your computer.
Navigate to your application folder and type the below command:
yarn start ( npm start)
If you are new to React and would like to try running a basic application on cloud Foundry, create your basic react application using below command
create-react-app my-app-name
“my-app-name” is your application name. For more details on how you can create your react application can be found in the link
Now, change your current directory to the “my-app-name” directory created, so you can run “yarn start ( npm start)” to start the application and check if everything is all right.
2. Install
-
- Change your current directory to “my-app-name” directory which you created
- Run the below command to install all the libraries
npm install
3. Creating Manifest.yml
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.
-
- manifest.yml file in the project root directory with the following content:
---
applications:
- name: your-app-name
path: build/
instances: 1
buildpack: https://github.com/cloudfoundry/staticfile-buildpack.git
memory: 256M
- manifest.yml file in the project root directory with the following content:
- A short explanation about what is each line on the manifest.yml:
- Name: Name of your React application
- 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 the root directory for the app;
- Instances – How much container instances your app will have; We’ll leave it as default value 1;
- Memory – How much memory your app runtime will use.
- Buildpack – The buildpack used to run the CF app. We are using staticfile-buildpack here
- Run the command
npm run build
4. Creating Staticfile
- Once the build runs successfully as shown below,
-
- Create a Staticfile with the following content in the build folder as shown below
pushstate: enabled
- Create a Staticfile with the following content in the build folder as shown below
- A short explanation about why Staticfile is needed:
- If you create a file named Staticfile and locate it in the build directory of your app, Cloud Foundry automatically uses the Staticfile buildpack when you push your app.
- Also, be careful, the Staticfile gets deleted every time you build the project.
5. Deploying your application in SAP Cloud Foundry
- Login to SAP Cloud Platform using Command Line Interface (CLI), choose your org. Follow the tutorial from developers.sap.com to install the Cloud Foundry Command Line Interface to login.
- Once login is successful, you will be prompted to select your org (if you belong to multiple org)
- Now all you need is to be able to push the application to the cloud.
- Change your current directory to “my-app-name” directory created (if it is not already there)
- Write the command
cf push
as shown below:
Yayy!! Your application is deployed on Cloud Foundry. The link corresponding to routes is the link to access your application.
Points to note:
Manifest.yml file is important. Based on how heavy your application is, you can change the memory size.
Staticfile has to be in the build folder. Also, be careful, the Staticfile gets deleted every time you build the project. Remember to add it each time after you build the project. Each time your root link changes from xxx.ondemand.com to xxx/ondemand.com/Home or any child pages, and you see an error “Nginx 404 on page reload on cloud foundry” It means that your Staticfile is not in build folder.
Hello 🙂
Do you have a GitHub link for this?
Hi,
Not public, but if you are looking for a Hello World kind of React JS application deployed on a cloud foundry, can create one and share it.
Regards,
Vijayalakshmi
Will be great because I am trying to deploy on CF a react App, and I followed your steps above but is not working for me.
After the cf push tell me that everything is fine in cf account when I access the app I am redirected to the home page of the cf account 🤔
Very helpful thanks!
Little tip: You can put the Staticfile in your /public folder. That way it will automatically be included in your builds and the /build folder.