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. If you don't have any custom domain, set the correct baseUrl in config.js. For example, if you are deploying to https://<username>.github.io/<repo>/, (i.e. your repository is at https://github.com/<username>/<username>), you can set baseUrl to "/<repo>/" or "https://<username>.github.io/<repo>/" (recommended).

  2. 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 learn how to setup custom domains and find out about advanced configurations.

References

GitLab Pages and GitLab CI

  1. If you don't have any custom domain, set the correct baseUrl in config.js. For example, if you are deploying to https://<username or group>.gitlab.io/<repo>/, (i.e. your repository is at https://gitlab.com/<username or group>/<username or group>), you can set baseUrl to "/<repo>/" or "https://<username or group>.gitlab.io/<repo>/" (recommended).

  2. 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 learn how to setup custom domains and 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

Server Rendered

TODO

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

TODO

Last Updated: 11/14/2018, 6:06:57 PM
Want to keep up with the latest news, tips and tricks from Statusfy?
Subscribe to our Newsletter!