How to bundle and serve under WebApi server instead?

[leolorenzoluis]

Hi Jordan,

I'm probably missing something basic, but I'm trying to bundle the SPA and serve it under WebApi server. It looks like Grapnel is not being bundled?

When I ran npm run build I see it is getting transformed though.

transforming (519) node_modules/@microsoft/fast-foundation/dist/esm/checkboNon-existent export 'Router' is imported from node_modules/grapnel/dist/grapnel.js
✓ 556 modules transformed.

When I load index.html I get the following:

Initializing Grapnel Router
index.5ae6b47c.js:33 Uncaught ReferenceError: Grapnel is not defined
    at Ce.factory (index.5ae6b47c.js:33:30)
    at get Value [as Value] (index.5ae6b47c.js:1:2633)
    at Dh (index.5ae6b47c.js:33:156)
    at index.5ae6b47c.js:132:24
    at index.5ae6b47c.js:1:23
    at index.5ae6b47c.js:150:27

[leolorenzoluis]

Updating vite.conf to the following will fix it.

import { splitVendorChunkPlugin } from 'vite';

 plugins: [mkcert(),splitVendorChunkPlugin()]

[JordanMarr]

Did that work for you? I still get the Grapnel is not defined error after building with the plugin.

[leolorenzoluis]

Yes

[JordanMarr]

That's curious. The splitVendorChunkPlugin() plugin does add a vendor.3b74f9d1.js file and references it in the generated index.html file as

  <script type="module" crossorigin src="/assets/index.2e84a15d.js"></script>
  <link rel="modulepreload" href="/assets/vendor.3b74f9d1.js">
  <link rel="stylesheet" href="/assets/index.dfa90114.css">

But there is no mention of "Grapnel" in the vendor file.

[JordanMarr]

Upgrading vite to v3.0.0-beta.5 fixed the issue.

Also, I updated the template so that npm run build now copies the dist contents to the WebApi/wwwroot folder (and added WebApi/wwwroot folder to .gitignore).

[leolorenzoluis]

Hmm, interesting. I have "vite": "^2.6.1",. Thanks for updating the template! Really helpful to kickstart.

post build - I pulled your changes but it looks like it's for Windows :( I'm on Mac.

I forgot to mention this is in vite config too. Didn't check if grapnel > 2 includes node_modules by default.

import mkcert from 'vite-plugin-mkcert'
import { splitVendorChunkPlugin } from 'vite';
export default {
    // config options
    build: {
        commonjsOptions: {
            include: ["/node_modules"]
        }
    },
    server: {
        https: true,
        proxy: {
            '/signin': {
                target: 'https://localhost:5001/',
                changeOrigin: true,
                secure: false,
                ws: true,
            },
            '/signout': {
                target: 'https://localhost:5001/',
                changeOrigin: true,
                secure: false,
                ws: true,
            },
            '/api': {
                target: 'https://localhost:5001/',
                changeOrigin: true,
                secure: false,
                ws: true,
            }
        }
    },

    plugins: [mkcert(),splitVendorChunkPlugin()]
}

[JordanMarr]

post build - I pulled your changes but it looks like it's for Windows :( I'm on Mac.

I removed the NPM prebuild/postbuild events and updated the readme Build section to utilize the FAKE build tasks instead.

Thanks for the updated config. Your build section with the commonjsOptions fixed it, so I reverted back to the non-beta version of vitejs. Although now I curious to knwo what change they made in the vite 3 beta that made it work automatically. Maybe they are doing some detection. (I will have to do some reading.)