Easiest way to publish existing Express node app to a static site?

Question

I've been incredibly spoiled by working almost exclusively with React via create-react-app which has a build utility for npm which makes deploying my projects to static web hosting super easy (github pages / surge) and in the end just gives me raw html / css / js.

But recently a friend approached me, in whatever school he's in they've taught him a ton about how to write apps with just Express but nothing about how to deploy them. I've got his code up on Heroku for the time being but he'd probably be better off with just static hosting (since the site is incredibly simple and only uses express for routing / features no server side code or interaction)

Is there anything like create-react-app's build functionality for express? There's no way this incredibly simple thing absolutely needs the overhead of a full node server.

Answer 1

I think you may be conflating a few things, so let's start at the beginning just to make sure we're using the same definitions.

Node is a JavaScript-engine, powered by the V8 engine (which was built for Chrome). It's basically a JavaScript interpreter.

Express is a package, built on top of Node, which builds upon Node's http library. It's (one of) Node's equivalents to nginx or apache .

Heroku is a cloud-based web host, which has the ability to scale dynamically (like AWS, which it is built on top of).

To say "Express doesn't need a full-blown Node server" doesn't really make much sense. He just needs a server which can run Node apps. The size of the Node server can vary, and indeed he probably doesn't need a very big one.

Heroku is probably a very suitable host. He doesn't have to use scaling or anything and it is fairly easy to deploy a Node app there.

Many other popular hosts can also support Node. If they give you terminal access and the ability to install applications, they almost certainly can.

As far as I know, there aren't any programs like create-react-app which will just spin up a new instance of an express app. That's probably because they're insanely simple to setup. Just two files are sufficient for a bare-bones express app: package.json and your express file (I'll name it index.js .

package.json:

{
   "name": "my-app",
   "dependencies": {
     "express": "latest"
   }
}

index.json:

const express = require('express');

const app = express();

app.get('/', (req, res) => res.send('<h1>Hello World</h1>').end());

app.listen(8888, () => console.log('Listening on port 8888'));

Deploying that to any server that can run Node and running the command npm install; node index.js npm install; node index.js will start it running.

Very frequently, you'll actually create an express server to serve up your web app, frequently written in React (this is the scenario I work in every day). The create-react-app is just a quick way to set up a project that is rather opinionated in its structure, but is not the only way to use React.

(Super technically, you can get away without package.json , but you'd have to manually run npm install express on the server, and that'd be really weird, so don't do that).

Answer 2

I had the same feeling working on very simple site, so I've transferred my express application into web-boost approach which is using the same express under the hood.

The only thing you have to do is create web-boost.json config file which looks like

{
  "routes": {
    "/": {
      "view": "index.twig",
      "vars": {
        "title": "Home page",
        "greeting": "Hello world!"
      },
      "assets": {
        "js/index.min.js": [
          "js/index.js"
        ]
      }
    },
    "/user": {
      "view": "user.twig",
      "vars": {
        "title": "User's page",
        "greeting": "Hi John Doe!"
      },
      "assets": {
        "css/user.min.css": [
          "styles/bootstrap.min.css",
          "styles/user.scss"
        ]
      }
    }
  }
}

and then use wb-compile CLI command to convert your dynamic application into static one.

PS After that I've just deployed static pages to AWS.S3