Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
SPA - Apache, Nginx Configuration for Single Page Application like React.js on a custom path
# To host on root path just use "<Location />" for http://mydomainname.in
# To host on non-root path use "<Location /myreactapp>" for http://mydomainname.in/mypath
# If non-root path, don't forgot to add "homepage": "/myreactapp" in your app's package.json
<VirtualHost *:80>
ServerName mydomainname.in
DirectoryIndex index.html
DocumentRoot /var/www/html
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
<Location /myreactapp >
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . /myreactapp/index.html [L]
</Location>
</VirtualHost>
# To host on root path just use "location /" for http://mydomainname.in
# To host on non-root path use "location /myreactapp" for http://mydomainname.in/mypath
# If non-root path, don't forgot to add "homepage": "/myreactapp" in your app's package.json
server {
server_name mydomainname.in;
index index.html;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
root /usr/share/nginx/html;
location /myreactapp {
try_files $uri $uri/ /myreactapp/index.html;
}
}
@FabianTe

This comment has been minimized.

Copy link

commented Oct 20, 2018

For those dealing with docker and receiving this error AH00534: httpd: Configuration error: No MPM loaded. this might be useful: docker-library/httpd@1716657

Spoiler: Use LoadModule mpm_event_module modules/mod_mpm_event.so in your httpd

@krishnan-pb

This comment has been minimized.

Copy link

commented Nov 17, 2018

Hi I am trying to deploy my react app on docker, as suggested I have added the home page tag to package.json and configured nginx with above configuration, below is my docker image content, it still servers files form root '/' and not from '/reactApp' can you please let me know what I am missing?

FROM nginx:1.14.1
COPY /build /usr/share/nginx/html
#COPY nginx.conf /etc/nginx/nginx.conf
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Regards,
Krishnan

@abedinski

This comment has been minimized.

Copy link

commented Oct 15, 2019

Hey @krishnan-pb, were you able to find a solution around it? I am having the same problem...

@rambabusaravanan

This comment has been minimized.

Copy link
Owner Author

commented Oct 21, 2019

If you [1] deploy in "/x" path and mention the same in [2] package.json as "homepage", then your react application will work properly

Both [1] and [2] are needed.

To achieve [1], try the below

COPY /build /usr/share/nginx/html/myreactapp

You can access from http://localhost:xxxx/myreactapp where xxxx is the port docker exposes

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.