From b7577aeae78e449539731bf4da5e64baa01386e4 Mon Sep 17 00:00:00 2001 From: Anthony Fu Date: Wed, 23 Jun 2021 20:42:41 +0800 Subject: [PATCH] feat(admin): use Vite as middleware on dev (#500) * feat(admin): use Vite as middleware on dev close #293 * chore: fix build * feat(admin): dark mode (#502) --- package.json | 6 +-- siroc.config.ts | 2 +- src/admin/{ => app}/vite.config.ts | 8 +-- src/admin/index.ts | 80 ++++++++++++++++-------------- 4 files changed, 50 insertions(+), 46 deletions(-) rename src/admin/{ => app}/vite.config.ts (82%) diff --git a/package.json b/package.json index e54ca7033..d05d37b48 100755 --- a/package.json +++ b/package.json @@ -30,14 +30,14 @@ ], "scripts": { "build": "rm -rf dist && siroc build", - "dev": "BUILD_ADMIN=true nuxt dev docs", + "dev": "ADMIN_DEV=true nuxt dev docs", "dev:nuxtjs": "nuxt dev nuxtjs.org", - "dev:admin": "vite --config src/admin/vite.config.ts", + "dev:admin": "vite --config src/admin/app/vite.config.ts", "generate": "nuxt generate --force-build docs", "generate:nuxtjs": "nuxt generate --force-build nuxtjs.org", "start": "nuxt start docs", "start:nuxtjs": "nuxt start nuxtjs.org", - "play": "BUILD_ADMIN=true nuxt dev playground", + "play": "ADMIN_DEV=true nuxt dev playground", "lint": "eslint --ext .ts,.js,.vue .", "prepare": "yarn link && yarn link docus && vue-demi-switch 3 vue3", "release": "yarn test && standard-version && git push --follow-tags && npm publish", diff --git a/siroc.config.ts b/siroc.config.ts index af87168c2..be3a7cab2 100644 --- a/siroc.config.ts +++ b/siroc.config.ts @@ -10,7 +10,7 @@ export default defineSirocConfig({ 'build:extend'() { // eslint-disable-next-line no-console console.log('📝 Building the admin app') - execSync('npx vite --config src/admin/vite.config.ts build') + execSync('npx vite --config src/admin/app/vite.config.ts build', { stdio: 'inherit' }) } } }) diff --git a/src/admin/vite.config.ts b/src/admin/app/vite.config.ts similarity index 82% rename from src/admin/vite.config.ts rename to src/admin/app/vite.config.ts index 847304d02..1f87559fd 100644 --- a/src/admin/vite.config.ts +++ b/src/admin/app/vite.config.ts @@ -1,13 +1,13 @@ -import { join, resolve } from 'path' +import { resolve } from 'path' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import WindiCSS from 'vite-plugin-windicss' import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons' import ViteComponents from 'vite-plugin-components' -import { dependencies, devDependencies } from '../../package.json' +import { dependencies, devDependencies } from '../../../package.json' const r = path => resolve(__dirname, path) -const root = join(__dirname, 'app') +const root = __dirname export default defineConfig({ root, @@ -20,7 +20,7 @@ export default defineConfig({ WindiCSS({ root, scan: { - include: [r('app/**/*')] + include: [r('**/*')] } }), ViteComponents({ diff --git a/src/admin/index.ts b/src/admin/index.ts index 2156e975c..d47cb0dda 100644 --- a/src/admin/index.ts +++ b/src/admin/index.ts @@ -1,9 +1,9 @@ -import { execSync } from 'child_process' import { join } from 'upath' import chalk from 'chalk' import { NuxtOptionsServer } from '@nuxt/types/config/server' import serveStatic from 'serve-static' import { Module } from '@nuxt/types' +import { createServer as createViteServer } from 'vite' import api from './api' export default function () { @@ -12,43 +12,6 @@ export default function () { process.options = nuxt.options process.previewUrl = 'http://localhost:4000' - addServerMiddleware({ - path: '/admin/api', - handler: api - }) - - // TODO: Implement Vite as server middleware/proxy, so we can remove this - // Build the admin - if (process.env.BUILD_ADMIN) execSync('npx vite --config src/admin/vite.config.ts build') - - this.addServerMiddleware({ - path: '/admin/', - handler: serveStatic(join(__dirname, 'app/dist')) - }) - - // TODO: Implement Vite as server middleware/proxy - // instead of using the built version. - /* if (process.env.ADMIN_DEV && false) { - // Start the admin in development - const viteServer = await createServer({ - configFile: false, - ...viteConfig - }) - await viteServer.listen() - const viteUrl = `http://localhost:${viteServer.config.server.port}` - - // TODO: handle when Array syntax - const proxy = (this.options.proxy = this.options.proxy || {}) - proxy['/admin/'] = { - target: viteUrl, - pathRewrite: { - '^/admin/': '/' - } - } - - this.requireModule('@nuxtjs/proxy') - } */ - // Add runtime plugin if (options.dev) this.options.plugins.push(require.resolve(join(__dirname, '/runtime/plugin'))) @@ -60,4 +23,45 @@ export default function () { chalk.bold('📝 Admin: ') + chalk.underline.yellow(`${process.previewUrl}/admin/`) ) }) + + if (process.env.ADMIN_DEV) { + // use Vite as middleware + const server = createViteServer({ + root: join(__dirname, 'app'), + server: { + middlewareMode: 'html' + }, + plugins: [ + { + name: 'docus:admin-api', + configureServer(server) { + server.middlewares.use('/api', api) + } + } + ] + }) + + nuxt.hook('render:setupMiddleware', async () => { + const middleware = (await server).middlewares + + // remove Vite's base middleware since it's already handled by connect route + // it's right before '/__open-in-editor' middleware + const viteBaseMiddlewareIndex = middleware.stack.findIndex(i => i.route === '/__open-in-editor') - 1 + if (viteBaseMiddlewareIndex >= 0) { + middleware.stack.splice(viteBaseMiddlewareIndex, 1) + } + + nuxt.server.app.use('/admin/', middleware) + }) + } else { + // use built dist + addServerMiddleware({ + path: '/admin/', + handle: serveStatic(join(__dirname, 'app/dist')) + }) + addServerMiddleware({ + path: '/admin/api', + handler: api + }) + } }