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.
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.
[email protected]:/home/username$ cd ~/private/react
[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.
To use "npm", however, you need to create a new app via WebApps in your Control Panel:
Leave the "Start command" field empty for now. Click Create but don't enable the app.
[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
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.
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).
Edit the app in the WebApps section of the Control Panel. Enter the following as "Start command":
serve -s build
Enable the app and visit http://react-project.mydomain.com/ to check if everything is operating normally.
No setup fees. Minimum contract period for shared hosting services - 12 months. Full prepayment for the contract period. 100-day money-back guarantee. No automatic renewal. Fees for domain registrations and SSL certificates cannot be refunded in case of an early contract termination.
ICDSoft 2001-2023 © All rights reserved
Terms of Use
|
Legal notice
|
Privacy
|
Reseller terms