gatsby-plugin-express

Server side client route matching and redirect

Usage

Install the plugin.

npm i gatsby-plugin-express

or

yarn add gatsby-plugin-express

Create the configuration file.

mkdir config
touch config/gatsby-express.json

Add the plugin to gatsby-config.js

plugins: [
  {
    resolve: 'gatsby-plugin-express',
    options: {
      output: 'config/gatsby-express.json',
    }
  }
]

You can create your express app anywhere in the project.

In this example, server.js is created in the project root with the following content:

const gatsbyExpress = require('gatsby-plugin-express');
const app = express();

// serve static files before gatsbyExpress
app.use(express.static('public/'));
app.use(gatsbyExpress('config/gatsby-express.json', {
  publicDir: 'public/',

  // redirects all /path/ to /path
  // should be used with gatsby-plugin-remove-trailing-slashes
  redirectSlashes: true,
}));

app.listen(3000, function() {
  console.log('App started on port 3000');
});

Build the site

gatsby build

Serve the site using your express app.

node server.js

View the site on http://localhost:3000

During development, when running gatsby develop, gatsby provides its own express application to serve the site.

You can hook into the express used by Gatsby using the Gatsby APIs - Advanced Proxying.