how to run two react js applications in same domain
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.
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.