Friday, October 28th 2016 (333d ago)

Static Hosting using Now

Leo Lamprecht (@notquiteleo)

A few months ago, we released now-serve for simplifying static hosting on top of now.

Our customers love it. In addition to deploying backend APIs, many of you tend to deploy several static websites that communicate with them.

Because of this, we decided to move the feature even closer to our users - in order to make setting up such a project even easier:

What's New?

As of version 0.27.0, the now CLI will automatically determine if your project is a dynamic application or of static nature. If the latter is the case, a static deployment will be triggered and your files will be served using serve on the server!

All in all, the only thing you need to do is run:

▲ now

If you need to, you can even enforce this behaviour using this flag: now --static.

In addition, we're also deprecating now-serve in favor of this new feature. But don't worry! If your app's workflow depends on it, it will just continue to work and nothing will break.

However, we highly suggest switching these projects over to using the main CLI, because it's what we'll be improving in the future. The old package (now-serve) won't be deleted so quickly, but also won't receive any other bug fixes or new features from now on.

Examples

Now that we've covered the "why" part, I'd like to show you how you can interact with the flag in various everyday scenarios:

Static Site Hosting

▲ cd my-project
▲ ls
index.html logo.png images/
▲ now

On the left, your static site. On the right, adding /_src shows the code.

Sharing Assets

▲ cd my-logos
▲ ls
white.png white@2x.png black.png
 black@2x.png
▲ now
Example of a directory listing

If there's no index.html file, a list of all files will be rendered automatically by serve.

Single-Page Applications

So far, most of our users have been using now-serve to deploy the output directory containing their bundled single-page application.

Today, I'd like to introduce a different technique and - at the same time - recommend all of our users to go this road instead.

Assuming that you're building your client-side rendered application using a tool likeember-cli or vue-cli, you only need to make sure that the scripts.start property within your project's package.jsonis set to a command that can serve your site in production.

In addition, you need to specify the scripts.build property in order to handle the build steps before the application gets served.

As an example, this is how it would look using ember-cli:


  "scripts": {
    "start": "ember serve -prod",
    "build": "ember build -prod"
  }

Side note: If you'd like to use one (or both) of the properties mentioned above for a different command, feel free to replace it with one that only comes to action on a now deployment. After that, you can use start and build for other purposes).

Once you've figured this part out, you only need to deploy on the directory level that contains the package.json file using now.

On the server, now will then build your application (as specified in scripts.build) and serve it (stated in scripts.start) to your visitors.

Done!

If your command line interface doesn't come with a feature for serving your single page application in production, you can add the following inside your ./package.json:

{
  "scripts": {
    "start": "serve ./dist --single",
    "build": "<command-for-building-to-dist>"
  },
  "dependencies": {
    "serve": "latest"
  }
}

The ./dist path should be the location of your build output.

Under the Hood

If you look at the source code (by adding /_src to a link) of any of these deployments, you'll see that all it does is simply create a package.json for you and upload the files:

{
  "name": "static-{random}",
  "scripts": {
    "start": "serve ./content"
  },
  "dependencies": {
    "serve": "latest"
  }
}

The command serve is supplied by the serve package.

Since all we do is use now under the hood in a programmatic way, you get all its great capabilities like fast uploads and file de-duping.

And, of course, every single time you share, a new link is provided for you.

Customizing the Behaviour

Althought now-serve provided a few parameters for adjusting the behaviour of serve running on the server (like --single), we came to the conclusion that it's a much better idea to just give the developers full control over how its serving their files.

So from now on, we'll recommend simply creating a custom package.json file with a content like mentioned above, if you want to take advantage of one of serve's options.

Once you've set this up, simply run now to deploy it!

Interested in Taking Part?

All of the projects mentioned in this article are open-source and you're free to suggest features or fix bugs, if you'd like to support them:

  • now (Now's command line utility)
  • serve (Serves your files on the server)

How to Get It

If you've installed Now's command line interface using Now Desktop, the only thing you need to do is make sure that the application is running. Assuming that's the case, the binary will automatically be updated for you in the next few minutes!

However, if that's not the case, we highly recommend you to download it and use it to install the CLI. Afterwards, you're covered!

If you're on a platform that's not yet supported by Now Desktop, simply update the command line interface like this: npm install -g now@0.27.0