npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

static-frontend-server

v0.6.4

Published

An express server to serve built apps, supporting configurable proxies

Downloads

5

Readme

node-static-frontend-server

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

funkyfisch npm

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