Vuepress: Provide non-static(SPA) build

[Mactaivsh]

Feature request

I've written a component library which is not built for SSR, so there are lots of platform specific code in the library codebase.

And I use Vuepress as our library documentation, cuz its easy to write

I encountered errors when I run vuepress build, while vuepress dev is totally fine

But I do need a SPA build for deployment.

What problem does this feature solve?

Build SPA for non-static site purpose like component library documentation

What does the proposed API look like?

Vuepress build --spa or Vuepress build --non-ssr

How should this be implemented in your opinion?

Just provide a different build target

Are you willing to work on this yourself?**

As long as this opinion was taken

[ulivz]

Thanks for your interest in VuePress. but we don't have plan to support non-static HTML build.

Moreover:

I encountered errors when I run vuepress build, while vuepress dev is totally fine

Maybe you should provide the errors in this issue, feel free to continue discussion if it truly turns out to be a bug.

[Ficik]

Hi, I have pretty much the same usecase, it's internal documentation for our components, some of them is not ssr capable and build fails.

I've ended up with this hacky solution:

extendCli (cli) {
    cli
      .command('buildnossr [targetDir]', 'Build without ssr')
      .action(async (sourceDir = '.', commandOptions) => {
        const {path} = require('@vuepress/shared-utils');
        const CopyPlugin = require('copy-webpack-plugin')
        const fs = require('fs')
        const App = require('@vuepress/core/lib/node/App');
        const DevProcess = require('@vuepress/core/lib/node/dev')
        const webpack = require('webpack');

        const app = new App({
          sourceDir: path.resolve(sourceDir),
          ...{theme: '@vuepress/default'},
          ...commandOptions
        });
        await app.process();
        app.resolveCacheLoaderOptions();

        const devProcess = new DevProcess(app);
        devProcess.prepareWebpackConfig();

        const publicDir = path.resolve(sourceDir, '.vuepress/public')
        const {outDir} = app;
        if (fs.existsSync(publicDir)) {
          devProcess.webpackConfig.plugins.push(new CopyPlugin([{from: publicDir, to: outDir}]))
        }
        await new Promise((resolve, reject) => {
          webpack(devProcess.webpackConfig, (err, stats) => {
            if (err) {
              return reject(err)
            }
            resolve(stats.toJson({modules: false}))
          });
        });
      })
  }

Note that it spits out dev not a prod build (so we can use vue dev tools in deployed docs)

[r4fx]

Thanks @Ficik its working as dev mode,
but do You have an idea how to modify this code to build for production mode ?

[Ficik]

@r4fx Try devProcess.webpackConfig.mode = 'production'