decors
v1.1.12
Published
a simple, temporary, reusable reverse proxy, with benefits. designed for prototyping js apps by serving static files, live code reloads, and CORS bypassing
Downloads
25
Maintainers
Readme
decors
Decors is a simple, temporary, reusable reverse proxy, with benefits.
It was originally made to help the "extremely rapid iterations" mindset for early (or late) Javascript front-end web app development by bypassing CORS restrictions from browsers.
Use cases
These are a few ways I've found this software to be useful. See the usage for more technical explanations of features.
Rapid iterations development
With Decors' --watch
flag, it can inject LiveReload middleware into each page, initiating a reload on all browsers (even mobile) when a source file changes or a CSS injection when stylesheets are updated.
Static file server
Decors, by default, will serve static files using the working directory (or specified directory) as a root directory. Having Decors serve static assets, in my experience, is quicker than having the application server, such as Tomcat, serve them (and probably better reflects a production environment where something like NginX or Varnish will be serving static assets, though Decors intentionally does not cache files).
Lazy app prototyping
With the --backend <baseurl>
flag, Decors can make a static file server, as described above, look like it has the API to your back-end service available. The back-end flag is intended to allow quick front-end prototyping by allowing a separate front-end app make calls to your API as if they were on the same server/port (thereby bypassing any sort of CORS restrictions). This lets developers create front-end web apps separate from the main back-end service and be able to merge the front- and back-end codebases without configuration changes.
Installation
npm install -g decors
Explanation
Suppose you have a web service that looks like this
http://www.example.com
==> GET /post/:id
==> POST /post/add
==> DELETE /post/:id/remove
…and you want to build a super cool front-end app for it.
So locally you set up this app structure:
~/Sites
/index.html
/js
/app.js
/favicon.ico
You then install decors globally and run decors ~/Sites -w -b http://www.example.com
.
Now, you can develop your app as if your remote back-end API is available locally:
http://localhost:9000
/ [index.html] # static files served and reloaded from ~/Sites
/js
/app.js
/favicon.ico
==> GET /post/:id # remote API routed through decors and available CORS-free
==> POST /post/add
==> DELETE /post/:id/remove
If you were running jQuery, doing something like this in app.js
on localhost:9000
would be totally valid:
$.ajax('/post/1').done(function(data) {
console.log(data); // logs the output of http://www.example.com/post/1
});
In the background, decors tries to act as a proxy, making the response from http://www.example.com/post/1
available through http://localhost:9000/post/1
.
Usage
decors [path] [options]
Where path
is the relative or absolute path to the web app directory and options
are as below:
-w, --watch reload app and inject css on file save
-b, --backend <baseurl> have decors make backend requests to eliminate CORS issues
-p, --port <port> set a custom port (default 9000)
Notes
- decors serves static files via Connect's static middleware (and will display
index.html
when requested a directory) - decors tries to serve static files before making remote calls. If you want to mock out responses from your back-end you can create files in the corresponding path to their remote API calls.
- decors LiveReload middleware does not work well with the LiveReload browser plugin, so you may need to disable any plugins before using successfully.
- decors will try its best to avoid infinite loops, but if any are encountered, too bad.
- Although decors is primarily meant to act as a proxy for RESTful APIs, I've added in support for images and theoretically other filetypes, but I'd recommend sticking with JSON (and maybe images), as responses are stored in memory before sent to the client.
- Watching very large hierarchies of files can be very CPU intensive, so be mindful with the
--watch
flag.