Run a Static App

This quickstart assumes that you have:

💡 Currently, Space only supports Node.js 16, with plans to add support for Node.js 18 soon. We recommend using a Node version manager like nvm to install Node.js and npm on your computer. This will allow you to quickly install and use different versions of Node.js.

Space supports popular front-end frameworks like React, Svelte, and Vue out of the box.

However, if you’re using a different framework like Astro, Solid or are building static HTML apps without a framework or static site generator, you can still run it on Space by configuring the Spacefile.

On Space you can push a static app you already built or a new project you are working on.

💡 You can use the Deta SDK in the browser to write straight to Deta Base and Deta Drive with managed authentication. This will not work on Public Micros and Routes.

Create a Space project

Space projects allow you to build, test, and use apps on Deta Space. They are also a (optional) launchpad for releasing them to the public.

Terminal window
space new

You will be prompted to enter a name for your project. The CLI will display a generated configuration for the app and prompt you to confirm.

Once confirmed, the project will be created along with a Spacefile. The Spacefile contains the configuration for your Micro and a .space directory that stores project information and links it to your project.

# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
v: 0
micros:
  - name: react-app
    src: ./
    engine: react
    primary: true

⚠️ If the CLI fails to generate a configuration for your app, you can configure it manually. For more information, please refer to the Spacefile reference.

If you’re using a framework that’s not yet supported out of the box, or a static HTML app without using a framework or static site generator, here is how to configure the Spacefile to work with your specific requirements:

# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
v: 0
micros:
  - name: static-app
    src: ./
    engine: static
    primary: true
    commands:
      - npm run build
    serve: dist

Here, the engine parameter specifies the type of engine used for the app, which is static in this case. The commands parameter is a list of commands that will be executed to build the app. The serve parameter specifies the directory that will be served as the root directory for the app, and in this case, the dist directory is used.

Developing Locally

You can run your app on your local machine, in a way that emulates Space for development. To do so, you need to define a startup command for your app’s development server using the dev command in the Spacefile.

# Spacefile Docs: https://go.deta.dev/docs/spacefile/v0
v: 0
micros:
  - name: react-app
    src: ./
    engine: react
    primary: true
   dev: npm run start

Once you define the dev command for the Micro in the Spacefile, you can start the development server by running the following command:

Terminal window
space dev

Run it on Space

To deploy your app to Space, simply run:

space push

This will validate your Spacefile, package and upload your source code to the Space build pipeline, and stream logs of the whole process on your terminal. Once the build process is complete, your Builder Instance. Open it in your browser to test and use a live copy of your app on the internet.

💡 You can use space push --open to open the builder instance in your browser after successful deployment and update of the builder instance.

Congratulations! 🎉 You have successfully built, deployed and got your first Static app on Space. 🚀