Skip to content

Commit 85502c1

Browse files
committed
readme update
1 parent 6792228 commit 85502c1

File tree

1 file changed

+17
-57
lines changed

1 file changed

+17
-57
lines changed

demo/readme.md

Lines changed: 17 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,91 +1,51 @@
11
Universal Usage demo
22
====================
33

4-
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.
4+
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.
5+
56

67
## Quick start
78

9+
Make sure that you have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) and run these commands:
10+
811
```bash
912
$ npm install
1013
$ npm run compile
1114
$ npm run start
1215
```
1316

14-
## Description
17+
Open <a href="http://localhost:3000/" target="_blank">http://localhost:3000/</a>.
18+
19+
20+
## Detailed description
1521

16-
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.
22+
In short [CSS 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.
23+
24+
### Frontend
25+
26+
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.
1727

1828
### Backend
1929

20-
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:
30+
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:
2131

2232
- **app/**
2333
- `view-engine.js`
2434
- `worker.js`
25-
- **components/**
26-
- `Page.js`
2735

2836
#### `worker.js`
2937

30-
Is an entry point for the server application. It contains main middlewares and helpers for the server rendering. Here I attach require hook:
31-
32-
```javascript
33-
require('css-modules-require-hook/preset');
34-
```
35-
36-
It helps to process calls to the css files in runtime and build necessary class names:
37-
38-
```javascript
39-
import styles from './Page.css'; // Page.js
40-
```
41-
42-
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:
38+
Is an entry point for the app. It sets react [template engine](http://expressjs.com/en/advanced/developing-template-engines.html):
4339

4440
```javascript
45-
// setting rendering engine
41+
// sets react rendering engine
4642
app.engine('js', viewEngine);
4743
app.set('views', path.join(__dirname, '../components'));
4844
app.set('view engine', 'js');
4945
```
5046

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

5349
```javascript
5450
app.get('/', (req, res) => res.render('Page'));
5551
```
56-
57-
#### `view-engine.js`
58-
59-
Is a [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) implementation. Requires necessary react components and builds html.
60-
61-
#### `Page.js`
62-
63-
Main react component, which describes the page and contains all the necessary dependencies.
64-
65-
```javascript
66-
// get the necessary class names
67-
import styles from './Page.css';
68-
69-
// pass particular generated class name to the component
70-
<section className={ styles.wrapper }>
71-
// ...
72-
</section>
73-
```
74-
75-
### Frontend
76-
77-
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):
78-
79-
```javascript
80-
module: {
81-
loaders: [
82-
{
83-
test: /\.css$/i,
84-
loader: ExtractTextPlugin.extract('style',
85-
`css?modules&localIdentName=[name]_[local]__[hash:base64:5]`),
86-
},
87-
],
88-
},
89-
```
90-
91-
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).

0 commit comments

Comments
 (0)