-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Seperate JS files for each .html page #15
Comments
Hm, good question. My initial thought is that you could do this manually by:
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 iansinnott/react-static-webpack-plugin#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. |
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. |
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 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. |
You're a prince, thanks! I will check out your tut shortly.. but first, let me see if this will work. |
Hey man, so just a recap and a further question: I got the separate bundles working perfectly, thanks! I realized that while Using bundle and my own js file for each page.. something like this in server.js... |
@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? |
Hey Ian, I put my code here: https://github.com/adamp-jomedia/static-gen-react
How would you do route specific js files while using server.js (like npm run build) ? |
Thanks @adamp-jomedia. Will give it a look and get back to you |
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.get('/:bundle', (req, res) => {
const html = renderDocumentToString({
bundle: config.output.publicPath + req.params.bundle + '/index.js'
});
res.send(html);
}); |
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.
The text was updated successfully, but these errors were encountered: