Open sthzg opened 8 years ago
@sthzg: Maybe we could use something like the html-webpack-plugin for this?
👍 from what I read that could be a good fit for the requirement. Not quite sure about some aspects right now, I'll set it up locally to get a better idea and possibly push a branch to share what it would look like.
I will first start recreating the status quo and then try to see what would be necessary to modify the setup to accommodate for some different requirements, e.g. serving from sub-directories, multiple entry-points, server-side-rendering (not to include it into the project, but to look how painless certain integration paths become).
Checklist
npm run dist
src/server.js
. react-router
to provide SSR for multiple routes within an application. extract-text-webpack-plugin
(or some other solution to serve an asset for the styles built within an app).@weblogixx the code in this branch now builds the index.html
by using the html-webpack-plugin
plugin. It passes all initial requirements that I could come up with (see checkboxes above).
There should also be a reasonable setup-path towards SSR. I outlined some of its building blocks above and plan to provide an example setup in a custom repo (when that works we could create the examples repository inside the organization and I can push it there).
@weblogixx I'll report this one here, as it is a class of problems that would also be fixed with the approach from this branch.
Base.js:#176 sets publicPath
to ./assets/
, which breaks HMR in apps that use nested urls (because webpack tries to get the hot-update.json
from the relative path, which does not exist).
As a first measure I'd propose pinning this value to /assets/
. If you find time to checkout the changes in this branch I'd love to hear your feedback, if we want to go down the html-webpack-plugin
route.
On a further note, I got react-hot-loader 3 beta now fully integrated into a generator app and it works fine (the 404 from this issue was the last obstacle between preserving redux state on hot updates 😄 )
Nice! Will have a look at it. Seems like 3.0.0-beta-3 is the current version when installing via npm install:
npm outdated
Package Current Wanted Latest Location
react-hot-loader 1.3.0 1.3.0 3.0.0-beta.3 Myloc
💭 interesting, the latest tag on Github is beta.1. Btw, just to clarify, RHL3 is not setup in this branch. I thought that might have been too big a changeset.
I am curious about this for myself. Just checked via npm view react-hot-loader and got the following:
'dist-tags': { latest: '3.0.0-beta.3', next: '3.0.0-beta.2' }
So it seems the author may have pushed it accidently?
Good question, the last documented/tagged release on Github is still the beta.1
and I don't know if they refer to latest as latest stable or latest at all. In my demo setup I've pinned it to the beta.1
anyways. Maybe that would be worth asking on their issue queue?
Currently we have a static
index.html
as entry point, which imposes a few limitations on more advanced use cases like server-side-rendering or modifying page parameters like asset paths (generator:#233), meta tags, or cache-hashes (generator:#217) at build-time.To work around that, most other kits that I know work with some sort of templating language (template strings, EJS, React) to build the index.html dynamically. During that build we have full access to the bundle, including Webpack's
stats
object to access filenames, hashes, & co.This would be a bigger update, but if you are interested in what it might look like I could setup a demo branch to discuss the architecture (and after that we could decide whether to follow that path or discard it).