Deploy React on Cpanel => Cannot GET / - node.js

I need help to install my react project with Cpanel (O2switch host). See my project :
For my server I use Sequelize to manage ma data base.
I followed steps provids on the web :
Step 0 :
Create the database (if you need it).
Step 1 :
Add into package.json, contains into my client file, the following code : "homepage": ".",
Step 2 :
npm run build into my client file to create build file (in red into the previous picture).
Step 3 :
Make a .htaccess it will look like this
<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>
Step 4 :
Create my nodeJS server on Cpanel
Step 5 :
Go inside my Cpanel > file directory > monGouvernement :
And add into public all files from my build file.
After, add all files from my server file as below (without node_modules file) :
Step 6 :
Go back to my nodeJs_setup to click on "Run NPM install" to install dependencies and create node_modules files.
At this step, my database is created. But my front-end doesn't work. See what my browser show me:
I don't understand the reason of it. Could help me to solve this issus please ?

Ok I solved my problem.
The answer is : I didn't add my build file at the right place. On my O2Switch Cpanel I'm hosting my domaine name and my nodeJs server (that I created with the setup_NodeJs_app). So, I got two files in my file manager :
The first one is for my domaine name. The second one is for my nodeJs server.
So I have to add my build file into my domaine (mon-gouvernement.fr) name like this :
And my server files into the other one (monGouvernement) :
Like this, everything work perfectly.

Related

How to deploy a react app on cPanel?

I've created a react app with the following folder structure
-public
 --dist
  ---bundle.js
  ---styles.css
 --index.html
 --images
-server
 --server.js
-src
 --components
 --app.js
-.babelrc
-package.json
-webpack.config.js
I want to upload it to cPanel. Is that possible? Would I also need to upload the node_modules/ folder?
here is a link to my repo: https://github.com/theoiorga/react-expensify-app
step 1:"homepage": ".", -->add this on package.json file
step 2 : npm run build --> this will create a build folder.
step 3 : make a .htaccess it will look like this
<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>
step 4 : now take all the files in build folder plus your htaccess and drop them in the desired domain or subdomain
Follow the steps to deploy your React website on CPanel
Step(1) : Under your local project directory run this command "npm
run build" or "yarn build" then "build" directory will be created. This directory contains the bundle of all static files with dependencies which you can directly copy onto your production server.
Step (2) : Go to inside the "build" folder and select all files and compress or make a Zip then upload in cpanel it will work.
Note: for react app no need to upload whole projects we need to deploy only "build" directory.
To Deploy React App on Cpanel/Server. Please follow the Steps
Step 1) Go to Package.json file and add this Property "homepage":"http://yourdomain.com" and paste your domain within it. Like
Step 2) Now build the App using npm run build
In your project directory it will create a build folder and it will contain all your static files for project. Zip all files and upload on your cpanel directory where your website run.
Step 3) Create an .htaccess file and Place it on root directory. And paste the below code in .htaccess file.
<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>
Now Run your Project. It will Work.
Thanks
I had the same issue recently. As a newbie to React, I have deployed my app to Heroku many times, as part of the React course. However, I wanted to deploy to my own shared server (CPanel), to learn how it is done. But also to use my hosting to host other apps I code.
Anyway, What Kallayya and Sumit mentioned above both needs to be done. There is also a great step by step information here.
NB. If you did not use something like 'npx create-react-app' to create the app (boilerplate) then, you will not get a 'Build' folder.
My initial boilerplate was created from scratch as part of the course. So I was initially confused about why I was not getting a Build folder. Then I realised that 'Build' folder is created if the app was created with e.g. 'npx create-react-app' or 'yarn create react-app'. I had used 'npx create-react-app' to start another project. In the new project, I was able to get a Build folder. Hence, my realisation.
So if you run a build and you don't get a Build folder (as mentioned above). Then the files to deploy to live will be the content in the 'public' directory on your local site. (If you have env setup for production and development, then you may need to build for production e.g. yarn build:prod).
Now follow the same process in the step by step link, above. However, upload the content from your 'public' directory in your local site, to the public_html folder on your remote hosting server. Create and upload your .htaccess file as shown on the page of the above link. Now view your site at your relevant domain.
Following the steps in the above link, I was able to deploy to my Shared hosting and view my app at my domain. It works perfectly fine. Haven't seen any issues yet.
I hope this will be helpful to others.
I resolved it by implementing the following steps
Step 1
Add the following in package.json
"homepage": "."
Step 2
Add the following in the public/index.html above meta: description
<script type="text/javascript"> document.write("<base href='//" + document.location.host + "' />"); </script>
Step 3
Build your App using npm run build
Step 4
Upload files inside /build folder to the server using any file transfer tool
Step 5
Create and add the following in .htaccess
<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>
Just upload your local public folder to your hosting public_html folder
Make sure your hosting provider supports Node.js that you will see on CPanel.
The company I use is Namecheap and they just added Node.js runtime environment to CPanel.
Contact your hosting company and ask them if they support Node.js
I’m agree with the fact that you should have a dedicated or VPS hosting, because you will need to have control to the command line.
What I would suggest you to do, apart of what has been mentioned in other comments (accessing the cPanel via SSH and install node and npm, etc), you should upload the files using GitHub or BitBucket.
When you do it this way it will be even easier to keep updating your web app every time you need.
I imagine you have ssh access. If you do install NodeJS via SSH and then upload your files, it will be better if you do it on your public_html. Not only the build but the whole project. I would do it using git.
When you have you files up you will have to install npm and in your client folder you have to install your client, because just uploading the node_modules folders won't work.
You should install forever and run forever node server.js, that will make the server run even when you close the terminal
I hope I explained myself.
I have a hosting plan with siteground and I can host as many websites as I want with that plan.
Hosting a react app with siteground was super easy once I figured it out.
I got a good chunk of what I know by reading this thread, so if you want visuals you can look to the top answer.
Step 1) Add "homepage":".", to the object in your package.json file.
Step 2) In your terminal run npm run build
Step 3) Add a .htaccess file to your build folder with the following code:
<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>
Step 4) Use a file manager to upload all of the files from your build folder including your .htaccess file to the public folder on the server. I used FileZilla, but you can use the built in file manager or SSH keys. If you don't know how to make an FTP user, go here.
Siteground specific instructions:
Step 5) Navigate to the site tools for the desired website. (You can even use a temporary domain for this).
Step 6) Install an SSL certificate in Security > SSL Manager. (You can use the free one. Take note of the expiration date.)
Step 7) Enforce HTTPS by going to Security > HTTPS Enforce and turn it on.
That should work! Send questions if you have any.
I have no affiliation with siteground or any company. I am a freelance web developer that is developing my react skills
React applications are built on Node.js and do not work out of the box on Cpanel.
I am assuming you are working with a Linux server. To deploy your react app, you need to do the following.
Make sure you have root assess to the server. That is only possible if you are working with a VPS or dedicated hosting and not shared hosting.
Log into your account using SSH
Install node.js and npm on the server
Upload your build files to the server
Run the command to start your app in production.
These steps look easy but are a bit complicated. If you are a newbie who just started working on react, I will advise you not to bother yourself with these steps. You can easily get your react app working in less than 10 mins with a cloud service like Heroku for free too.

How do I deploy my react app into my FTP

I used create-react-app to set everything up.
I was able to get a live version of it up on surge.
I now want to add it to my personal website that's hosted by Bluehost.
I need to upload it using an FTP Client.
https://codingforkids.us/projects/joesprojects/ravenous/
This is the result of running npm run build and placing the contents of the build folder into the FTP client. The page is blank.
Here's the app on Surge: http://ambiguous-afternoon.surge.sh/
There are multiple 404s for the css,js files your trying to server. Make sure the files are available on the host, and whether they are can be statically served.
The most likely problem is that you need to add an .htaccess file into the public directory prior to doing your build.
Check out the React article on deployment
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Also ensure you've set your URL in the manifest.json (also in public)
You may also have to do a hard refresh of your site.

Codeigniter and WAMP Routing Issue - What am I missing?

I'm scratching my head for almost two days now, thought some expert advice can help me here.
I got a CodeIgniter application I need to maintain (version 2.X), and this is my first experience with it. The structure of the application is:
myApp
application
cache
certs
config
controllers
...
modules
moduleA
controllers
models
views
moduleB
controllers
models
views
...
third_party
views
cgi-bin
...
system
themes
uploads
I installed WAMP, and throw the entire myApp under c:\wamp\www. Another steps I did:
1) Changed the 'listen' port of the Apache since I also run IIS on my machine.
2) Enabled the Apache rewrite module.
3) Set the 'all' and 'all granted' in the <Directory .../> section:
<Directory "c:/wamp/www/">
Options Indexes FollowSymLinks
AllowOverride all
Require all granted
</Directory>
4) Set correctly the database name in the 'database.php' config.
5) Verified .htaccess file is located under myApp folder, and the content of the .htaccess is this:
RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]
6) In 'routes.config' the default controller is: $route['default_controller'] = "login";
With these steps I was able to host this application locally and work for a while. But, I had to change my Windows user password, and after rebooting my computer I receive 404 errors all of a sudden.
I am able to browse to the 'login' page via http://localhost:port/myApp/index.php (or just http://localhost:port/myApp), but from there I receive only 404 error messages. I can browse with the full url though:
http://localhost:port/mpApp/index.php/login/forgotpassword - Accessible
http://localhost:port/myApp/login/forgotpassword - 404 error
Now, I am not sure whether it's related to my Windows user password change, but this issue became a voodoo, since I swear I could work and browse locally to all pages. I also reinstalled WAMP twice and repeated
the process above just to make sure I'm doing things right.
Can anyone think of something I am missing here?
Found the issue, at least the one worked for me:
In config.php (under ...myApp\application\config) I changed the value of $config['uri_protocol'] from 'AUTO' to 'PATH_INFO'.

index.cfm append with SES URL in MURA

Recently working with MURA CMS with RAILO on UBUNTU. I am installing MURA in inner folder of root directory.
public_html >> website.
Following code added in .htaccess to rewrite URL to run website without index.cfm and website directory.
Options +FollowSymLinks
RewriteEngine On
DirectoryIndex index.cfm
RewriteRule ^$ /website/ [R]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} !-d
RewriteRule ^website/([a-zA-Z0-9/-\s]+)$ /website/index.cfm/$1 [PT]
So my url http://example.com/website/privacy/ rewrite as
http://example.com/website/index.cfm/privacy/
I think rewrite rule should work correctly as I have tried some online validator and giving me correct result but if run it into MURA it produce URL like
http://example.com/website/index.cfm/privacy/index.cfm
I am not sure who is adding last index.cfm (apache or mura) and this take me to 404 page everytime.
Please help... this driving me crazy..
Thanks,
Pritesh
UPDATE
I have same site setup with windows/IIS 7 under subfolder of root and work fine though, if that help
To take off index.cfm of the URL, you have to edit file settings.ini.cfm
To edit this file
go to Modules / File manager
Then tab Application Root
Select folder config
Then right click on settings.ini.cfm and edit
In this file, siteidinurls and indexfileinurls have to be at 0
siteidinurls=0
indexfileinurls=0
After change, you have to reload application by clicking on Reload application on the Settings menu at the top of the window.
Thanks Matt and Mael for spending time for this issue.
Finally figure it out that TOMCAT was causing issue and adding index.cfm at the end.
<url-pattern>/website/index.cfm/*</url-pattern>
Add above URL pattern in web.xml file and it start working fine.

Flexi Auth Demo + Codeigniter not working on Xampp Localhost

I installed flexi auth demo on my online website & it works fine.
But I have problem on localhost. I want to customize it & for that I need to work on localhost. I have following settings: local host with CI + XAMPP + Windows 7
Directory structure:
http://localhost/xampp/prj/pub <- Here I have index.php & .htaccess file
http://localhost/xampp/prj/main/system <- This is CI System folder
http://localhost/xampp/prj/main/application <- This is CI Application folder
My .htaccess file is:
IndexIgnore *
RewriteEngine On
RewriteBase /prj/pub/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.php [L,QSA]
I use [http://localhost/xampp/prj/pub] to access the flexi auth demo & it opens main page. But when i click “Try the Demo” it takes me to xampp default web root i.e. [http://localhost/xampp] & shows directory listing of this folder.
I have been checking by changing base path & different .htaccess parameters but no success. At present I have set my base url : [http://localhost/xampp/prj/pub/] in auth_lite.php file.
I think the problem is in .htaccess or settings of xampp need to be changed.
Can anybody help me ?
Try moving your prj folder out of the xampp directory so that is a subdirectory of the htdocs folder. Then you can access it via http://localhost/prj
You may also need to alter the base_url in the config file: application/config/config.php
Any errors can be found in the php/logs directory of your xampp root.
in config.php
$config['uri_protocol'] = 'AUTO';
change it to
$config['uri_protocol'] = 'PATH_INFO';
in codignater Framework

Resources