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.

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.

Answer 2

Express v4

One approach would be to use the .get method of your Express app. Adding it before your .use statement could invoke a different index file containing your second app.

var app = new (require('express'))();
var port = 3000;

app.get('/newapp', function(req, res) {
  res.sendFile(__dirname + '/newapp/index.html');
});

app.use(function(req, res) {
  res.sendFile(__dirname + '/index.html');
});

app.listen(port, function(error) {
  if (error) {
    console.error(error);
  } else {
    console.info("Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port);
  }
});

I hope this helps :)