Seperate JS files for each .html page

[adamp-jomedia]

Hey, kind of new to this static rendering: I was wondering if you knew how/an example of rendering each html page with it's own independent 'js' file.

My goal is to have all the html files on A3 buckets completely independent of each other.

Much appreciated.

[iansinnott]

Hm, good question. My initial thought is that you could do this manually by:

1. Create a different bundle for each page within your webpack config
2. In your template file use the current route to determine which bundle to point the src of your <script> tag too.

We're currently not passing the route through to the template component, so there is not yet an elegant solution for step 2 above. But since the title prop of your route will be passed to the template component you could check that and determine which script tag to render. When https://github.com/iansinnott/react-static-webpack-plugin/issues/12 lands this will be simpler.

This is of course an inelegant solution and would likely become too much trouble for a large site.

Another possibility is that webpack natively supports something like this and I simply don't know about it. Webpack configuration can do all sorts of crazy things for you if you know how to use it.

---

That being said, if you have any thoughts on what an ideal solution to this problem would look like please do share. I haven't yet faced this particular problem so I'm not in a good position to design an elegant API to solve it.

[adamp-jomedia]

Thanks for the explanation. I am avoiding truly diving into webpack, but I guess it's inevitable now! I'll link you back when I get it up and running.

[iansinnott]

Yeah, webpack is a beast. I would like to turn this boilerplate into a library that can handle all the webpack plumbing for you (see #5) but for now it's essentially just a webpack config that properly configures the react-static-webpack-plugin.

If it helps, here's an example of creating multiple bundles with webpack:

// webpack.config.js
module.exports = {

  entry: {
    app: ['./src/app/index.js'],
    login: ['./src/login/index.js'],
  },

  output: {
    path: path.join(__dirname, 'public'),
    filename: '[name].js', // <-- THIS IS KEY. It will name your bundles 'app.js' and 'login.js'
    publicPath: '/',
  },

  // Other config...

};

That configuration would create a separate app.js and login.js and output them both in the public/ directory of your project. Then in your template file you could modify the <script> tag to point to the correct bundle depending on the title, as per my comment above. Not elegant, but would probably work right now with the current version of this project.

Also, if you're new to webpack I created a webpack tutorial for a workshop I gave recently. It might help you get past the initial hump of learning wepback: https://github.com/iansinnott/webpack-base-project.

[adamp-jomedia]

You're a prince, thanks! I will check out your tut shortly.. but first, let me see if this will work.

[adamp-jomedia]

Hey man, so just a recap and a further question: I got the separate bundles working perfectly, thanks!

I realized that while run build works great, npm start is still lacking the new js for each page. What would I need to do to get the entry {} object used in server.js?

Using bundle and my own js file for each page.. something like this in server.js... <script src={bundle} /> <script src={title}/{title}.js />

And I know that's not valid templating either. Any idea?

[iansinnott]

@adamp-jomedia hm, that sounds odd. Have you had any luck in the last two days? If not I'd be happy to have a look for ya. Could you point me to a repo where I could reproduce?

[adamp-jomedia]

Hey Ian, I put my code here: https://github.com/adamp-jomedia/static-gen-react

npm run build does as expected, but npm start runs off of server.js file and uses a single app.js file. This seems to be normal functionality but I am only interested in the result of run build.

How would you do route specific js files while using server.js (like npm run build) ?

[iansinnott]

Thanks @adamp-jomedia. Will give it a look and get back to you

[iansinnott]

The line in question is: https://github.com/adamp-jomedia/static-gen-react/blob/master/server.js#L76

That line configures the dev server to always serve templates that look for app.js. You could create a new route for the dev server which uses the URL to determine the bundle to fetch. Maybe something like:

app.get('/:bundle', (req, res) => {
  const html = renderDocumentToString({
    bundle: config.output.publicPath + req.params.bundle + '/index.js'
  });
  res.send(html);
});