Minimum viable example of isomorphic React & CSS Modules
JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
views
.babelrc
.editorconfig
.gitignore
ExampleComponent.js
README.md
package.json
server.js
styles.css
webpack.config.js
webpack.node.config.js

README.md

Isomorphic CSS Modules & React

This is an example repo of using isomorphic CSS modules and react. The goal of this project is a proof of concept for shipping down the minimum set of markup and CSS for the first render. This should create the fastest possible user perceived performance of a react application.

Server support for CSS modules

This is typically the hardest piece to get working, and there's a few different ways that you can do this. One option is to webpack the entire server code, and use the css loader as you would in the client. In this repo we've gone ahead and used the babel-plugin-webpack-loaders module which allows us to use webpack loaders in babel. You can see the definition of this module in .babelrc.

Outputting initial CSS

Once you have CSS modules parsing correctly on the server, you still need to output the intial CSS content to the page. One way of doing this is by using the ExtractTextPlugin webpack plugin. For example in webpack.node.config.js:

  new ExtractTextPlugin('./css/bundle.css')

This generates a css file at dist/css/bundle.css.