how to run two react js applications in same domain

Question

I have an existing react project hosted in some domain like http://xyz.dev
Now i want to host another react application in same domain but in a different directory lets say xyz.dev/newApp. The problem, which i am facing is the react-router for xyz.dev is treating /newApp as its virtual route and its not redirecting to the newApp rather than it is taking contents of xyz.dev.
Is there any way to tell react-router to ignore all requests coming to /newApp.

<Route path="/" component={BootstrapApp} >

    <IndexRoute component={HomeApp} />

    <Route path="about" component={AboutusApp} />

    /* I need something like <Route ignorePath="newApp"/> */

</Route>

Or is any other way to do that? Immediate help will be appriciated.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Finally figured it out. It has something to do with a concept called Alias. We need to create an Alias configuration in the server to tell the server to take all contents for /newApp from a different directory.

Alias "/newApp" "C:/xampp/htdocs/react/xyz/newApp/www/public/"
<Directory "C:/xampp/htdocs/react/xyz/newApp/www/public/">
    Options -Indexes +FollowSymLinks +MultiViews
    AllowOverride None
    Require all granted
    RewriteEngine On
    RewriteBase /newApp
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^.*$ index.html [NC,L]
</Directory>

Also in your routes for newApp, we will have to set routes as

<Route path="/newApp/" component={BootstrapApp} >
    <IndexRoute component={HomeApp} />
    <Route path="about" component={AboutusApp} />
</Route>

Using these two configurations only we can run two entirely different React application in same domain.

how to run two react js applications in same domain

Sign up