3dub
www 开发服务器使用 livereload 和文件监视来开发单页应用程序。
Features
- Serve static files
- File watching of the static files
- Livereload when watched files change
- Starts its own livereload server
- Automatically inject livereload into your application
- Https and Http2 support
- Auto generation of self signed certs
- Proxy settings with socket support
- Built on top of battle tested tools such as Express, chokidar, tiny-lr, and more.
Examples
Hello world
此设置将快速引导您启动具有零配置(所有默认设置)的服务器。 提供静态资产,监控它们,当它们发生变化时,livereload 将刷新您正在查看应用程序的浏览器。
install 3dub globally
$ npm install 3dub -g
create public folder
默认情况下,3dub 从名为 public
的目录提供静态资源,相对于 3dub 的起始目录。 因此,让我们继续创建一个(如果尚不存在的话)。 你所有的代码都放在那里。
$ mkdir public
start 3dub
$ 3dub
view in the browser
$ open http://localhost:3000
Custom port via configuration file
为 3dub 添加配置是自定义默认设置的一种方式。 通常,您将在您希望从中启动 3dub 的任何位置创建配置文件。
创建一个名为 .3dub.js
的文件并配置服务器端口。
module.exports = {
"port": 4545
};
start 3dub
$ 3dub
CLI examples
3dub 可用的所有选项都适用于 CLI 和配置文件。 配置文件只是使某些情况更容易处理,例如在定义中间件时定义复杂选项对象的情况。
start 3dub with custom port
$ 3dub --port 4545
3dub with root directory
$ 3dub --root dest
3dub with http2 and custom port
$ 3dub --mode http2 --port 8443
Configuration
3dub 允许您在项目目录中定义配置。 您还可以在 HOME 目录中指定默认配置文件。 如果同时指定两者,则本地项目的定义将与 HOME 中定义的设置混合在一起。
JSON 的配置默认名称为 .3dub.json
,JavaScript 的默认名称为 .3dub.js
。 您也可以使用包含您的设置的 index.js
创建一个 .3dub
目录。
Options (Configuration file and CLI)
CLI 仅在处理复杂对象时支持 subarg 表示法。
config
(字符串)要加载的配置文件名。 默认情况下,它将加载 .3dub.json
和 .3dub.js
文件或带有 index.js.3dub
目录代码>文件。 CLI only
log
(布尔值)标志,用于禁用嘈杂消息的记录。 默认为 true
。
port
(数字)服务器监听传入请求的端口。 默认为 3000
。
root
(字符串)提供文件的路径。 默认为 public
。
history
(字符串 | 对象)配置用于管理 SPA 的历史中间件。 有关设置的详细信息,请参阅此处。 默认为 index.html
。
livereload
(number | object | boolean) 当为 false 时,livereload 被禁用。 当它是一个数字时,livereload 客户端和服务器使用它作为端口号。 当它是一个对象时,设置是 tiny-lr 使用的设置。 如果您想为 livereload 客户端和 livereload 服务器指定不同的设置,那么您可以使用相应的选项定义一个 server
和一个 client
对象。 默认值为端口号 35729
。
watch
(string[] | object | boolean) 当为 false 时,文件监视被禁用。 当字符串或字符串数组时,您指定要监视更改的文件和目录; 支持 glob。 如果选项是一个对象,那么它们将被转发到 chokidar。 watch
仅在启用 livereload
时启用。 默认为 root
目录。
proxies
(array<{source, target}>) 具有本地 url 路径的 source
属性和 target
的对象数组我们映射到的远程 url 路径。
middlewares
(array | object) 定义要加载的中间件的选项。 可以指定一个中间件模块名称数组,也可以指定一个对象,其键为中间件模块名称,值为中间件模块对应的选项。 您还可以使用 subarg 表示法指定中间件,这是一个数组,其中第一项是中间件模块名称,第二项是它的选项; 例如 ["middleware-module", options].
spdy
(object) 配置 http2 处理程序。 请查看 spdy 模块以获取有关有效选项的详细信息。
mode
(字符串)配置要运行的协议。 例如 http、https 或 http2。 对于 https 和 http2 模式,您必须提供 cert
和 key
或 pfx
和 passphrase
对。 如果您两者都不提供,系统会自动为您生成一个自签名证书。
cert
(string) 使用https时,cert选项用于指定服务器要使用的证书文件的文件路径。
key
(string) 使用https时,key选项用于指定服务器要使用的私钥文件的文件路径。
pfx
(string) 使用 https 时,pfx 选项用于指定服务器要使用的 pfx 文件的文件路径。
passphrase
(字符串)使用 https 时,需要密码选项才能打开服务器将使用的 pfx 文件。
Self signed certificates
在 https 或 http2 模式下运行 3dub 时,您可以选择指定自己的证书。 如果未提供,则 3dub 将创建自己的自签名证书并记录警告。 自动创建一个自签名证书,使开发服务器的启动和运行变得非常容易。 并且...自签名证书未写入磁盘。
Installation
通过 npm 安装作为开发依赖,并配置一个 npm 脚本来启动服务器。 这是我的首选方法,因为它允许您在每个项目的基础上定义 3dub 的版本,并且还消除了全局安装 3dub 的需要。
$ npm install 3dub --save-dev
全局安装,以便您可以通过 CLI 从任何地方启动 3dub。
$ npm install 3dub -g
Requirements
要使 http2 正常工作,需要 nodejs 4.8.0 及更高版本。 这是因为在 Chrome 等浏览器正确协商协议所需的节点版本中添加了 ALPN。
https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V4.md#2017-02-21-version-480-argon-lts-mylesborins
3dub
www dev server with livereload and file watching for developing Single Page Applications.
Features
- Serve static files
- File watching of the static files
- Livereload when watched files change
- Starts its own livereload server
- Automatically inject livereload into your application
- Https and Http2 support
- Auto generation of self signed certs
- Proxy settings with socket support
- Built on top of battle tested tools such as Express, chokidar, tiny-lr, and more.
Examples
Hello world
This setup will quickly walk you through starting up a server with ZERO configuration (all default settings). Serve up static assets, monitor them and when they change, livereload will refresh the browser where you are viewing your application.
install 3dub globally
$ npm install 3dub -g
create public folder
By default, 3dub serves up static assets from a directory called public
relative where 3dub starts from. So let's go ahead and create one if one does not already exist. All your code goes in there.
$ mkdir public
start 3dub
$ 3dub
view in the browser
$ open http://localhost:3000
Custom port via configuration file
Adding a configuration for 3dub is a way to customize default settings. Generally, you will create configuration files wherever you expect to start 3dub from.
Create a file called .3dub.js
and configure the server port.
module.exports = {
"port": 4545
};
start 3dub
$ 3dub
CLI examples
All options available for 3dub are for both the CLI and configuration files. Configuration files just makes some situations easier to work with as in the case of defining complex option object when defining middlewares.
start 3dub with custom port
$ 3dub --port 4545
3dub with root directory
$ 3dub --root dest
3dub with http2 and custom port
$ 3dub --mode http2 --port 8443
Configuration
3dub allows you to define a configuration in your project's directory. You can also specify a default configuration file in your HOME directory. If you specify both, the your local project's definition will be mixed in with the settings defined in HOME.
The default name of your configuration is .3dub.json
for JSON and .3dub.js
for JavaScript. You can alternatively create a .3dub
directory with an index.js
that contains your settings.
Options (Configuration file and CLI)
CLI only supports subarg notation when working complex object.
config
(string) Configuration file name to load. By default it will load .3dub.json
and .3dub.js
files or .3dub
directory with an index.js
file in it. CLI only
log
(boolean) flag to disable logging of noisy messages. Defaults to true
.
port
(number) port to for the server to listen on for incoming requests. Defaults to 3000
.
root
(string) path to serve files from. Defaults to public
.
history
(string | object) to configure the history middleware for managing your SPA. For details on the settings, please see here. Defaults to index.html
.
livereload
(number | object | boolean) When false, livereload is disabled. When its a number, then livereload client and server use that as the port number. When it is an object, settings are those used by tiny-lr. If you want to specify different settings for the livereload client and livereload server, then you can define a server
and a client
object with the corresponding options. Default value is the port number 35729
.
watch
(string[] | object | boolean) When false, file watching is disabled. When string or array of strings, you sepcify the files and directories to be monitored for changes; globs are supported. If options is an object, then they are forwarded to chokidar. watch
is only enabled when livereload
is enabled. Defaults to the root
directory.
proxies
(array<{source, target}>) Array of objects with a source
property for the local url path and a target
to the remote url path we are mapping to.
middlewares
(array | object) Option to define middlewares to be loaded. You can specify an array of middleware module names, you can also specify an object whose keys are the names of middleware modules and the values are the corresponding options for them. You can also specify middlewares using subarg notation, which is an array where the first item is the middleware module name and the second item are the options for it; e.g. ["middleware-module", options].
spdy
(object) configure the http2 handler. Please take a look at the spdy module for details on the valid options.
mode
(string) configure what protocol to run. E.g. http, https, or http2. For https and http2 mode, you must provide the pair cert
and key
or pfx
and passphrase
. If you do not provide either, a self signed certificate will be automatically generated for you.
cert
(string) When using https, the cert option is for specifying the file path to the certificate file to be used by the server.
key
(string) When using https, the key option is for specifying the file path to the private key file to be used by the server.
pfx
(string) When using https, the pfx option is for specifying the file path for the pfx file to be used by the server.
passphrase
(string) When using https, the passphrase option is required for opening the pfx file that will be used by the server.
Self signed certificates
When running 3dub in https or http2 mode, you have the option to specify your own certificate. If one isn't provided, then 3dub will create its own self signed certificate and will log a warning. A self signed certificate is automatically created to make it really easy to get a dev server up and running. And… The self signed cerficate is not written to disk.
Installation
Install via npm as a dev dependency, and configure an npm script to start the server. This is my preferred approach as it allows you to define the version of 3dub on a per project basis and also removes the need to install 3dub globally.
$ npm install 3dub --save-dev
Install globally so that you can start 3dub from anywhere via CLI.
$ npm install 3dub -g
Requirements
For http2 to work as expected, nodejs 4.8.0 and above is required. This is because ALPN was added in that version of node which is required by browsers like Chrome to properly negotiate the protocol.
https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V4.md#2017-02-21-version-480-argon-lts-mylesborins