Demo boilerplate for generating a static site with React
Home Page: http://jxnblk.com/writing/posts/static-site-generation-with-react-and-webpack/
A demonstration boilerplate for generating a static with with React and webpack
http://jxnblk.com/writing/posts/static-site-generation-with-react-and-webpack/
MIT License
react-router introduced breaking changes in v 1.0.0 CHANGES
Router.run has been removed
Steps to reproduce
$ git clone <this_repo>
$ npm i
$ npm start
Interestingly everything builds but there is an error in the console:
ERROR in TypeError: Converting circular structure to JSON
at Object.stringify (native)
at safeStringify (bundle.js:23632:16)
at React.createClass.render (bundle.js:23608:16)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (bundle.js:11791:35)
at ReactCompositeComponentMixin._renderValidatedComponent (bundle.js:11818:15)
at wrapper [as _renderValidatedComponent] (bundle.js:3524:22)
at ReactCompositeComponentMixin.mountComponent (bundle.js:11239:31)
at wrapper [as mountComponent] (bundle.js:3524:22)
at Object.ReactReconciler.mountComponent (bundle.js:3599:36)
at ReactCompositeComponentMixin.mountComponent (bundle.js:11249:35)
Then there is another error in the browser:
Uncaught Error: Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:
(client) =".1w1vfuoi9ds.0.1">body{margin:0}img{ma
(server) =".1w1vfuoi9ds.0.1">.black,.dark-gray,bo
Maybe not an issue but would love to have some description on how to do this on README
for my work I’d love to use this together with gulp as i use several other gulp tasks.
It works fine, except the webpack-dev-server inside gulp.
Is there a known issue?
Serve up the repository and visit the static about page and you'll see that it fails to load bundle.js, as it expects bundle.js to be in the current directory. How hard would it be to enable client-side js from any page on the site? I have image files and other information that is properly found by the generated index.html on the root level, but html files in subdirectories expect to find them all in their own directories.
Just leaving a note for myself and @colepeters
Need to test it out, but I think the output specified in webpack.config.js dictates where things go.
To output to a dist folder, it should look like this:
output: {
filename: 'bundle.js',
path: __dirname + '/dist',
libraryTarget: 'umd'
}The bundle.js file is the only js needed for production. Depending on whether or not you use something like css-loader, other assets (images, fonts, etc.) might also be included in the bundle.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.