|
1 | 1 | Universal Usage demo
|
2 | 2 | ====================
|
3 | 3 |
|
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 | + |
5 | 6 |
|
6 | 7 | ## Quick start
|
7 | 8 |
|
| 9 | +Make sure that you have [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) and run these commands: |
| 10 | + |
8 | 11 | ```bash
|
9 | 12 | $ npm install
|
10 | 13 | $ npm run compile
|
11 | 14 | $ npm run start
|
12 | 15 | ```
|
13 | 16 |
|
14 |
| -## Description |
15 |
| - |
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. |
17 |
| - |
18 |
| -### Backend |
19 |
| - |
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: |
21 |
| - |
22 |
| -- **app/** |
23 |
| - - `view-engine.js` |
24 |
| - - `worker.js` |
25 |
| -- **components/** |
26 |
| - - `Page.js` |
27 |
| - |
28 |
| -#### `worker.js` |
29 |
| - |
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: |
43 |
| - |
44 |
| -```javascript |
45 |
| -// setting rendering engine |
46 |
| -app.engine('js', viewEngine); |
47 |
| -app.set('views', path.join(__dirname, '../components')); |
48 |
| -app.set('view engine', 'js'); |
49 |
| -``` |
50 |
| - |
51 |
| -and implemented in the `view-engine.js` file. So, I can use neat calls to build html: |
52 |
| - |
53 |
| -```javascript |
54 |
| -app.get('/', (req, res) => res.render('Page')); |
55 |
| -``` |
56 |
| - |
57 |
| -#### `view-engine.js` |
| 17 | +Open <a href="http://localhost:3000/" target="_blank">http://localhost:3000/</a>. |
58 | 18 |
|
59 |
| -Is a [template engine](http://expressjs.com/en/advanced/developing-template-engines.html) implementation. Requires necessary react components and builds html. |
60 | 19 |
|
61 |
| -#### `Page.js` |
| 20 | +## Detailed description |
62 | 21 |
|
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 |
| -``` |
| 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 as the CSS styles. |
74 | 23 |
|
75 | 24 | ### Frontend
|
76 | 25 |
|
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 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). |
| 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. |
0 commit comments