@wertarbyte/webapp-server

v1.2.1

Published

3 years ago

A simple almost-static file server for webapps with configuration.

Downloads

127

0High
0Medium
0Low

Webapp Server

This is a simple almost-static server for webapps. It serves all files from the specified directory but can replace placeholders in index.html with values at runtime, which is perfect for setting API endpoint, Google Maps keys, Sentry DSNs and the like.

CLI usage

In your index.html, specify placeholders:

<head>
  <script type="text/javascript">
    window.MY_APP_CONFIG = {
      apiUrl: "{{ API_URL ?? http://localhost:3000 }}",
      sentryDsn: "{{ SENTRY_DSN }}",
    };
  </script>
</head>

Now you can start the server and set options like this:

webapp-server /path/to/your/files -c API_URL=https://api.your.app -c SENTRY_DSN=12345

You can configure the port and address the server binds to using the corresponding options (-p and --address) or using environment variables ($PORT and $ADDRESS).

Values from the environment

If you don't specify a value for a configuration option, it uses the value of the environment variable with the same name, e.g. the following command will replace {{ USER }} with your name.

webapp-server /path/to/your/files -c USER

This simplifies usage with Docker images as you don't need the verbose -c OPTION=$OPTION -c OTHER_OPTION=$OTHER_OPTION ... but can just enumerate the variables to take into account instead.

Usage as middleware

If you already have a server and want to serve your webapp with it, you can also use this library. Note that environment variables aren't taken into account by default so you need to specify all variables manually.

Express

Register the middleware after creating the express instance. The following example serves files from admin-files at /admin.

const webappServer = require("@wertarbyte/webapp-server");
const app = express();
app.use(
  "/admin",
  webappServer({
    publicPath: path.resolve(process.cwd(), "frontend"),
    variables: {
      API_ENDPOINT: "/",
    },
  })
);

NestJS

Register the middleware after initializing the NestExpressApplication. The following example serves files from frontend for every route that doesn't start with /graphql. This means that you can access the frontend at the root path and still access the GraphQL API.

import * as webappServer from "@wertarbyte/webapp-server";

const app = await NestFactory.create<NestExpressApplication>(YourAppModule);
app.use(
  webappServer({
    publicPath: path.resolve(process.cwd(), "frontend"),
    variables: {
      SERVER_URL: "/",
      SENTRY_DSN: process.env.SENTRY_DSN,
    },
    shouldInterceptRoute: (route) => !/^\/graphql/.test(route),
  })
);

Published

Vulnerabilities

Links

Maintainers

Keywords