Static Website

Adding application

To add a static website application:

ok apps add

and follow the wizard questions.

% ok apps add
? Application name: landing
? Application type: static
? Application dir: /code/my-app/landing
Run plugin used for application: direct
? Dir to save application YAML: /code/my-app/test/static/landing
? URL of application: my-website-domain.io
? Run command of application to serve app during dev (optional, e.g. yarn dev):
? Deploy plugin used for application: gcp
Routing of application: react
? Build directory of application: /code/my-app/test/static/landing/build
? Build command of application (optional, e.g. yarn build):

The wizard will build a config file for you in static/landing folder:

# Static app config.


# You can use ${var.*} expansion to source it from values.yaml per environment,
# e.g. url: ${var.base_url}/app1/


# Name of the app.
name: landing


# Working directory of the app where all commands will be run. All other dirs will be relative to this one.
dir: ./static/landing


# Type of the app.
type: static


# URL of the app.
url: my-website-domain.io
# Path redirect rewrites URL to specified path. URL path from 'url' field will be stripped and replaced with value below.
# '/' should be fine for most apps.
path_redirect: /
# If app is not meant to be accessible without auth, mark it as private.
# private: true


# Build defines where static files are stored and optionally which command should be used to generate them.
build:
  # Optional command to be run to generate output files.
  command: ''


  # Directory where generated files will end up.
  dir: ./build


# Deploy defines where how deployment is handled of application during `ok deploy`.
deploy:
  plugin: gcp


# Run defines where how development is handled of application during `ok run`.
run:
  plugin: direct
  # Command to be run to for dev mode.
  command: ''


  # Additional environment variables to pass.
  # env:
  #   BROWSER: none  # disable opening browser for react app


  # Port override, by default just assigns next port starting from listen-port.
  # port: 8123


# Routing to be used:
#   'react' for react browser routing.
#   'gatsby' for gatsby routing.
#   'disabled' for no additional routing.
routing: react

Routing

Depending on the type of the app, you may want to set routing to one of the following:

'react' for react browser routing
'gatsby' for gatsby routing
'disabled' for no additional routing

Running app locally

To start the app locally, you need to create index.html in static/landing/build folder, e.g.

<strong>Hello world!</strong>

and add run command (in this case, we are using some python HTTP server):

run:
  plugin: direct
  port: 3000


  # Command to be run to for dev mode.
  command: ['python3', '-m', 'http.server', '-d', 'build', '3000']