Comments (8)
@sthzg: Maybe we could use something like the html-webpack-plugin for this?
from react-webpack-template.
👍 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
Fundamentals (available in commit)
- runs with serve:dev
- runs with serve:dist
- * builds with
npm run dist
- works with HMR
- passes all tests
- * builds correct asset-paths for running on non-root-directory **
- enables building with hashes for cache-busting
Critical Update Paths
Server Side Rendering
- In order to lift a project to use SSR, users would add a server entry point, e.g.
src/server.js
. - Once that is done, users would update their template to compile to a file including an outer level of template strings (e.g. EJS). The server-rendering-pass may use these outer integration points to inject data required to render the initial state (from a database, external config, etc.).
- Most likely users would add a universal routing lib like
react-router
to provide SSR for multiple routes within an application. - Users would update their Webpack config to also build a server bundle, which can be used in production to serve the project. If using any kind of CSS, there is also a need to configure
extract-text-webpack-plugin
(or some other solution to serve an asset for the styles built within an app).
- is there a way we can have automated tests on these requirements?
** except for #59, which is to be solved on a different branch
from react-webpack-template.
@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).
from react-webpack-template.
@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 😄 )
from react-webpack-template.
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
from react-webpack-template.
💭 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.
from react-webpack-template.
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?
from react-webpack-template.
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?
from react-webpack-template.
Related Issues (20)
- V1 -- Remove --open call on npm start HOT 3
- V2 -- Update tests to use inline functions HOT 1
- V1 -- Refactor tests to use inline function HOT 1
- V2 -- Add static directory to build step HOT 1
- Update README in src/config dir HOT 1
- V2 -- Update coverage information
- V2 -- Update copying static files to copy-webpack-plugin
- V2 -- Fix eslint rule deprecation warning
- V2 -- serve:dist does not load page HOT 1
- V2 -- Update deprecated es2015-native-modules preset HOT 1
- V2 -- Upgrading to react-hot-loader v3? HOT 2
- V2 -- Centralize defaultPort setting HOT 5
- Module build failed: Error: Couldn't find preset "es2015" HOT 1
- V2 -- Divide env config into appEnv and nodeEnv HOT 1
- V1 -- Add temporary fix for `ReactMount` bug HOT 1
- V2 -- Redundant entry in webpack Base HOT 1
- V2 -- HMR - named Modules
- V2 -- Webpack - NoErrorsPlugin is deprecated
- Is there an easy way to add Express to this webpack-config-template for 'dist'?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-webpack-template.