SmartVPS - the complete multi-account hosting solution! Each individual account comes with free backups, addon domains, PHP-FPM with OPcache and server-side caching for lightning-fast sites. And all this at a great price!
Learn more
75% OFF ALL NEW PLANS + 100-DAY MONEY-BACK GUARANTEE
75% OFF ALL NEW PLANS
By visiting this website you accept its use of cookies. Manage your cookie preferences.

react-logo-transparent.png

This tutorial will show you how to set up and run your React app using npm and serve.

If you do not have a WebApps section in your hosting Control Panel, then this tutorial is not suitable for your particular hosting environment. You can submit a support ticket through our ticketing system if you need assistance.

React (also called ReactJS or React.js) is a popular JavaScript library for building highly interactive user interfaces. It can be easily installed via SSH with a single command:

npm install react

This command has to be executed under your project's sureapp shell. You can find more information about using the sureapp CLI in our Sureapp - app management CLI tool article.

There are certain prerequisites to running a React app:

1) You should choose a location in your Private directory where the application will reside, e.g. /home/USERNAME/private/my_app. In this tutorial, we will place the application in /home/USERNAME/private/react/calculator.
2) You should create an app via the WebApps section in your Control Panel and use the path to your application as deployment directory.
3) You have to access your account via SSH and use the "sureapp" command-line interface to log in to your app's shell and install React, as well as any other dependencies.
4) You will then have to complete the app's configuration and make final changes via the WebApps section, so the app can run using React + Serve.

Let's describe these steps in more detail. First, let's pick an app which depends on React. We'll use one of the examples listed on the official website of React (https://reactjs.org/community/examples.html) - Calculator.

1. Log in to your account via SSH and navigate to the directory in which you will place your app:

[email protected]:/home/username$ cd ~/private/react

2. Download Calculator:

[email protected]:/home/username/private/react$ git clone https://github.com/ahfarmer/calculator.git

Calculator will be installed under ~/private/react/calculator. At this point, you will have to run "npm install" to install all dependencies.

3. Create a new app

To use "npm", however, you need to create a new app via WebApps in your Control Panel:

Create a new app - React

Leave the "Start command" field empty for now. Click Create but don't enable the app.

4. Enter your project's shell via SSH by running the following command:

[email protected]:/home/username/private/react$ sureapp project shell ReactProject

Then run the following command to install all modules on which the application depends (including React):

[email protected] [ReactProject:node/lts] /home/username/private/react/calculator$ npm install

6. Test your app

Run the following command via SSH to start the development server:

[email protected] [ReactProject:node/lts] /home/username/private/react/calculator$ npm start

Visit your app's URL (i.e. http://react-project.mydomain.com/) to check if the app is running as expected.

Then cancel the SSH command (Ctrl+C) to stop the development server and edit the app's package.json file, located in the app's document root.

Change the value of the "homepage" variable from "http://ahfarmer.github.io/calculator" to the app's real URL - "http://react-project.mydomain.com". A universal solution would be to just enter "/" as homepage, so the app can work properly regardless of the URL on which it is running.

7. Prepare the application for production mode.

Run these two commands in the project's shell:

[email protected] [ReactProject:node/lts] /home/username/private/react/calculator$ npm run build
[email protected] [ReactProject:node/lts] /home/username/private/react/calculator$ npm install -g serve

Rut the following command to start the production server via SSH and test the app:

[email protected] [ReactProject:node/lts] /home/username/private/react/calculator$ serve -s build

Visit http://react-project.mydomain.com/ to verify that everything is running fine.

Shut down the production server by stopping the running process (Ctrl+C).

8) Enable your app and run it in production mode

Edit the app in the WebApps section of the Control Panel. Enter the following as "Start command":

serve -s build

 edit-react-app.png

Enable the app and visit http://react-project.mydomain.com/ to check if everything is operating normally.