# README
Example
This application is created as described here:
npm create vite@latest example -- --template react-ts
Configure Vite
We changed the vite.config.ts
to add the generation of the manifest file and made sure to overwrite the main entry point. Here's how the vite.config.ts
looks after the changes:
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
build: {
// generates .vite/manifest.json in outDir
manifest: true,
rollupOptions: {
// overwrite default .html entry
input: "/src/main.tsx",
},
},
})
Server side
We then added the main.go
.
Development mode
If you want to try development mode, first run a new console and do npm run dev
in the background: It should start the Vite development server on http://localhost:5173
.
Now run the Go code as:
$ go run main.go -dev
Listening on on http://127.0.0.1:8080
Open up the URL in your browser and you should see the React app, being rendered by a Go HTML template. Not convinced? Open up development mode and go to the Console
. You should see a message there, which was embedded by the Go code that rendered the HTML.
Notice that you can now change the HTML and JavaScript/TypeScript code, and Hot Module Reload (HMR) should run just fine and update the page inline.
Production mode
First make sure to run npm run build
before using production mode, as the Go code relies on embedding the dist
directory into the Go binary.
Next, simply run the Go code:
$ go run main.go
Listening on on http://127.0.0.1:61736
Open the URL in your browser, and you're seeing a Go template being rendered with an underlying React app.