Base de Conhecimento

How to install and run ReactJS on cPanel Imprimir

  • internetivo, reactjs, installation, run, configuration, tutorial, npm, yarn, serve, react-scripts, build, start, cPanel, guide, file, Manager, htaccess, package, json
  • 7

Method 1:

What you need for this tutorial:

1) Server with ssh access

2) CentOS 7 with cPanel

3) normal ssh or root access

 

Commands:

cd home

cd user

cd public_html

mkdir reactjs

cd reactjs

ls

npm install -g create-react-app

create-react-app my-app-name

cd my-app-name

yarn build

react-scripts build

yarn global add serve

serve -s build

│ - Local: http://localhost:5000 │

│ - On Your Network: http://Your-Server-IP:5000

 

OR

 

Method 2:

Add the Homepage to your package.json File
Next, open up your React App. Open up your package.json file and add a "homepage" attribute like so:

The format should be "homepage": "http://yourdomainname.whatever"

 

Create the build File
In your application's root directory, run yarn install to install the updated dependencies. Once this has finished, the next command you'll run is yarn build (npm install and npm build work, too).

You'll notice this creates a new directory in your project called build. The build folder is essentially a super-compressed version of your program that has everything your browser needs to identify and run your app.

build directory

Connect to cPanel
Let's head over to your hosting provider (www.internetivo.com). Once you've logged in, navigate to the cPanel manager for your domain. Typically there is a dropdown menu of some kind that says "Manage" which will direct you to cPanel.

Navigate into the File Manager. There you'll find a dropdown list of directories. The one we're interested in is public_html. Open that up.

Add the Build File Contents to public_html
Navigate to the build file in your app's root directory. Open it up and select all the contents inside the build file. If you upload the entire build file itself, the process will not work.

Once you've copied all the contents inside the build file, upload them into public_html.

Create and Upload the .htaccess File
In order for the routes to work in your React app, you need to add a .htaccess file. In the public_html folder, at the same level as the build file contents, add a new file and name it .htaccess.

Edit the file and insert the following boilerplate information:

<IfModule mod_rewrite.c>

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]

</IfModule>

Save the file.

 

You're Super Done.
That's it! Navigate to your domain address in the browser and you should see your fully functioning web app.

 

Download and run FileZilla
Grab your domain's ip address -- or ask your hosting provider
Input the domain ip, cPanel login, cPanel username, and host port (i.e. 21. Your hosting provider should provide that info for you) into the top bar
Click QuickConnect
Once connected, navigate to, select, and copy the contents inside the build file (in the left-side pane showing your computer's directories)
Navigate to the public_html directory in the cPanel pane on the right-hand side. Paste the contents of the build file into public_html
Create the .htaccess file with the same information listed above

 

 

Stay tuned for the next tutorials on NodeJS, WordPress, Python, Ruby, WHMSonic and many more...


Esta resposta foi útil?
« Voltar