UNPKG

3.91 kBMarkdownView Raw
1# react-middleware
2[![Build Status](https://travis-ci.org/philcockfield/react-middleware.svg?branch=master)](https://travis-ci.org/philcockfield/react-middleware)
3
4Connect middleware for serving React components from a standard folder structure.
5
6## Getting Started
7
8 npm install --save react-middleware
9
10Once the module is added to your project, you can initialize the convention base folder structure using the `init` method:
11
12```js
13require("babel/register")({ stage: 1 });
14var ReactMiddleware = require("react-middleware");
15ReactMiddleware.init("./site");
16```
17
18The `init` method need only be called once, and it lays down the following folder structure within the base folder:
19
20
21 /site
22 |-- routes.js # Page routes.
23 |-- css # Global stylesheets.
24 |-- public # Static assets.
25 |-- views
26 |-- components # Reusable UI components.
27 |-- js # Common javascript.
28 |-- layouts # Root level page layouts.
29 |-- pages # Specific pages.
30
31
32From here you can start the server, either by calling `start` directly on the middleware, optionally passing a port:
33
34```js
35var middleware = ReactMiddleware({ base:"./site" });
36middleware.start(3030);
37```
38
39Or by applying it to an existing connect server:
40
41```js
42import express from "express";
43import ReactMiddleware from "../src";
44const middleware = ReactMiddleware({ base:"./site" });
45const app = express().use(middleware);
46app.listen(3030);
47
48```
49
50
51
52
53
54## CSS
55The module works on the philosophy that styles, if not within the HTML component itself, should be as damn close to the corresponding component as possible. CSS and layup are two sides of the same coin - they are not seperate concerns.
56
57Situate **.styl** or **.css** files next to your Page.jsx or Component.jsx and the server will automatically find and compile it into production-ready CSS.
58
59#### Global CSS
60In the cases where you need global CSS, such as resets and common page/class styles, place these within the folder:
61
62 /base
63 |-- /css # Global CSS.
64
65This folder is automatically populated with the [normalize.css](https://necolas.github.io/normalize.css/) reset file.
66
67#### Referencing CSS
68To bring CSS into the served page use the `/css` route, for example:
69
70```html
71<head>
72 <!--
73 The "/css" path combines all CSS across
74 - global
75 - layouts
76 - pages
77 - components
78 -->
79 <link href="/css" rel="stylesheet"/>
80</head>
81```
82
83To selectively bring in a subset of site's CSS pass a query-string:
84
85- `?global` - includes the CSS within the `<base>/css` folder.
86- Layouts
87 - `?layouts` - includes all CSS within the `/views/layouts` folder.
88 - `?layout=<Name>` - includes only the named layout or comma-seperated list of layout names.
89- Pages
90 - `?pages` - includes all CSS within the `/views/pages` folder.
91 - `?page=<Name>` - includes only the named page or comma-seperated list of page names.
92- Components
93 - `?components` - includes all CSS within the `/views/components` folder.
94 - `?component=<Name>` - includes only the named component or comma-seperated list of component names.
95
96
97For example:
98```html
99<head>
100 <link href="/css?global&components&page=Features" rel="stylesheet"/>
101</head>
102```
103
104Some common CSS paths are provided:
105
106```html
107<link href="/css/common" /><!-- Global, layouts, components -->
108<link href="/css/global" /><!-- Global css. -->
109
110<link href="/css/layouts" /><!-- All layouts -->
111<link href="/css/layout/:Name1,:Name2" /><!-- The specified layout or comma-seperated list of layouts -->
112
113<link href="/css/pages" /><!-- All pages -->
114<link href="/css/page/:Name1,:Name2" /><!-- The specified page or comma-seperated list of pages -->
115
116<link href="/css/components" /><!-- All components -->
117<link href="/css/component/:Name1,:Name2" /><!-- The specified page or comma-seperated list of pages -->
118```