Configuration multiple clients with one server

help
1

I have a project that needs a web application and a mobile app, they share the same server-side code but the client-sides are different, for example, different UI, different layout(responsive design is not enough) and web application may has more features than mobile app.

I was wondering if it is possible to have multiple copies of client-side code but only one copy of server-side code?

2

I’ve needed this and spent a lot of time figuring out how. The two best options I found:

Option 1: Use https://github.com/thereactivestack/meteor-webpack/tree/master/packages/webpack/ and webpack’s code-splitting.

Option 2: Create a separate meteor app to build your alternate (e.g. mobile) frontend. Put the built files in your main app’s public directory. Add a WebApp handler to serve the alternate frontend, something like:

WebApp.connectHandlers.use((req, res, next)=> {
  if (req._parsedUrl.pathname.split("/")[0] != "mobile") {
    return next()
  }
  
  const runtimeConfig = JSON.stringify(encodeURIComponent(JSON.stringify(__meteor_runtime_config__)))

  res.writeHead(200, {'Content-Type': 'text/html'})
  res.end(`<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent(${runtimeConfig}));</script>
    <script src="/mobile.js"></script>
  </head>
  <body></body>
</html>`)
})

I’m using both approaches in my project.