Isolate client and server artifacts (#3758)

bin/nuxt-start

@@ -58,7 +58,8 @@ nuxt.hook('error', err => consola.fatal(err))
 const distDir = resolve(
   nuxt.options.rootDir,
   nuxt.options.buildDir || '.nuxt',
-  'dist'
+  'dist',
+  'server'
 )
 if (!fs.existsSync(distDir)) {
   consola.fatal(

lib/builder/builder.js

@@ -135,7 +135,8 @@ export default class Builder {
     await fsExtra.remove(r(this.options.buildDir))
     await fsExtra.mkdirp(r(this.options.buildDir, 'components'))
     if (!this.options.dev) {
-      await fsExtra.mkdirp(r(this.options.buildDir, 'dist'))
+      await fsExtra.mkdirp(r(this.options.buildDir, 'dist', 'client'))
+      await fsExtra.mkdirp(r(this.options.buildDir, 'dist', 'server'))
     }
 
     // Generate routes and interpret the template files

lib/builder/generator.js

@@ -14,7 +14,7 @@ export default class Generator {
 
     // Set variables
     this.staticRoutes = path.resolve(this.options.srcDir, this.options.dir.static)
-    this.srcBuiltPath = path.resolve(this.options.buildDir, 'dist')
+    this.srcBuiltPath = path.resolve(this.options.buildDir, 'dist', 'client')
     this.distPath = path.resolve(this.options.rootDir, this.options.generate.dir)
     this.distNuxtPath = path.join(
       this.distPath,
@@ -175,20 +175,6 @@ export default class Generator {
     const nojekyllPath = path.resolve(this.distPath, '.nojekyll')
     fsExtra.writeFile(nojekyllPath, '')
 
-    // Cleanup SSR related files
-    const extraFiles = [
-      'index.spa.html',
-      'index.ssr.html',
-      'server-bundle.json',
-      'vue-ssr-client-manifest.json'
-    ].map(file => path.resolve(this.distNuxtPath, file))
-
-    extraFiles.forEach((file) => {
-      if (fsExtra.existsSync(file)) {
-        fsExtra.removeSync(file)
-      }
-    })
-
     await this.nuxt.callHook('generate:distCopied', this)
   }
 

lib/builder/webpack/base.js

@@ -76,7 +76,7 @@ export default class WebpackBaseConfig {
 
   output() {
     return {
-      path: path.resolve(this.options.buildDir, 'dist'),
+      path: path.resolve(this.options.buildDir, 'dist', this.isServer ? 'server' : 'client'),
       filename: this.getFileName('app'),
       chunkFilename: this.getFileName('chunk'),
       publicPath: isUrl(this.options.build.publicPath)

lib/builder/webpack/client.js

@@ -30,7 +30,7 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
     if (this.options.build.ssr) {
       plugins.push(
         new HTMLPlugin({
-          filename: 'index.ssr.html',
+          filename: '../server/index.ssr.html',
           template: this.options.appTemplatePath,
           minify: true,
           inject: false // Resources will be injected using bundleRenderer
@@ -40,14 +40,14 @@ export default class WebpackClientConfig extends WebpackBaseConfig {
 
     plugins.push(
       new HTMLPlugin({
-        filename: 'index.spa.html',
+        filename: '../server/index.spa.html',
         template: this.options.appTemplatePath,
         minify: true,
         inject: true,
         chunksSortMode: 'dependency'
       }),
       new VueSSRClientPlugin({
-        filename: 'vue-ssr-client-manifest.json'
+        filename: '../server/vue-ssr-client-manifest.json'
       }),
       new webpack.DefinePlugin(this.env())
     )

lib/core/middleware/error.js

@@ -83,7 +83,7 @@ async function readSource(frame) {
   const searchPath = [
     this.options.srcDir,
     this.options.rootDir,
-    path.join(this.options.buildDir, 'dist'),
+    path.join(this.options.buildDir, 'dist', 'server'),
     this.options.buildDir,
     process.cwd()
   ]

lib/core/renderer.js

@@ -61,7 +61,7 @@ export default class Renderer {
   }
 
   async loadResources(_fs = fs) {
-    const distPath = path.resolve(this.options.buildDir, 'dist')
+    const distPath = path.resolve(this.options.buildDir, 'dist', 'server')
     const updated = []
 
     resourceMap.forEach(({ key, fileName, transform }) => {
@@ -206,16 +206,6 @@ export default class Renderer {
       this.useMiddleware(compression(this.options.render.gzip))
     }
 
-    // Common URL checks
-    this.useMiddleware((req, res, next) => {
-      // Prevent access to SSR resources
-      if (ssrResourceRegex.test(req.url)) {
-        res.statusCode = 404
-        return res.end()
-      }
-      next()
-    })
-
     // Add webpack middleware only for development
     if (this.options.dev) {
       this.useMiddleware(async (req, res, next) => {
@@ -248,7 +238,7 @@ export default class Renderer {
     // Serve .nuxt/dist/ files only for production
     // For dev they will be served with devMiddleware
     if (!this.options.dev) {
-      const distDir = path.resolve(this.options.buildDir, 'dist')
+      const distDir = path.resolve(this.options.buildDir, 'dist', 'client')
       this.useMiddleware({
         path: this.publicPath,
         handler: serveStatic(
@@ -479,9 +469,3 @@ export const resourceMap = [
     transform: parseTemplate
   }
 ]
-
-// Protector utility against request to SSR bundle files
-const ssrResourceRegex = new RegExp(
-  resourceMap.map(resource => resource.fileName).join('|'),
-  'i'
-)