Skip to content

Home

Jump to bottom
Luis Huertas edited this page May 11, 2022 · 4 revisions

nodeboot-spa-server

Simple http server for any spa developed with react, angular, vue, etc with some few useful features. Is a smart alternative of:

Features

  • server for statics assets like: index.html, main.css, etc
  • /settings.json http endpoint ready to use to load variables at startup of spa and have one build for any environment

Requirements

  • nodejs >= 10

Usage

If you have the result of your spa build, you just need to install this package

npm install https://github.com/usil/nodeboot-spa-server.git

Add this script to you package.json

"start" : "nodeboot-spa-server my-folder"

Where my-folder is the folder where your build assets are created:

  • Builds for angular & vue are created in
    • dist
  • Builds for react are created in
    • build

note: since angular 12, a folder with name of project is created inside dist folder. In this case use:

"start" : "nodeboot-spa-server dist/acme"

If you are using another framework, just set any folder that you need. This folder should be in the default workspace and at least contain the classic index.html

Parameters

parameter description
-p port of the server. Default 8080. Long: -port
-d folder with assets of build operation: index.html, etc. Long: -dir
-s path of file with variables in json format. Long: -settings
--allow-routes used for angular or any spa wich hits the server for html instead pure ajax

Use nodeboot-spa-server -h to show the list in the shell.

Here an example for angular >= 12 called acme-web, with port 80 and allowed routes

"start": "nodeboot-spa-server dist/acme-web -p 80 --allow-routes",

What is /settings.json ?

Read this to understand why all the SPAs(angular, react, vue, etc) needs a build for any environment, breaking the twelve factor:

In short, all the spas, have hardcoded the required variables inside of the minified and compressed javascript file which is created with npm run build:

  • .env
  • environment.prod.ts
  • hardcoded values in constants.js, config.js

That means that if one build was tested for Q&A team, another build is required to production, because if we deploy the same build on the production environment, our spa will continue pointing to testing urls. Common solution is build again the spa with some variable like

  • --prod
  • env=prod
  • .env.prod
  • etc

How we solve this?

The settings is loaded at the start of spa, consuming an http endpoint which returns a json with your required variables. Then just expose them to the rest of your spa modules, classes, etc

This framework exposes an http endpoint ready to use at the same domain of the spa. This means that if your deploy your spa at acme.com your settings will be acme.com/settings.json.

Values are read from environment variables, exactly like create-react-app but for general purpose.

Just export some variables with prefix: SPAVAR

export SPA_VAR_FOO=foo_value
export SPA_VAR_employeeApiBaseUrl=https://employee-api.com

Then in your spa, at the beginning, you could consume this http endpoint /settings.json with ajax in order to get your variables:

{
 "FOO" : "foo_value",
 "employeeApiBaseUrl" : "https://employee-api.com"
}

Then the result could be exposed to the entire spa with:

  • localStorage
  • some global variable like global._settings
  • some javascript module or class
  • store or another advanced approach

For more advanced configuration, click here

/settings.json at developer stage

The previous paragraphs showed how use spa server for production environment (npm run build and npm run start) but what happen in the local developer workspace?

Basically, you need to mock the settings and at the beginning of your spa add something like this:

var settingsEndpoint;
if(url is localhost or environment is dev){
  //mocked settings
  settingsEndpoint = "http//localhost:1234/mock/settings.json"
}else{
  //real settings
  settingsEndpoint = window.location.hostname+"/settings.json"
}

For a more elegant way, check this

License

MIT

Contributors


JRichardsz

Luis Huertas

Clone this wiki locally