Skip to content

readme update #61

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

Merged
merged 4 commits into from
Feb 24, 2016
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 54 additions & 44 deletions demo/readme.md
Original file line number Diff line number Diff line change
@@ -1,91 +1,101 @@
Universal Usage demo
====================

Small demo of configuring [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook/) with [webpack](https://webpack.github.io/) and [react](https://facebook.github.io/react/). See the detailed description below.
It's a small demo to show how to set up [css-modules-require-hook](https://github.com/css-modules/css-modules-require-hook/) with [webpack](https://webpack.github.io/) and [react](https://facebook.github.io/react/). If you are familiar with the technologies you can jump to the quick start. Otherwise, you can find detailed description below.


## Quick start

Make sure that you have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) and run these commands:

```bash
$ npm install
$ npm run compile
$ npm run start
```

## Description
Open <a href="http://localhost:3000/" target="_blank">http://localhost:3000/</a>.

Hi, I tried to make a simple demo. So if you are familiar with technologies [webpack](https://webpack.github.io/), [react](https://facebook.github.io/react/) and [express](http://expressjs.com/), then it will be easy for to understand that example. Anyways, I'll point on the main parts to save your time.

### Backend
## Detailed description

In this demo I use [express](http://expressjs.com/) to handle user requests and [react](https://facebook.github.io/react/) components to serve html for them:
In short [CSS&nbsp;Modules](https://github.com/css-modules/css-modules) provide modularity with generated class names. Therefore, generated names should be present in CSS styles and in templates which form resulting html. Since, we talk about server rendering in the current example I'll show you how to set require hook to generate the same names in runtime as the CSS styles.

- **app/**
- `view-engine.js`
- `worker.js`
- **components/**
- `Page.js`

#### `worker.js`
### Frontend

The modern frontend is so tough that you have to use particular bundler systems in order to generate a simple CSS file. My favourite one is [webpack](https://webpack.github.io/), so I'll show you how to set it with the require hook.

Is an entry point for the server application. It contains main middlewares and helpers for the server rendering. Here I attach require hook:
To understand [webpack](https://webpack.github.io/) configs you should be familiar with [loaders](https://webpack.github.io/docs/using-loaders.html). In order to use [CSS&nbsp;Modules](https://github.com/css-modules/css-modules) with [webpack](https://webpack.github.io/) you should set [css-loader](https://github.com/webpack/css-loader#css-modules). Also [extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) provides you possibility to create pure CSS file. So eventually, your configuration should look similar to this:

```javascript
require('css-modules-require-hook/preset');
module: {
loaders: [
{
test: /\.css$/i,
loader: ExtractTextPlugin.extract('style',
'css?modules&localIdentName=[name]_[local]__[hash:base64:5]'),
},
],
},

plugins: [
new ExtractTextPlugin('styles.css', {
allChunks: true
}),
],
```

It helps to process calls to the css files in runtime and build necessary class names:
### Backend

```javascript
import styles from './Page.css'; // Page.js
```
I use [express](http://expressjs.com/) to handle user requests and [react](https://facebook.github.io/react/) components to serve html for them. In order to make it independent and good looking I decided to use a custom [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) to isolate all the rendering stuff and to have neat calls in the middlewares. So, here is my structure:

Also, I made a small [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) for express to make render step isolated from the main program. It's connected here:
- *app/*
- `view-engine.js`
- `worker.js`

#### `worker.js`

Is an entry point for the app. It sets react [template engine](http://expressjs.com/en/advanced/developing-template-engines.html):

```javascript
// setting rendering engine
// sets react rendering engine
app.engine('js', viewEngine);
app.set('views', path.join(__dirname, '../components'));
app.set('view engine', 'js');
```

and implemented in the `view-engine.js` file. So, I can use neat calls to build html:
and declares basic middlewares:

```javascript
app.get('/', (req, res) => res.render('Page'));
```

#### `view-engine.js`

Is a [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) implementation. Requires necessary react components and builds html.

#### `Page.js`

Main react component, which describes the page and contains all the necessary dependencies.
Describes the simple [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) and attaches require hook:

```javascript
// get the necessary class names
import styles from './Page.css';

// pass particular generated class name to the component
<section className={ styles.wrapper }>
// ...
</section>
// teaches node.js to load css files
// uses external config cmrh.conf.js
require('css-modules-require-hook/preset');
```

### Frontend
**Note** that to generate the same names in runtime as the CSS styles you should provide the same pattern to [webpack](https://webpack.github.io/) and to the require hook.

The modern frontend is so tough that you have to use particular bundler systems in order to build necessary styles and scripts. My favourite one is [webpack](https://webpack.github.io/), so I'll describe how to configure it. Usually to build necessary styles using [CSS&nbsp;Modules](https://github.com/css-modules/) you have to use a [css-loader](https://github.com/webpack/css-loader):
Use `localIdentName` for [webpack](https://webpack.github.io/):

```javascript
module: {
loaders: [
{
test: /\.css$/i,
loader: ExtractTextPlugin.extract('style',
`css?modules&localIdentName=[name]_[local]__[hash:base64:5]`),
},
],
},
loader: ExtractTextPlugin.extract('style',
'css?modules&localIdentName=[name]_[local]__[hash:base64:5]'),
```

In this example I provide a custom template for the generic class names `[name]_[local]__[hash:base64:5]` which is also used by require hook (see the `cmrh.conf.js` file).
and `generateScopedName` for the require hook. For example, if you use presets then you can put it to the `cmrh.conf.js` file:

```javascript
module.exports = {
// the custom template for the generic classes
generateScopedName: '[name]_[local]__[hash:base64:5]',
};

```