Static-frontend-server NPM

node-static-frontend-server

A template parametric static server, for serving your built & minified frontend app files

Description

Let's say you have a directory /dist where all your built and minified front-end files live in. This CLI will serve those files, acting as an HTTP(S) server. You can essentially deploy your front-end application using this single command The big plus is that you can define all your proxies, like your backend APIs, database instances etc inside a .json file, linking them to environment variables and this tool will automatically set up a proxy table for them and have your app talk to these endpoints.

Installation

npm install -g static-frontend-server

Example Usage

In this example we have a VueJS front-end app that talks to a REST API and a CouchDB database. It uses:

the "/api" alias when making requests to the REST API without any authentication
the "/db" alias when making direct requests to the CouchDB instance, with specific authentication

By following the twelve-factor application standard, you should be exporting all the deployment specific variables in your environment.

In this case, your environment would look something like this: API_HOST="http://your-api-hostname" API_PORT=8080 COUCHDB_HOST="couchdb-01" COUCHDB_PORT=5984 COUCHDB_USER="admin" COUCHDB_PASSWORD="password"

In order for the server to create proxy tables that will know where to redirect all traffic for "/api" requests and "/db" requests, you can define a json file that will look like this:

{
  "endpoints": [
    {
      "endpointString": "/api",
      "host": "API_HOST",
      "port": "API_PORT",
      "authentication": false
    },
    {
      "endpointString": "/db",
      "host": "COUCHDB_HOST",
      "port": "COUCHDB_PORT",
      "authentication": true,
      "username": "COUCHDB_USER",
      "password": "COUCHDB_PASSWORD"
    }
  ]
}

You also have to provide the port at which this server will be listening

export UI_PORT=9001

Finally, inside the directory where your /dist folder lives (which HAS to include an index.html file), run the following:

static-frontend-server -c your-config-file.json

This tool will read the above configuration file, evaluate the environment variables that you reference, create the two proxy definitions and finally will serve your built Vue files at the defined UI_PORT