Skip to main content
OwnStak Docs Logo

Static SPA/MPA

Learn how to deploy your static projects to your own cloud infrastructure with Ownstak.

Prerequisites​

  • An Ownstak account with a fully set up organization
  • A static project built into a directory (e.g., dist or build)
  • Node.js installed locally (version 18.x or higher)

Getting Started​

Ownstak's static framework support allows you to deploy a wide variety of SPA/MPA projects, such as those built with:

1. Prepare your project​

First, build your project so that it outputs all of your pre-rendered pages and assets into a single directory. The final output should look something like this:

- dist/
  - index.html
  - 404.html
  - assets/
    - logo.svg
    - app.js

2. Create ownstak config​

Now it's time to create new project config, where you specify configuration for your static project. You can do so manually or by running our wizard: npx ownstak config init For static project, add following options:

  • For static MPA sites (e.g., Docusaurus), where not-found routes should return a 404 status, use the below config. It tells the OwnStak to serve the files from dist folder at /.

    ownstak.config.mjs
    import { Config } from 'ownstak';

    export default new Config()
      .setFramework("static")
      .setDefaultFile("404.html")
      .setDefaultStatus(404)
      .includeAsset("./dist", "./")

  • For static SPA sites (e.g., Create React App), where all routes should serve index.html with a 200 status, use following config.

    ownstak.config.mjs
    import { Config } from 'ownstak';

    export default new Config()
      .setFramework("static")
      .setDefaultFile("index.html")
      .setDefaultStatus(200)
      .includeAsset("./dist", "./")

3. Deploy from your machine​

Now, you can deploy the project from your machine by running:

npx ownstak deploy

When you run the deploy command for the first time, the CLI will guide you through the login and project configuration setup. Simply follow the instructions:

Ownstak deploy login prompt Ownstak deploy config setup

The organization and project names are stored in the ownstak.config.js configuration file for subsequent deployments, so you won't be prompted for this information again.

Ownstak deploy build step Ownstak deploy deploy step

4. Deploy from CI​

For CI and other non-persistent environments, you can skip the interactive deployment by providing the API key and other required options as command arguments. You can generate a new API key for your account or project in the Ownstak Console under Settings > API Keys.

npx ownstak deploy --api-key=<your-secret-key> --organization=ownstak --project=ownstak-static --environment=default

5. Done!​

Your project is now live and deployed to your organization's cloud infrastructure. You can visit and test it using the environment and deployment links provided in the output:

  • Environment link – Always points to the latest deployment in a given project environment Example: my-static-app-development.aws-primary.my-org.ownstak.link
  • Deployment link – Always points to a specific deployment Example: my-static-app-development-10.aws-primary.my-org.ownstak.link

Local testing​

If your project doesn't behave as expected, you can build and test it locally before deploying.

1. Build the project​

Run the following command in your project directory to build your project without deploying it:

npx ownstak build

Ownstak build output

2. Start the project​

Start the project and make sure it works for you locally with Ownstak:

npx ownstak start

When you see the ready message, you can visit http://127.0.0.1:3000 (or the different outputted URL) in your browser.