Serving Static Files

In addition to handling dynamic requests, applications often need to serve additional static files such as JavaScript, images, and CSS. The flexible runtime environment allows you to decide how to serve static content for your application. You can serve static content directly from your application, host it on Cloud Storage, or use a third-party content delivery network.

Serving from your application

Most web frameworks include support for serving static files. In this sample, the application uses the express.static middleware to serve files from the ./public directory to the /static URL.

'use strict';

const express = require('express');
const app = express();

app.set('view engine', 'pug');

// Use the built-in express middleware for serving static files from './public'
app.use('/static', express.static('public'));

app.get('/', (req, res) => {
  res.render('index');
});

// Start the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
  console.log('Press Ctrl+C to quit.');
});

The view refers to /static/main.css.

doctype html
html(lang="en")
  head
    title Static Files
    meta(charset='utf-8')
    link(rel="stylesheet", href="/static/main.css")
  body
    p This is a static file serving example.

The stylesheet itself is located at ./public/css, which is served from /static/main.css.

body {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CCCCFF;
}

Other Node.js frameworks, such as Hapi, Koa, and Sails typically support serving static files directly from the application. Refer to their documentation for details on how to configure and use static content.

Serving files from the application is typically straightforward, however, there are drawbacks to this approach. Requests for static files can use resources that otherwise would be used for dynamic requests. Depending on your configuration, this can cause your application to be slow to respond or to create new instances to handle the load. It's recommended best practice to serve static content separately from your application in production.

Serving from Cloud Storage

Cloud Storage can be used to host static assets for dynamic web applications. The benefits of using Cloud Storage instead of serving directly from your application include:

  • Cloud Storage essentially works as a content delivery network. This does not require any special configuration because by default any publicly readable object is cached in the global Cloud Storage network.
  • Your application's load will be reduced by offloading serving static assets to Cloud Storage. Depending on how many static assets you have and the frequency of access, this can reduce the cost of running your application by a significant amount.
  • Bandwidth charges for accessing content can often be less with Cloud Storage.

You can upload your assets to Cloud Storage by using the Cloud SDK or the Cloud Storage API.

Example of serving static files from a Cloud Storage bucket

This simple example creates a Cloud Storage bucket and uploads static assets using the Cloud SDK:

  1. Create a bucket. It's common, but not required, to name your bucket after your project ID. The bucket name must be globally unique.

    gsutil mb gs://<your-bucket-name>
    
  2. Set the ACL to grant read access to items in the bucket.

    gsutil defacl set public-read gs://<your-bucket-name>
    
  3. Upload items to the bucket. The rsync command is typically the fastest and easiest way to upload and update assets. You could also use cp.

    gsutil -m rsync -r ./static gs://<your-bucket-name>/static
    

You can now access your static assets via https://storage.googleapis.com/<your-bucket-name>/static/....

For more details on how to use Cloud Storage to serve static assets, including how to serve from a custom domain name, refer to How to Host a Static Website.

For more information on how to use the Cloud Storage API to dynamically upload, download, and manipulate files from within your application, see Using Cloud Storage.

Serving from a third-party content delivery network

Your application may use any third-party content delivery network (CDN) to serve static assets and cache dynamic requests. If you use third-party CDN service that has direct interconnect links with Google Cloud Platform you can reduce the latency and cost of your application. For more information, see CDN Interconnect.

Send feedback about...

App Engine flexible environment for Node.js docs