how to run next.js using NODE and react.js at the same time on apache server

Question

I have to run 2 different apps on the same domain at the same time. I want to forward all requests to localhost:3000, if url contains /presscenter, if not, default should be my react.js application. I found this one here for apache virtual host:

RewriteEngine On

# Rewrite rule for /presscenter requests
RewriteCond %{REQUEST_URI} ^/presscenter [NC]
RewriteRule ^(.*)$ http://localhost:3000/$1 [P]

# Rewrite rule for all other requests
RewriteCond %{REQUEST_URI} !^/presscenter [NC]
RewriteRule ^(.*)$ /index.html [L]

but at the same time, if I want my react.js application to work properly, I also need to have this .htaccess:

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://my.website.ge/$1 [R,L]

#php_value short_open_tag 1
RewriteEngine on
Options +FollowSymlinks
ErrorDocument 404 /404.php
RewriteCond %{QUERY_STRING} ^fbclid=(.*)$


RewriteRule  ^pcms/? - [L]

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

these two rules are overwriting themselves(I guess), and the website is not getting served properly. what changes should I make?

"not getting served properly" - What do you mean exactly? If you simply combined these rules together in the order given then the 2nd rule would (essentially unconditionally) rewrite _everything_ to `index.html`, including all your static assets (JS, CSS, images, etc.). — MrWhite, Apr 28 '23 at 01:05

MrWhite · Accepted Answer · 2023-04-28T01:08:57.860

I'm assuming you have already enabled/configured mod_proxy (and related modules) in the server config.

Try the following instead:

Options +FollowSymlinks -MultiViews

ErrorDocument 404 /404.php

DirectoryIndex index.html

RewriteEngine On

# HTTP to HTTPS redirect
RewriteCond %{SERVER_PORT} 80
RewriteRule ^ https://my.website.ge%{REQUEST_URI} [R=301,L]

# Rewrite rule for /presscenter requests
RewriteRule ^presscenter http://localhost:3000%{REQUEST_URI} [P]

# No further processing if URL starts "/pcms" and "fbclid" URL param at start of qs
RewriteCond %{QUERY_STRING} ^fbclid=
RewriteRule ^pcms - [L]

# Front-controller for react.js app
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule . index.html [L]

I've simplified some of the regex, eg. ^pcms is the same as ^pcms/? - whether that is really the intention or not it's not clear. (Although I suspect you probably intended it to match pcms or pcms/<something>, in which case the regex should be ^pcms($|/) instead.)

A little curious is that you also have /404.php (a PHP script?), although this is rarely used. The ErrorDocument 404 is only relevant for requests that start /pcms and have a fbclid URL parameter at the start of the query string and which do not map to a physical file or directory.

# Rewrite rule for all other requests
RewriteCond %{REQUEST_URI} !^/presscenter [NC]
RewriteRule ^(.*)$ /index.html [L]

This is not required (but it is also incorrect) since the request is rewritten to index.html by a later rule. If you rewrite any request that does not start /presscenter then it will essentially result in a rewrite loop since it rewrites everything - including all static assets - to itself (index.html).

this kind-of works. its working the right way the only problem here is that when I visit next.js page, html is rendered correctly, but its not rendering any CSS at all — Y U K I M U R A, Apr 28 '23 at 07:46
when I click css link on next.js source, am getting redirected on react.js source page — Y U K I M U R A, Apr 28 '23 at 08:13
I added another rewrite rule for _next paths for next.js build production RewriteRule ^_next http://localhost:3000%{REQUEST_URI} [P] and now it seems to be working, therefore am accepting the answer. thanks a lot! — Y U K I M U R A, May 01 '23 at 08:16

how to run next.js using NODE and react.js at the same time on apache server

1 Answers1