Noop Noop Docs
Log in

components

Statics

Hosting static websites and single page apps on Noop.

Static Components are for hosting static websites and assets. A Static Component can be configured to serve single page applications (SPAs) or a directory (folder) of files. Statics are a good choice for hosting static sites and SPAs. Noop supports all major languages and frameworks, including:

  • ReactJS
  • VueJS
  • Svelte
  • NextJS
  • Hugo
  • 11ty
  • Astro

Service Configuration

Static Components are defined in the Blueprint Manifest (blueprint.yaml). Statics require an alphanumeric name, a type of static, and an image for executing the asset build process.

components:
  - name: StaticApp
    type: static
    image: node:24-alpine
    hosting:
      spa: true
    build:
      steps:
        - copy: package*.json
          destination: ./
        - run: npm ci
        - copy: index.html
        - copy: vite.config.js
        - copy: public/
        - copy: src/
        - run: npm run build
        - directory: dist/
      variables:
        NODE_ENV: production

The build phase is optional; however, it’s usually necessary to generate assets for deployment and specify exactly which files should be hosted.

The final working directory specified in the build.steps property is the content that will be served. In the example above, that’s the dist/ directory.

Configuration Reference

Static Components are defined in your .noop/blueprint.yaml as an array under the components property.

  • The name property is an alphanumeric string and is required.
  • The type property is required and must be set to static.
  • The image property is the name of the container image. Noop supports Docker Hub images. This property is required.
  • The build property describes an array of steps to follow while building the service.
  • The hosting property is an object that includes two properties:
    • spa, which determines if unfound HTML assets should fall back to the default index file.
    • index, which is the name of the file to use as the default index file (default is index.html).
  • The root property is an optional configuration to specify the folder within the source repository to use for the component.