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),
})
);