SSR build for vue not output server side

[xgenvn]

Expect:

• Able to run yarn build and deploy using build output

Actual:

• Serve dist will return a blank page

Logs

• Start project using command npm init capri demo-capri -- -e vue
• Run yarn build

  yarn build
  yarn run v1.22.19
  $ vite build && vite build --ssr
  vite v2.9.13 building for production...
  ✓ 40 modules transformed.
  dist/assets/capri.ce1c56b3.svg                     1.38 KiB
  dist/preview/index.html                            1.02 KiB
  dist/index.html                                    0.65 KiB
  dist/ssr-manifest.json                             2.74 KiB
  dist/assets/index.12a53772.js                      0.23 KiB / gzip: 0.16 KiB
  dist/assets/hydrate.09f2daa6.js                    2.06 KiB / gzip: 0.96 KiB
  dist/assets/plugin-vue_export-helper.21dcd24c.js   0.09 KiB / gzip: 0.10 KiB
  dist/assets/Counter.island.d5166a1f.js             0.49 KiB / gzip: 0.34 KiB
  dist/assets/Expandable.island.718a2566.js          0.81 KiB / gzip: 0.52 KiB
  dist/assets/MediaQuery.island.fe4d450c.js          0.38 KiB / gzip: 0.29 KiB
  dist/assets/Counter.island.9a7e7aed.css            0.05 KiB / gzip: 0.07 KiB
  dist/assets/main.beb4e855.css                      0.75 KiB / gzip: 0.43 KiB
  dist/assets/main.e47b13dd.js                       24.83 KiB / gzip: 10.35 KiB
  dist/assets/Expandable.island.e8e34690.css         0.31 KiB / gzip: 0.20 KiB
  dist/assets/runtime-dom.esm-bundler.19cc2f9d.js    59.27 KiB / gzip: 23.58 KiB
  vite v2.9.13 building SSR bundle for production...
  ✓ 20 modules transformed.
  dist/main.server.js   18.57 KiB
  ✨  Done in 2.70s.

• Check output

  dist
  ├── assets
  │  ├── capri.ce1c56b3.svg
  │  ├── Counter.island.9a7e7aed.css
  │  ├── Counter.island.d5166a1f.js
  │  ├── Expandable.island.718a2566.js
  │  ├── Expandable.island.e8e34690.css
  │  ├── hydrate.09f2daa6.js
  │  ├── index.12a53772.js
  │  ├── main.beb4e855.css
  │  ├── main.e47b13dd.js
  │  ├── MediaQuery.island.fe4d450c.js
  │  ├── plugin-vue_export-helper.21dcd24c.js
  │  └── runtime-dom.esm-bundler.19cc2f9d.js
  ├── index.html
  ├── preview
  │  └── index.html
  └── ssr-manifest.json

[fgnass]

This looks like a regression in vue-router@4.1.x. When I downgrade to vue-router@4.0.x I get the expected result.

It can be fixed by changing the following line in main.server.ts:

// instead of
router.push(`http://127.0.0.1${url}`);
// do this
router.push(url);

With this change unfortunately, the handling of a base path other than / no longer works.

[xgenvn]

@fgnass Besides the issues on vue-router, a bit off-topic, can we serve from the server-side like node dist/main.server.js instead of just serving dist as static files? I saw the vite output included the main.server.js, it seems capri-js dehydrate the server entry into the static generator pipeline for static outputs. Is that correct?

[fgnass]

I'm currently working on proper SSR support in the next branch. The repo already contains two examples, one for Vercel and one for Cloudflare workers: https://github.com/capri-js/capri/tree/next/examples

For a simple Node server something like this should work:

import capri from "@capri-js/vue";
import react from "@vitejs/plugin-vue";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    vue(),
    capri({
      prerender: false, // can also be a function to selectively prerender pages
      target: {
        async build({ ssrBundle, fsutils }) {
          fsutils.copy(ssrBundle, "/path/to/somewhere.js");
        }
      },
    }),
  ],
});

[xgenvn]

@fgnass thank you for the response, I will check the branch. Close the ticket for this moment.

[eric-burel]

I seem to have the same issue with React and latest version, only after a build, I can share the private repo (it's my experiment with Plasmic) if needed

[fgnass]

Hi @eric-burel, sorry for the late reply. I just did a basic check with the current React template which uses react-router-dom 6.3.0, and it worked:

npm init capri my-react-app -- -e react
cd my-react-app
npm run build
npm run preview

If you share your repo I'll take a look!

[eric-burel]

Hey @fgnass, I've invited you to the repo. I was already using react-router-dom 6.3.0 so I don't know what happens.

I am not stuck in anyway as I can restart from scratch but if you manage to reproduce the issues, this may help you figure out some bugs.

It's private only because I was testing out Plasmic and not yet sure of which API key is public or not (the one in the repo is public according to Plasmic team), so feel free to reuse this code if you want to create a Plasmic starter.