Hosting a static website

Host a static website using open web services in Eyevinn Open Source Cloud. The static website is hosted on a bucket provided by the MinIO storage service based on open source.

In this guide

1. Get an API Access Token and setup project and create a Hello World web application
2. Build the application
3. Deploy the build

Prerequisites

• An Eyevinn Open Source Cloud account.

Get an API Access Token and setup project

Navigate to Settings / API in the Eyevinn Open Source Cloud web console.

Copy this token and store in your shell's environment in the environment variable OSC_ACCESS_TOKEN.

Create a Hello World web application

In this guide we will start by creating a Hello World application in React. We assume that you have NodeJS installed. Create a new React application by running the following command.

% npx create-react-app hello-world
Need to install the following packages:
[email protected]
Ok to proceed? (y) y

This will create a new directory called “hello-world” containing all the necessary files and dependencies for your React application.

Move into your new app’s directory:

% cd hello-world

Start the development server by running the following command.

% npm start

Your browser will open with this sample application.

Build the application

Build the application to generate the static website. As it will be deployed to a subfolder we need to provide that information when building the website. We do that by setting the environment variable PUBLIC_URL when we build the application.

% PUBLIC_URL=/hello/ npm run build

The generated website is available in the folder called “build” in your directory.

Deploy the build

Run the following command to deploy the build. We name the website “hello” which will be the subfolder where the files are placed.

% npx @osaas/cli@latest web publish -s hello build/
Website published at: https://eyevinnlab-hello.minio-minio.auto.prod.osaas.io/hello/index.html
CDN settings:
 - Origin: eyevinnlab-hello.minio-minio.auto.prod.osaas.io
 - Origin Headers: 'Host: eyevinnlab-hello.minio-minio.auto.prod.osaas.io'
 - Origin Path: hello
 - Default root object: index.html

In this example the website is published and available at https://eyevinnlab-hello.minio-minio.auto.prod.osaas.io/hello/index.html