Merge pull request #94 from jkirkpatrick24/feat/spa-config

feat: simplify configuration for SPA applications
fastify · Jan 3, 2023 · 01bf52f · 01bf52f
2 parents 89e8a78 + 0b0a4c3
commit 01bf52f
Show file tree

Hide file tree

Showing 12 changed files with 164 additions and 4 deletions.
diff --git a/examples/react-vanilla-spa/.eslintignore b/examples/react-vanilla-spa/.eslintignore
@@ -0,0 +1 @@
+dist
diff --git a/examples/react-vanilla-spa/.eslintrc b/examples/react-vanilla-spa/.eslintrc
@@ -0,0 +1,31 @@
+{
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+    ecmaVersion: 2021,
+    sourceType: 'module',
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+   },
+    ecmaFeatures: {
+      jsx: true,
+    },    
+  },
+  extends: [
+    'plugin:react/recommended',
+    'standard',
+  ],
+  plugins: [
+    'react',
+  ],
+  rules: {
+    'comma-dangle': ['error', 'always-multiline'],
+    'react/prop-types': 'off',
+    'import/no-absolute-path': 'off',
+  },
+  settings: {
+    react: {
+      version: '18.0',
+    },
+  },
+}
diff --git a/examples/react-vanilla-spa/client/base.jsx b/examples/react-vanilla-spa/client/base.jsx
@@ -0,0 +1,7 @@
+import React from 'react'
+
+export function createApp () {
+  return (
+    <p>Hello world from React and @fastify/vite!</p>
+  )
+}
diff --git a/examples/react-vanilla-spa/client/index.html b/examples/react-vanilla-spa/client/index.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<main><!-- element --></main>
+<script type="module" src="/mount.js"></script>
diff --git a/examples/react-vanilla-spa/client/mount.js b/examples/react-vanilla-spa/client/mount.js
@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client'
+import { createApp } from './base.jsx'
+
+const root = createRoot(document.querySelector('main'))
+root.render(createApp())
diff --git a/examples/react-vanilla-spa/package.json b/examples/react-vanilla-spa/package.json
@@ -0,0 +1,38 @@
+{
+  "type": "module",
+  "scripts": {
+    "dev": "node server.js --dev",
+    "devinstall": "zx ../../devinstall.mjs react-vanilla -- node server.js --dev",
+    "build": "vite build --outDir dist/client",
+    "lint": "eslint . --ext .js,.jsx --fix",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "react-dom": "^18.1.0",
+    "fastify": "^4.7.0",
+    "vite": "^3.1.6",
+    "@fastify/static": "^6.5.0",
+    "fs-extra": "^10.0.0",
+    "klaw": "^4.0.1",
+    "middie": "^5.2.0"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
+    "@vitejs/plugin-react": "^1.3.2",
+    "eslint": "^7.32.0",
+    "eslint-config-standard": "^16.0.2",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^4.3.1",
+    "eslint-plugin-react": "^7.29.4"
+  },
+  "devInstall": {
+    "local": {
+      "@fastify/vite": "^3.0.1"
+    },
+    "external": {
+      "react-dom": "^18.1.0"
+    }
+  }
+}
diff --git a/examples/react-vanilla-spa/server.js b/examples/react-vanilla-spa/server.js
@@ -0,0 +1,24 @@
+import Fastify from 'fastify'
+import FastifyVite from '@fastify/vite'
+
+export async function main (dev) {
+  const server = Fastify()
+
+  await server.register(FastifyVite, {
+    root: import.meta.url,
+    dev: dev ?? process.argv.includes('--dev'),
+    spa: true,
+  })
+
+  server.get('/', (req, reply) => {
+    reply.html()
+  })
+
+  await server.vite.ready()
+  return server
+}
+
+if (process.argv[1] === new URL(import.meta.url).pathname) {
+  const server = await main()
+  await server.listen({ port: 3000 })
+}
diff --git a/examples/react-vanilla-spa/server.test.js b/examples/react-vanilla-spa/server.test.js
@@ -0,0 +1,6 @@
+import { test } from 'vitest'
+import { makeIndexTest } from '../../testing.js'
+import { main } from './server.js'
+
+test('render index page in development', makeIndexTest({ main, dev: true }))
+test('render index page in production', makeIndexTest({ main }))
diff --git a/examples/react-vanilla-spa/vite.config.js b/examples/react-vanilla-spa/vite.config.js
@@ -0,0 +1,14 @@
+import { resolve, dirname } from 'path'
+import viteReact from '@vitejs/plugin-react'
+
+const path = new URL(import.meta.url).pathname
+const root = resolve(dirname(path), 'client')
+
+const plugins = [
+  viteReact({ jsxRuntime: 'classic' }),
+]
+
+export default {
+  root,
+  plugins,
+}
diff --git a/examples/react-vanilla-spa/vitest.config.js b/examples/react-vanilla-spa/vitest.config.js
@@ -0,0 +1,9 @@
+import { dirname } from 'node:path'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  root: dirname(new URL(import.meta.url).pathname),
+  test: {
+    testTimeout: 15000,
+  },
+})
diff --git a/packages/fastify-vite/config.js b/packages/fastify-vite/config.js
@@ -106,6 +106,7 @@ async function configure (options = {}) {
   const root = resolveRoot(options.root)
   const dev = typeof options.dev === 'boolean' ? options.dev : defaultConfig.dev
   const [vite, viteConfig] = await resolveViteConfig(root, dev)
+  const resolveBundle = options.spa ? resolveSPABundle : resolveSSRBundle
   const bundle = await resolveBundle({ dev, vite })
   const config = Object.assign(defaultConfig, {
     ...options,
@@ -179,7 +180,7 @@ async function resolveViteConfig (root, dev) {
   return [null, null]
 }
 
-async function resolveBundle ({ dev, vite }) {
+async function resolveSSRBundle ({ dev, vite }) {
   const bundle = {}
   if (!dev) {
     bundle.dir = resolve(vite.root, vite.build.outDir)
@@ -195,6 +196,21 @@ async function resolveBundle ({ dev, vite }) {
   return bundle
 }
 
+async function resolveSPABundle ({ dev, vite }) {
+  const bundle = {}
+  if (!dev) {
+    bundle.dir = resolve(vite.root, vite.build.outDir)
+    const indexHtmlPath = resolve(bundle.dir, 'client/index.html')
+    if (!exists(indexHtmlPath)) {
+      return
+    }
+    bundle.indexHtml = await read(indexHtmlPath, 'utf8')
+  } else {
+    bundle.manifest = []
+  }
+  return bundle
+}
+
 async function resolveBuildCommands (root, renderer) {
   const [vite] = await resolveViteConfig(root)
   return [
@@ -205,7 +221,8 @@ async function resolveBuildCommands (root, renderer) {
 
 module.exports = {
   configure,
-  resolveBundle,
+  resolveSSRBundle,
+  resolveSPABundle,
   resolveBuildCommands,
 }
 module.exports.default = module.exports
diff --git a/packages/fastify-vite/mode/production.js b/packages/fastify-vite/mode/production.js
@@ -25,8 +25,13 @@ async function setup (config) {
 
   const clientDist = resolve(config.bundle.dir, 'client')
   const serverDist = resolve(config.bundle.dir, 'server')
-  if (!exists(clientDist) || !exists(serverDist)) {
-    throw new Error('No distribution bundle found.')
+  if (!exists(clientDist)) {
+    throw new Error('No client distribution bundle found.')
+  }
+
+
+  if (!config.spa && !exists(serverDist)) {
+    throw new Error('No server distribution bundle found.')
   }
   // We also register fastify-static to serve all static files
   // in production (dev server takes of this)