deployment of react.js application to apache server via react-scripts

Question

I'm quite newbie in react , and, even I have seen similar answers in stackoverflow and google, I can't make it work.

I have created an application via 'react-scripts' , and it worked awesome (just npm start . Nothing fancy).

My problem arrives when I try to deploy this application in my Apache server .

1) I execute 'npm build' . Build folder is created with (I guess ) a deployable version .

2) I copy this build folder to my Apache server and, when I try to access, I see the head and the tittle, but no content. Everything white .

I receive this message after 'npm run build' :

The project was built assuming it is hosted at the server root. To override this, specify the homepage in your package.json. For example, add this to build it for GitHub Pages:

"homepage": "http://myname.github.io/myapp",

The build folder is ready to be deployed. You may serve it with a static server:

npm install -g serve serve -s build

I guess 'serve' is a http server, but I want to deploy my app in Apache . As I understand, should be enough to copy to Apache folder . There's something I'm missing . Could you help me, please ?

Ok ... seems an Apache issue . I have seen in chrome developer console that I haven't put files in correct place : Failed to load resource: the server responded with a status of 404 (Not Found) localhost:9080/static/js/main.80cf07c6.js Failed to load resource: the server responded with a status of 404 (Not Found) localhost:9080/static/css/main.9a0fe4f1.css Failed to load resource: the server responded with a status of 404 (Not Found) I haven't tested yet, but seems my mistake — Yago
– Yago, Commented Mar 14, 2017 at 6:25
I was stuck in the same issue. I just solve this by replacing '/static' by './static' in the index.html. — Zied Hf
– Zied Hf, Commented Dec 6, 2017 at 14:47

Jacob Nelson · Accepted Answer · 2019-07-19 11:53:56Z

1

step 1: create a .htaccess file in public folder with the following content

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

step 2: execute npm run build
step 3: copy files from build folder to document root of Apache

you need to make sure mod_rewrite is enabled, before using a .htaccess file.
In ubuntu, execute the command sudo a2enmod rewrite
In CentOS 7, open /etc/httpd/conf/httpd.conf file, Locate the <Directory /var/www/html> section and change the AllowOverride directive from None to All

edited Jul 19, 2019 at 11:53

answered Jul 19, 2019 at 11:46

Jacob Nelson

2,49524 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

starling · Accepted Answer · 2017-07-26 08:04:00Z

0

Check here https://github.com/mgechev/angular-seed/wiki/Deploying-prod-build-to-Apache-2

reloading pages, besides root, and deep linking will cause 404 errors... The reason is that all Angular2 routes should be served via the index.html file.

answered Jul 26, 2017 at 8:04

starling

611 silver badge1 bronze badge

2 Comments

Jacob Nelson Over a year ago

question is about deploying react application.

starling Over a year ago

The article is still relevant as it discusses configuring Apache server, mod_rewrite specifically, for single page apps (which react apps are). In fact, your answer is very similar to what's on that page.

Collectives™ on Stack Overflow

deployment of react.js application to apache server via react-scripts

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related