# Deploying

You can deliver your Status Page System created with Statusfy in two different ways: Static Generated or Server Rendered.

REMEMBER

You must set a valid baseUrl value in config.js in order to make Alternate URLs fully-qualified.

We listed a few different services you can use for hosting your Status Page System. Take into consideration the supported site delivery/deployment for each service:

Service Static Generated Server Rendered
GitHub Pages
✔︎
GitLab Pages
✔︎
Netlify
✔︎
Firebase
✔︎
Surge
✔︎
Heroku
✔︎
✔︎
Now v1
✔︎
✔︎
Now v2
✔︎
✔︎

The following guides are based on a few shared assumptions:

  • You are using the default build output location (./dist).
  • Statusfy is installed as a local dependency in your project, and you have set up the following npm scripts:
{
  "scripts": {
    "dev": "statusfy dev",
    "generate": "statusfy generate",
    "build": "statusfy build",
    "start": "statusfy start"
  }
}

# GitHub Pages

  1. Set the custom domain in baseUrl from your config.js

WARNING

Since version v0.3.0, deployments under a subpath (e.g. https://<username>.github.io/<repo>/) are no longer supported. You need to set up a custom domain.

  1. Add a deploy script to package.json:
{
  "scripts": {
    "deploy": "gh-pages -d dist"
  }
}
  1. And run:
#!/usr/bin/env sh

# install gh-pages
npm install gh-pages --save-dev # or yarn add gh-pages --dev

# generate
npm run generate # or yarn run generate

# deploy
npm run deploy # or yarn run deploy

Visit the GitHub Pages to find out about advanced configurations.

# References

# GitLab Pages and GitLab CI

  1. Set the custom domain in baseUrl from your config.js

WARNING

Since version v0.3.0, deployments under a subpath (e.g. https://<username or group>.gitlab.io/<repo>/) are no longer supported. You need to set up a custom domain.

  1. Create a file called .gitlab-ci.yml in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content.
image: node:latest

# This folder is cached between builds
# http://docs.gitlab.com/ce/ci/yaml/README.html#cache
cache:
  paths:
    - node_modules/

pages:
  script:
    - npm install # or yarn install
    - npm run generate -- -d public # or yarn run generate -d public
  artifacts:
    paths:
      - public
  only:
    - master

Visit the GitLab Pages to find out about advanced configurations.

# References

# Netlify

  1. On Netlify, setup up a new project with the following settings:
  • Build Command: npm run generate or yarn generate
  • Publish directory: dist

Netlify will auto-deploy the site and publish it whenever you push to your Git repo.

# References

# Firebase

First, make sure you have firebase-tools installed.

# Static Generated

  1. Create firebase.json at the root of your project with the following content:
{
 "hosting": {
   "public": "./dist",
   "ignore": []
 }
}
  1. Create .firebaserc at the root of your project with the following content:
{
 "projects": {
   "default": "<YOUR_FIREBASE_ID>"
 }
}
  1. And run:
#!/usr/bin/env sh

# generate
npm run generate # or yarn run generate

# deploy
firebase deploy

# References

# Surge

  1. Make sure you have surge installed.

  2. Run:

#!/usr/bin/env sh

# generate
npm run generate # or yarn run generate

# deploy
surge dist

Visit the Surge Help to learn how to setup a custom domain and find out about advanced configurations.

# References

# Heroku

First, install and configure the Heroku CLI.

# Static Generated

You can use the Heroku Buildpack Static to handle the static files of your site.

  1. Create a file called static.json in the root of your project with the content below:
{
  "root": "./dist"
}
  1. Add a heroku-postbuild script in your package.json:
{
  // ...
  "scripts": {
    // ...
    "heroku-postbuild": "npm run generate"
    // ...
  }
  // ...
}
  1. Set up the Heroku git remote:
#!/usr/bin/env sh

# register changes
git init
git add .
git commit -m "My Status Page System is ready for deployment."

# creates a new empty application on Heroku
heroku create

# set buildpack for static sites
heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
  1. Deploying the application:
#!/usr/bin/env sh

# publish site
git push heroku master

# References

# Server Rendered

  1. First, you should read the Heroku documentation for Node.js.

  2. We need to tell Heroku to install the devDependencies of the project:

heroku config:set NPM_CONFIG_PRODUCTION=false
  1. Set the host the application should listen to:
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production
  1. Add a heroku-postbuild script in your package.json:
{
  // ...
  "scripts": {
    // ...
    "heroku-postbuild": "npm run build"
    // ...
  }
  // ...
}
  1. Create a file called Procfile in the root of your project with the content below:
web: npm run start
  1. Deploying the application:
#!/usr/bin/env sh

# publish site
git push heroku master

# References

# Now (legacy) v1

IMPORTANT

The version v1 of Now is deprecated. Read the announcement here.

First, you must install the Now CLI globally:

npm install -g now

# Static Generated

  1. Add a now.json file to the project root:
{
  "version": 1,
  "name": "my-cool-statusfy",
  "alias": "my-cool-statusfy",
  "type": "static",
  "files": [
    "dist"
  ],
  "static": {
    "public": "dist"
  }
}
  1. Add a deploy script to package.json:
{
  "scripts": {
    "deploy": "npm run generate && now && now alias"
  }
}
  1. And run:
# deploy
npm run deploy # or yarn run deploy

Visit the Now Docs to learn how to customize the static serving behavior.

# References

# Server Rendered

  1. Add a now.json file to the project root:
{
  "version": 1,
  "name": "my-cool-statusfy",
  "alias": "my-cool-statusfy",
  "env": {
    "NODE_ENV": "production",
    "NPM_CONFIG_PRODUCTION": "false"
  },
  "engines": {
    "node": "8"
  }
}
  1. Add a deploy script to package.json:
{
  "scripts": {
    "deploy": "now && now alias"
  }
}
  1. And run:
# deploy
npm run deploy # or yarn run deploy

Visit the Now Docs for more information about Node.js deployments.

# Now v2

First, you must install the Now CLI globally:

npm install -g now

# Static Generated

  1. Add a now.json file to the project root:
{
  "version": 2,
  "name": "my-cool-statusfy",
  "alias": "my-cool-statusfy",
  "builds": [
    { "src": "package.json", "use": "@now/static-build" }
  ]
}
  1. Create a file called .nowignore in the root of your project with the content below:
node_modules
  1. Add a deploy script to package.json:
{
  "scripts": {
    "now-build": "npm run generate"
  }
}

# References

# Server Rendered

At this time, you cannot deploy a Server Rendered Statusfy app with Now v2. Please use Now v1.