You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

432 lines
13 KiB

9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
  1. [![view on npm](http://img.shields.io/npm/v/local-web-server.svg)](https://www.npmjs.org/package/local-web-server)
  2. [![npm module downloads](http://img.shields.io/npm/dt/local-web-server.svg)](https://www.npmjs.org/package/local-web-server)
  3. [![Build Status](https://travis-ci.org/75lb/local-web-server.svg?branch=master)](https://travis-ci.org/75lb/local-web-server)
  4. [![Dependency Status](https://david-dm.org/75lb/local-web-server.svg)](https://david-dm.org/75lb/local-web-server)
  5. [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/feross/standard)
  6. ***This is the documentation for the next version. For the previous release, see the [prev](https://github.com/75lb/local-web-server/tree/prev) branch. To install this prerelease: `$ npm i -g local-web-server@next`***
  7. # local-web-server
  8. A simple web-server for productive front-end development. Typical use cases:
  9. * Front-end Development
  10. * Static or Single Page App development
  11. * Re-route paths to local or remote resources
  12. * Bundle with your front-end project
  13. * Very little configuration, just a few options
  14. * Outputs a dynamic statistics view to the terminal
  15. * Configurable log output, compatible with [Goaccess, Logstalgia and glTail](https://github.com/75lb/local-web-server/blob/master/doc/visualisation.md)
  16. * Back-end service mocking
  17. * Prototype a web service, microservice, REST API etc.
  18. * Mocks are defined with config (static), or code (dynamic).
  19. * CORS-friendly, all origins allowed by default.
  20. * Proxy server
  21. * Map local routes to remote servers. Removes CORS pain when consuming remote services.
  22. * File sharing
  23. **Requires node v4.0.0 or higher**.
  24. ## Synopsis
  25. local-web-server is a simple command-line tool. To use it, from your project directory run `ws`.
  26. <pre><code>$ ws --help
  27. <strong>local-web-server</strong>
  28. A simple web-server for productive front-end development.
  29. <strong>Synopsis</strong>
  30. $ ws [&lt;server options&gt;]
  31. $ ws --config
  32. $ ws --help
  33. <strong>Server</strong>
  34. -p, --port number Web server port.
  35. -d, --directory path Root directory, defaults to the current directory.
  36. -f, --log-format string If a format is supplied an access log is written to stdout. If
  37. not, a dynamic statistics view is displayed. Use a preset ('none',
  38. 'dev','combined', 'short', 'tiny' or 'logstalgia') or supply a
  39. custom format (e.g. ':method -> :url').
  40. -r, --rewrite expression ... A list of URL rewrite rules. For each rule, separate the 'from'
  41. and 'to' routes with '->'. Whitespace surrounded the routes is
  42. ignored. E.g. '/from -> /to'.
  43. -s, --spa file Path to a Single Page App, e.g. app.html.
  44. -c, --compress Serve gzip-compressed resources, where applicable.
  45. -b, --forbid path ... A list of forbidden routes.
  46. -n, --no-cache Disable etag-based caching -forces loading from disk each request.
  47. --verbose Verbose output, useful for debugging.
  48. <strong>Misc</strong>
  49. -h, --help Print these usage instructions.
  50. --config Print the stored config.
  51. Project home: https://github.com/75lb/local-web-server
  52. </code></pre>
  53. ## Examples
  54. For the examples below, we assume we're in a project directory looking like this:
  55. ```sh
  56. .
  57. ├── css
  58. │   └── style.css
  59. ├── index.html
  60. └── package.json
  61. ```
  62. All paths/routes are specified using [express syntax](http://expressjs.com/guide/routing.html#route-paths). To run the example projects linked below, clone the project, move into the example directory specified, run `ws`.
  63. ### Static site
  64. Fire up your static site on the default port:
  65. ```sh
  66. $ ws
  67. serving at http://localhost:8000
  68. ```
  69. [Example](https://github.com/75lb/local-web-server/tree/master/example/simple).
  70. ### Single Page Application
  71. You're building a web app with client-side routing, so mark `index.html` as the SPA.
  72. ```sh
  73. $ ws --spa index.html
  74. ```
  75. By default, typical SPA paths (e.g. `/user/1`, `/login`) would return `404 Not Found` as a file does not exist with that path. By marking `index.html` as the SPA you create this rule:
  76. *If a static file at the requested path exists (e.g. `/css/style.css`) then serve it, if it does not (e.g. `/login`) then serve the specified SPA and handle the route client-side.*
  77. [Example](https://github.com/75lb/local-web-server/tree/master/example/spa).
  78. ### URL rewriting
  79. Your application requested `/css/style.css` but it's stored at `/build/css/style.css`. To avoid a 404 you need a rewrite rule:
  80. ```sh
  81. $ ws --rewrite '/css/style.css -> /build/css/style.css'
  82. ```
  83. Or, more generally (matching any stylesheet under `/css`):
  84. ```sh
  85. $ ws --rewrite '/css/:stylesheet -> /build/css/:stylesheet'
  86. ```
  87. With a deep CSS directory structure it may be easier to mount the entire contents of `/build/css` to the `/css` path:
  88. ```sh
  89. $ ws --rewrite '/css/* -> /build/css/$1'
  90. ```
  91. this rewrites `/css/a` as `/build/css/a`, `/css/a/b/c` as `/build/css/a/b/c` etc.
  92. #### Proxied requests
  93. If the `to` URL contains a remote host, local-web-server will act as a proxy - fetching and responding with the remote resource.
  94. Mount the npm registry locally:
  95. ```sh
  96. $ ws --rewrite '/npm/* -> http://registry.npmjs.org/$1'
  97. ```
  98. Map local requests for repo data to the Github API:
  99. ```sh
  100. $ ws --rewrite '/:user/repos/:name -> https://api.github.com/repos/:user/:name'
  101. ```
  102. [Example](https://github.com/75lb/local-web-server/tree/master/example/rewrite).
  103. ### Mock Responses
  104. Mocks give you full control over the response headers and body returned to the client. They can be used to return anything from a simple html string to a resourceful REST API. Typically, they're used to mock services but can be used for anything.
  105. In the config, define an array called `mocks`. Each mock definition maps a <code>[route](http://expressjs.com/guide/routing.html#route-paths)</code> to a `response`. A simple home page:
  106. ```json
  107. {
  108. "mocks": [
  109. {
  110. "route": "/",
  111. "response": {
  112. "body": "<h1>Welcome to the Mock Responses example</h1>"
  113. }
  114. }
  115. ]
  116. }
  117. ```
  118. Under the hood, the property values from the `response` object are written onto the underlying [koa response object](https://github.com/koajs/koa/blob/master/docs/api/response.md). You can set any valid koa response properies, for example [type](https://github.com/koajs/koa/blob/master/docs/api/response.md#responsetype-1):
  119. ```json
  120. {
  121. "mocks": [
  122. {
  123. "route": "/",
  124. "response": {
  125. "type": "text/plain",
  126. "body": "<h1>Welcome to the Mock Responses example</h1>"
  127. }
  128. }
  129. ]
  130. }
  131. ```
  132. To define a **conditional response**, set a `request` object on the mock definition. The `request` value acts as a query - the response defined will only be returned if each property of the `request` query matches. For example, return an XML response *only* if the request headers include `accept: application/xml`, else return 404 Not Found.
  133. ```json
  134. {
  135. "mocks": [
  136. {
  137. "route": "/two",
  138. "request": { "accepts": "xml" },
  139. "response": {
  140. "body": "<result id='2' name='whatever' />"
  141. }
  142. }
  143. ]
  144. }
  145. ```
  146. To specify **multiple potential responses**, set an array of mock definitions to the `responses` property. The first response with a matching request query will be sent. In this example, the client will get one of two responses depending on the request method:
  147. ```json
  148. {
  149. "mocks": [
  150. {
  151. "route": "/three",
  152. "responses": [
  153. {
  154. "request": { "method": "GET" },
  155. "response": {
  156. "body": "<h1>Mock response for 'GET' request on /three</h1>"
  157. }
  158. },
  159. {
  160. "request": { "method": "POST" },
  161. "response": {
  162. "status": 400,
  163. "body": { "message": "That method is not allowed." }
  164. }
  165. }
  166. ]
  167. }
  168. ]
  169. }
  170. ```
  171. The examples above all returned static data. To define a **dynamic response**, create a mock module. Specify its path in the `module` property:
  172. ```json
  173. {
  174. "mocks": [
  175. {
  176. "route": "/four",
  177. "module": "/mocks/stream-self.js"
  178. }
  179. ]
  180. }
  181. ```
  182. Here's what the `stream-self` module looks like. The module should export a mock definition (an object, or array of objects, each with a `response` and optional `request`). In this example, the module simply streams itself to the response but you could set `body` to *any* [valid value](https://github.com/koajs/koa/blob/master/docs/api/response.md#responsebody-1).
  183. ```js
  184. const fs = require('fs')
  185. module.exports = {
  186. response: {
  187. body: fs.createReadStream(__filename)
  188. }
  189. }
  190. ```
  191. For more power, define the response as a function. It will receive the [koa context](https://github.com/koajs/koa/blob/master/docs/api/context.md) as its first argument. Now you have full programmatic control over the response returned.
  192. ```js
  193. module.exports = {
  194. response: function (ctx) {
  195. ctx.body = '<h1>I can do anything i want.</h1>'
  196. }
  197. }
  198. ```
  199. If the route contains tokens, their values are passed to the response. For example, with this mock...
  200. ```json
  201. {
  202. "mocks": [
  203. {
  204. "route": "/players/:id",
  205. "module": "/mocks/players.js"
  206. }
  207. ]
  208. }
  209. ```
  210. ...the `id` value is passed to the `response` function. For example, a path of `/players/10?name=Lionel` would pass `10` to the response function. Additional, the value `Lionel` would be available on `ctx.query.name`:
  211. ```js
  212. module.exports = {
  213. response: function (ctx, id) {
  214. ctx.body = `<h1>id: ${id}, name: ${ctx.query.name}</h1>`
  215. }
  216. }
  217. ```
  218. Here's an example of a REST collection (users). The config:
  219. ```json
  220. {
  221. "mocks": [
  222. {
  223. "route": "/users",
  224. "module": "/mocks/users.js"
  225. }
  226. ]
  227. }
  228. ```
  229. [Example](https://github.com/75lb/local-web-server/tree/master/example/mock).
  230. ### Stored config
  231. Use the same port and blacklist every time? Persist it to `package.json`:
  232. ```json
  233. {
  234. "name": "example",
  235. "version": "1.0.0",
  236. "local-web-server": {
  237. "port": 8100,
  238. "forbid": "*.json"
  239. }
  240. }
  241. ```
  242. or `.local-web-server.json`
  243. ```json
  244. {
  245. "port": 8100,
  246. "forbid": "*.json"
  247. }
  248. ```
  249. local-web-server will merge and use all config found, searching from the current directory upward. In the case both `package.json` and `.local-web-server.json` config is found in the same directory, `.local-web-server.json` will take precedence. Command-line options take precedence over all.
  250. To inspect stored config, run:
  251. ```sh
  252. $ ws --config
  253. ```
  254. ### Logging
  255. By default, local-web-server outputs a simple, dynamic statistics view. To see traditional web server logs, use `--log-format`:
  256. ```sh
  257. $ ws --log-format combined
  258. serving at http://localhost:8000
  259. ::1 - - [16/Nov/2015:11:16:52 +0000] "GET / HTTP/1.1" 200 12290 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2562.0 Safari/537.36"
  260. ```
  261. The format value supplied is passed directly to [morgan](https://github.com/expressjs/morgan). The exception is `--log-format none` which disables all output.
  262. ### Access Control
  263. By default, access to all files is allowed (including dot files). Use `--forbid` to establish a blacklist:
  264. ```sh
  265. $ ws --forbid '*.json' '*.yml'
  266. serving at http://localhost:8000
  267. ```
  268. [Example](https://github.com/75lb/local-web-server/tree/master/example/forbid).
  269. ### Other usage
  270. #### Debugging
  271. Prints information about loaded middleware, arguments, remote proxy fetches etc.
  272. ```sh
  273. $ ws --verbose
  274. ```
  275. #### Compression
  276. Serve gzip-compressed resources, where applicable
  277. ```sh
  278. $ ws --compress
  279. ```
  280. #### Disable caching
  281. Disable etag response headers, forcing resources to be served in full every time.
  282. ```sh
  283. $ ws --no-cache
  284. ```
  285. #### mime-types
  286. You can set additional mime-type/extension mappings, or override the defaults by setting a `mime` value in the stored config. This value is passed directly to [mime.define()](https://github.com/broofa/node-mime#mimedefine). Example:
  287. ```json
  288. {
  289. "mime": {
  290. "text/plain": [ "php", "pl" ]
  291. }
  292. }
  293. ```
  294. [Example](https://github.com/75lb/local-web-server/tree/master/example/mime-override).
  295. #### Log Visualisation
  296. Instructions for how to visualise log output using goaccess, logstalgia or gltail [here](https://github.com/75lb/local-web-server/blob/master/doc/visualisation.md).
  297. ## Install
  298. Ensure [node.js](http://nodejs.org) is installed first. Linux/Mac users may need to run the following commands with `sudo`.
  299. ```sh
  300. $ npm install -g local-web-server
  301. ```
  302. This will install the `ws` tool globally. To see the available options, run:
  303. ```sh
  304. $ ws --help
  305. ```
  306. ## Distribute with your project
  307. The standard convention with client-server applications is to add an `npm start` command to launch the server component.
  308. 1\. Install the server as a dev dependency
  309. ```sh
  310. $ npm install local-web-server --save-dev
  311. ```
  312. 2\. Add a `start` command to your `package.json`:
  313. ```json
  314. {
  315. "name": "example",
  316. "version": "1.0.0",
  317. "local-web-server": {
  318. "port": 8100,
  319. "forbid": "*.json"
  320. },
  321. "scripts": {
  322. "start": "ws"
  323. }
  324. }
  325. ```
  326. 3\. Document how to build and launch your site
  327. ```sh
  328. $ npm install
  329. $ npm start
  330. serving at http://localhost:8100
  331. ```
  332. ## API Reference
  333. {{#module name="local-web-server"}}
  334. {{>body~}}
  335. {{>member-index~}}
  336. {{>separator~}}
  337. {{>members~}}
  338. {{/module}}
  339. * * *
  340. &copy; 2015 Lloyd Brookes <75pound@gmail.com>. Documented by [jsdoc-to-markdown](https://github.com/jsdoc2md/jsdoc-to-markdown).