In this tutorial, we will create an SPA (single-page-application) that is served from the Godot resource system. Any web-framework can be used, like React or Angular, in this tutorial we will use vue.js.

Resources

For information about the resource system, checkout this page

Step 1: Godot

We will put our webapp in web/test/dist/.

Create the following directories from the root of your Godot project: web/test/. We will copy dist/ later when we build the webapp.

Step 2: Vue.js

Change directory to a random place on your system, outside of the Godot project.

Use the Vue project scaffolding tool to generate a new project. For the Vue Router option, choose Yes - just to demonstrate the router will work.

npm create vue@latest

✔ Project name: … test
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./test...
Done.

Move into the generated project directory and install the dependencies.

cd test
npm install

Step 3: change base path

This is important. For inclusion within the webview, we must change the base path with /web/test/dist/ as that will be the absolute path of our webapp. If you are using React, you should have something similar related to base paths that you need to change.

Modify vite.config.js and add base to the config, like this:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  base: "/web/test/dist/",
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

Step 4: build Vue.js project

npm run build

This produces a folder called dist/. Move this folder to your Godot project and place it in web/test/ so that the full path from your Godot project's root becomes: web/test/dist/.

Step 5: Webview

In your Godot project:

1. Create a webview node
2. Set the URL to res://godot/web/test/dist/
3. Create a TextureRect (or MeshInstance3D) as a child-node of the WebView node
4. Run your project