Load different template on specific route only

Hi everyone,
I’m just planning my next big project. And i’m a little bit confusing how can i make multi-react-application where i can render each app separately and serve specific content only on concrete route without loading everything else. For example:

import App from './app/App.js’
import Site from './app/site/Site.js’
import Admin from './app/admin/Admin.js’
import Screen from './app/screen/Screen.js’
import Entrance from './app/entrance/Entrance.js’
import Dashboard from ‘./app/dashboard/Dashboard.js’

export const Routes = () => (
Router history = { browserHistory } component = { App }>
Route path="/" component = { Site }>
Route path="/admin" component = { Admin }/>
Route path="/screen" component = { Screen }/>
Route path="/entrance" component = { Entrance }/>
Route path="/dashboard" component = { Dashboard }/>
/Router>
);

I would like to make each of this items as a separate React applications (maybe with shared resources and some components). But bundle it as one Meteor build, with the same db and Meteor.server methods.
Is it possible at all for React or Blaze?

It’s looks like nobody care about my request.
Hey people, Alo!

I think I’m not understanding your request. What’s the point in having “two different react app?” You can just use nested routes to have multiple layers.

The root component will always be the one where you set your router and then you can nest as much as you want.

<Router history={browserHistory}>
        <Route path="/app" component={App}>
            <IndexRoute component={Dashboard} />
            <Route path="/admin" component={Admin}>
              <Route path="/admin/:userId" component={NotesEdit}></Route>
            </Route> 
            <Route path="/projects" component={ProjectsList}>
              <Route path="/project/:projectId" component={SingleProject}></Route>
            </Route> 
        </Route>
        <Route path="/" component={Site}>
            <IndexRoute component={Site} />
            <Route path="/register" component={Register}></Route>
            <Route path="/signin" component={Signin}></Route>
            <Route path="/signout" component={Signout}></Route>
        </Route>
    </Router>

This one could work as an example tell me if I didn’t get the question :slight_smile:

First, thanks for reply.

The main question was about don’t loading resources that not needed for one page, and load only needed for specific route (app). Is it possible?
For example, for entrance route i don’t need all the fancy css and js code that needed for dashboard. So how can i avoid loading this resource?

Looks like you’re talking about code splitting, which isn’t available out of the box with Meteor, although there is some experimental stuff here:

If you are concerned only about the landing page, there is a thread here that discusses that:

1 Like

server-side rendering?