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

Y U K I M U R A

4/27/24, 6:58 AM

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?

457

1 + 1

.htaccess

node.js

apache-2.4

MrWhite

4/28/24, 1:05 AM

"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.).

Score:1

Server

MrWhite

4/28/24, 12:58 AM

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).

+ 3

Y U K I M U R A

4/28/24, 7:46 AM

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

4/28/24, 8:13 AM

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

5/1/24, 8:16 AM

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!

Elon Musk

I sit in a Tesla and translated this thread with Ai:

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

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.