I have created a test application on my Mac. After I run npm run build, it created a build directory. Here starts the problem.
I have uploaded build directory to linux running an apache server. But i don't see it working. Do i need to install node, npm or upload whole directory to get it working?
The strange thing is, after i upload the build directory to the root of web server, I only see the first page. I am using react-router and first page renders the first component. example.com works fine but example.com/browse or example.com/fruit/apple does not work. Think of that you are missing htaccess file.
So are there any docs to show how can i make this work? Because when i search for deployment the only think i see is npm run build and serve
I have solved the problem adding the following .htaccess file to my root directory
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^.*$ / [L,QSA]
Related
I have an Ubuntu server with Apache2 where I need to host a React-router app among other web apps, (php, NodeJs).
The problem I'm facing is that I do not know how to tell react that the whole app is in a specific path, e.g., '/var/www/html/react_app_one/'
I changed the package.json to add the "homepage" attribute to '/react_app' and also changed the <Router basename={'/react_app'}> and it seemed to work, when I type 'https://server/react_app/' in the browser, the app "works" but if I am in a route like 'https://server/react_app/users' and reload the page the server returns the 404 screen.
I also added an .htaccess in the public folder and made sure it was in the build:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /react_app/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /react_app/index.html [L]
</IfModule>
But didn't worked.
In my "/etc/apache2/conf-enabled" there is a file that configures a reverse proxy for a NodeJS app, so I added the configuration in this file; in one of many tests, my react app worked but the other apps stopped working... I do not know what else to try...
Thank you in advance for any guidance.
Hey has anyone experienced issues with react-router on a production build. I'm running a LAMP server and I've built my project put it in the http folder and when I go to a page I get Object not found!. I have setup react-router to go to certain pages based on certain conditions if I go to the root of the server i.e. localhost/ it loads the main page but then if I click on links it works fine as soon as you try and manually go to a link by typing in the search box I get the error message Object not found
This is my .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>
You need to configure your server to return index.html if file not found (404).
Example:
Let's say you have /users route the will show your users list.
It will be ok if first you'll go to / (which will return index.html by default) and then click some router link and it will redirect you to that page. It will work because you wont make any additional requests to the server.
But if you go to /users first - you'll request it from the server. In that case server will try to find users file and it will not be there.
If this configuration is not possible consider using hash router. The url will look like this /#/users
I'm new to web-hosting and cPanel, so please be nice to me...
I have built a website using react and managed to upload its build file to cPanel. It seems to work fine, however, whenever I try to switch between pages, I get a 404 error, although the pages clearly exist (for example, when I press a button to switch to mydomainname.com/about-us). The switching works perfectly locally using react-router..
I would really appreciate it if someone could help me solve this problem!
Thanks in advance!
This is because ReactJS uses client side routing.
To fix 404, create a .htaccess file and paste below contents and upload it to your site root. It should work.
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
If the above did not work, try below (recommended by ReactJS team), either one of this should work
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
The switching works perfectly locally using react-router
Routing works fine with the inbuilt ReactJS web server but not with Apache web server. Also make sure you are using react router Link component to navigate between pages and not the html anchor (a) tag.
You have to redirect all the requests to your index.html. You can edit the .htaccess for that. use <Link> from react-router to make redirections.
Follow these steps and you will be fine
Specify your homepage in your package.json file like this
{
"name": "yourappname",
"homepage": "http://example.com",//add your domain here line
"private": true,
"version": "0.0.0",
}
2.Build your app by running yarn build or npm run build
3.Then copy the contents of your build folder and paste them on public_html folder in your cpanel
3.Go to your Cpanel file manager public_html folder and edit .htaccess file or create new one if it does not exist. and paste this there
<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>
Note the .htaccess for this should be at the same level with the contents of the build folder.
Save and your are done
Scenario
I am using BrowserRouter routes in my react app. So if my base were "localhost:3000/site1" then a virtual page might be "localhost:3000/site1/route1". This works fine in development but not on an apache server.
The Problem
I'm assuming that the react dev server always sends requests to the main index.js / router whereas on an apache server it's actually looking for a page called site1/route1. If I refresh a page while it's in a virtual location then I get a "Page not found" error from apache.
Question
How do I get my virtual routes to work with my production react build when it's on a php server? Do I need to add some redirect magic via a .htaccess file?
I solved this by using an apache friendly .htaccess file in my project folder
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} /([^/]+)/?$ [NC]
RewriteRule .* rel-path/to/project/build/index.html [L]
The "build" in my path is the build folder created by npm run build - part of the reason I put the .htaccess in my project folder is so if anyone peeks into my project folder they will immediately be sent to the build/index.html
Overview :
I have an AngularJS application that uses $locationProvider.html5Mode(true) and it is served from an Apache server. Until now I used the source code to be accessed from the others and I just needed a redirect to index.html for the angularJS's HTML5 mode. So I had this for the .htaccess file for my /app folder.
.htaccess :
<IfModule mod_rewrite.c>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</IfModule>
Modifications :
I then added Grunt for minifying the whole solution that is generated in the /dist folder of the app(so now the minified solution is found at /app/dist). I would now like to route the whole traffic of my app to the minified version, without making the users change the link. So, in practice I would like to redirect every call from /app to /app/dist.
Directory Structure now :
app
dist
minified versions(css,html,js)
I tried using some conditions from here in /app's .htaccess and moved the other .htaccess file in /app/dist, but with no success. I don't even know if the two can be combined in this way. I know I can use the dist folder as /app instead, but I wouldn't really want this, as /app is a repo and it is way easier to keep it updated. So how can I manage to achieve this with redirecting?
Also, as a second thing, is it possible to put a flag somehow so I let alpha users use the normal (not-minified) version for better debugging?
Update:
I added a sample project for this here. I just kept the initial .htaccess files that i showed above and you can check that both versions(/test and /test/dist) work as stated above. Also, it probably has some unused code and dependencies, but I just cut the other parts from my project(don't judge :D).
For this I used the initial configuration with AngularJS 1.4.8 that could generate some errors like the one stated here and here. Feel free to update the AngularJS version to 1.5.8(the last stable release of Angular 1), but take in consideration the comments on Cosmin Ababei's post as well. Also, the project uses npm for installing grunt(and other extensions for grunt), bower for angular and some other basic components and grunt for building the minified version(actually, it's just concatenating resources in same files for now). If you need to change the dependencies, please don't forget to run bower install. If you want to regenerate the dist folder, don't forget to run npm install and grunt build.
I'll assume that inside the /dist directory you have index.html with the updated URLs which point to the minified resources and the correct <base> tag. Note that the <base> tag must point to the /dist folder - just append /dist to the value you're using for the uncompressed index.html and you'd be fine.
With those things in order, here's the updated .htaccess file:
RewriteEngine On
# Don't rewrite files
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^ - [L]
# If the ALPHA_USER cookie is set, serve the uncompressed files
RewriteCond %{HTTP_COOKIE} ALPHA_USER [NC]
RewriteRule ^ index.html [L]
# Rewrite everything
RewriteRule ^ dist/index.html [L]
You'll notice two things:
I've removed RewriteCond %{REQUEST_FILENAME} -d as most likely you don't need to serve whole directories
I've added the ALPHA_USER cookie which would redirect the users to the uncompressed files. This cookie can have any value you desire.
Inside public_html => /app => .htaccess try this :
RewriteEngine On
RewriteCond %{HTTP_HOST} ^example\.com$ [NC]
RewriteRule ^ http://www.%{HTTP_HOST}%{REQUEST_URI} [L,R=301,NE]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ dist/index.html [L]
Note : HTML <base> tag should be point to the dist folder. I hope this solution will work as per your expectations.