Skip to content
This repository has been archived by the owner on May 3, 2022. It is now read-only.

Commit

Permalink
Update compositor.json
Browse files Browse the repository at this point in the history
  • Loading branch information
Kikobeats committed Nov 19, 2017
1 parent 6eb548e commit ee14de4
Showing 1 changed file with 147 additions and 0 deletions.
147 changes: 147 additions & 0 deletions compositor.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,147 @@
{
"name": "Kikobeats/svr",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "",
"branch": "",
"style": {
"name": "Default",
"componentSet": {
"nav": "nav/BasicNav",
"header": "header/BannerHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "-apple-system, BlinkMacSystemFont, sans-serif",
"fontWeight": 400,
"bold": 600,
"lineHeight": 1.5,
"typeScale": [
72,
48,
24,
20,
16,
14,
12
],
"monospace": "Menlo, monospace",
"heading": {
"fontFamily": null,
"fontStyle": null,
"fontWeight": 600,
"lineHeight": 1.25,
"textTransform": null,
"letterSpacing": null
},
"h0": {},
"h1": {},
"h2": {},
"h3": {},
"h4": {},
"h5": {},
"h6": {},
"alternativeText": {},
"space": [
0,
8,
16,
32,
48,
64,
96
],
"layout": {
"maxWidth": 1024,
"centered": false
},
"colors": {
"text": "#111",
"background": "#fff",
"primary": "#08e",
"secondary": "#059",
"highlight": "#e08",
"border": "#ddd",
"muted": "#eee"
},
"border": {
"width": 1,
"radius": 2
},
"link": {},
"button": {
"hover": {
"boxShadow": "inset 0 0 0 999px rgba(0, 0, 0, .125)"
}
},
"input": {},
"body": {
"margin": 0
},
"breakpoints": {
"xs": "@media screen and (max-width:40em)",
"sm": "@media screen and (min-width:40em)",
"md": "@media screen and (min-width:52em)",
"lg": "@media screen and (min-width:64em)"
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "http://Kikobeats.github.io/svr/",
"text": "Home"
},
{
"href": "https://github.com/Kikobeats/svr",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/svr",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "svr",
"subhead": "Hot Module Replacement for HTTP Server",
"children": [
{
"component": "ui/TweetButton",
"text": "svr: Hot Module Replacement for HTTP Server",
"url": "http://Kikobeats.github.io/svr/"
},
{
"component": "ui/GithubButton",
"user": "Kikobeats",
"repo": "svr"
}
],
"text": "v0.4.0"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "\n<p>\n <br>\n <img src=\"https://d26dzxoao6i3hh.cloudfront.net/items/36410M2p1j2T322w0Q2g/Screen%20Recording%202017-08-18%20at%2011.24%20pm.gif?v=35e385d1\">\n <br>\n</p>\n\n<p><img src=\"https://img.shields.io/github/tag/Kikobeats/svr.svg?style=flat-square\">\n<a href=\"https://travis-ci.org/Kikobeats/svr\"><img src=\"https://img.shields.io/travis/Kikobeats/svr/master.svg?style=flat-square\"></a>\n<a href=\"https://coveralls.io/github/Kikobeats/svr\"><img src=\"https://img.shields.io/coveralls/Kikobeats/svr.svg?style=flat-square\"></a>\n<a href=\"https://david-dm.org/Kikobeats/svr\"><img src=\"https://img.shields.io/david/Kikobeats/svr.svg?style=flat-square\"></a>\n<a href=\"https://david-dm.org/Kikobeats/svr#info=devDependencies\"><img src=\"https://img.shields.io/david/dev/Kikobeats/svr.svg?style=flat-square\"></a>\n<a href=\"https://www.npmjs.org/package/svr\"><img src=\"https://img.shields.io/npm/dm/svr.svg?style=flat-square\"></a>\n<a href=\"https://paypal.me/Kikobeats\"><img src=\"https://img.shields.io/badge/donate-paypal-blue.svg?style=flat-square\"></a></p>\n<blockquote>\n<p>Hot Module replacement (HMR) capabilities for any HTTP Server.</p>\n</blockquote>\n<p>It&apos;s similar <a href=\"https://github.com/zeit/micro-dev\">micro-dev</a>, but out of the box for any framework that use <a href=\"https://nodejs.org/api/http.html#http_server_listen_port_hostname_backlog_callback\">http.Server.listen()</a> interface.</p>\n<h2>Install</h2>\n<pre>$ npm install svr --save-dev</pre><h2>Usage</h2>\n<h3>Development</h3>\n<p>The only requirement is define the main file of your server as exported function that follow this interface:</p>\n<pre><span class=\"hljs-built_in\">module</span>.exports = <span class=\"hljs-function\">(<span class=\"hljs-params\">app, express</span>) =&gt;</span> {\n<span class=\"hljs-comment\">/* your awesome code here */</span>\n}</pre><p>This could be a good start point for a HTTP server:</p>\n<pre><span class=\"hljs-keyword\">const</span> isProduction = process.env.NODE_ENV === <span class=\"hljs-string\">&apos;production&apos;</span>\n\n<span class=\"hljs-built_in\">module</span>.exports = <span class=\"hljs-function\">(<span class=\"hljs-params\">app, express</span>) =&gt;</span> {\n <span class=\"hljs-comment\">/* here you can do whatever you want */</span>\n app\n .use(<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;helmet&apos;</span>)())\n .use(<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;compression&apos;</span>)())\n .use(<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;cors&apos;</span>)())\n .use(<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;jsendp&apos;</span>)())\n .use(<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;express-status-monitor&apos;</span>)())\n .use(bodyParser.urlencoded({ <span class=\"hljs-attr\">extended</span>: <span class=\"hljs-literal\">true</span> }))\n .use(bodyParser.json())\n .use(<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;morgan&apos;</span>)(isProduction ? <span class=\"hljs-string\">&apos;combined&apos;</span> : <span class=\"hljs-string\">&apos;dev&apos;</span>))\n .use(express.static(<span class=\"hljs-string\">&apos;static&apos;</span>))\n .disable(<span class=\"hljs-string\">&apos;x-powered-by&apos;</span>)\n\n app.get(<span class=\"hljs-string\">&apos;/&apos;</span>, <span class=\"hljs-keyword\">async</span> <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> (<span class=\"hljs-params\">req, res</span>) </span>{\n <span class=\"hljs-keyword\">return</span> res.send(<span class=\"hljs-string\">&apos;hello world&apos;</span>)\n })\n\n <span class=\"hljs-keyword\">return</span> app\n}</pre><p>After that, you need to call <code>svr</code>. We recommend add <code>svr</code> as npm script:</p>\n<pre>{\n <span class=\"hljs-attr\">&quot;scripts&quot;</span>: {\n <span class=\"hljs-attr\">&quot;dev&quot;</span>: <span class=\"hljs-string\">&quot;srv&quot;</span>\n }\n}</pre><p>Running <code>npm run dev</code> you start your HRM development server:</p>\n<pre>$ npm start\n\n &#x250C;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2510;\n &#x2502; &#x2502;\n &#x2502; my-express-api is running! &#x2502;\n &#x2502; &#x2502;\n &#x2502; &#x2022; Local: http://localhost:3000 &#x2502;\n &#x2502; &#x2022; On Your Network: http://192.168.1.106:3000 &#x2502;\n &#x2502; &#x2502;\n &#x2514;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2518;</pre><p><code>svr</code> it&apos;s assuming main file is called <code>index.js</code> in the current path. Otherwise, you can provide the file path as first argument.</p>\n<p>Now whatever file modification in the current directory is listened by the <code>svr</code> automagically:</p>\n<pre> &#x250C;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2510;\n &#x2502; &#x2502;\n &#x2502; my-express-api is running! &#x2502;\n &#x2502; &#x2502;\n &#x2502; &#x2022; Local: http://localhost:3000 &#x2502;\n &#x2502; &#x2022; On Your Network: http://192.168.1.106:3000 &#x2502;\n &#x2502; &#x2502;\n &#x2514;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2518;\n\n &#x2139; 18:32:42 modified index.js</pre><p>It takes in consideration your <code>.gitignore</code> files, so it only will reload the right files.</p>\n<p>Using <code>svr --watch</code> you can add more files to be watched, but you need to reload the server in any time, just type <code>rs</code>:</p>\n<pre> &#x250C;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2510;\n &#x2502; &#x2502;\n &#x2502; my-express-api is running! &#x2502;\n &#x2502; &#x2502;\n &#x2502; &#x2022; Local: http://localhost:3000 &#x2502;\n &#x2502; &#x2022; On Your Network: http://192.168.1.106:3000 &#x2502;\n &#x2502; &#x2502;\n &#x2514;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2500;&#x2518;\n\n &#x2139; 18:32:42 modified index.js\n rs\n &#x2139; 18:34:07 restart index.js</pre><h3>Production</h3>\n<p><code>svr</code> is oriented for development scenario. </p>\n<p>Under production, simply create the boostraping server that you need.</p>\n<p>For example, you can take this <code>server.js</code> as production server:</p>\n<pre><span class=\"hljs-meta\">&apos;use strict&apos;</span>\n\n<span class=\"hljs-keyword\">const</span> express = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;express&apos;</span>)\n\n<span class=\"hljs-keyword\">const</span> app = express()\n\n<span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;./index&apos;</span>)(app, express)\n\n<span class=\"hljs-keyword\">const</span> port = process.env.PORT || process.env.port || <span class=\"hljs-number\">3000</span>\n<span class=\"hljs-keyword\">const</span> { name } = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">&apos;../package.json&apos;</span>)\n\napp.listen(port, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> (<span class=\"hljs-params\"></span>) </span>{\n <span class=\"hljs-built_in\">console</span>.log(<span class=\"hljs-string\">`<span class=\"hljs-subst\">${name}</span> is running at http://localhost:<span class=\"hljs-subst\">${port}</span>`</span>)\n})</pre><p>Just add it as <code>npm start</code> script</p>\n<pre>{\n <span class=\"hljs-attr\">&quot;scripts&quot;</span>: {\n <span class=\"hljs-attr\">&quot;start&quot;</span>: <span class=\"hljs-string\">&quot;node server.js&quot;</span>\n }\n}</pre><p>That&apos;s all. You&apos;re taking the best of the two worlds: Developer Experience for development and tiny bundle for production.</p>\n<h2>License</h2>\n<p>MIT &#xA9; <a href=\"https://github.com/Kikobeats\">Kiko Beats</a>.</p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/Kikobeats/svr",
"text": "GitHub"
},
{
"href": "https://github.com/Kikobeats",
"text": "Kikobeats"
}
]
}
]
}

0 comments on commit ee14de4

Please sign in to comment.