question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Better SSR support [watch build]

See original GitHub issue

Feature

I am using vite to build an SSR website, during which I tried to implement a nuxt-like, faster SSR framework, but I need better support.

I wish build and ssrBuild can support watch mode, or there be watchBuild and watchSSRBuild functions

SSR inevitably requires real-time compilation of products (Client & Server)

In my test.

First, a form of fileWatcher(files, () => build().then(() => restart())) is used to track file changes and execute compile, but this will do a full build without cache support, which takes a long time.

const watcher = chokidar.watch(path.resolve(__dirname, 'src'), {
  ignored: [/node_modules/, /\.git/],
  awaitWriteFinish: {
    stabilityThreshold: 100,
    pollInterval: 10
  }
})

watcher.on('change', info => {
  ssrBuild({/* ... */})
})

Second. If you use rollup.watch to compile, you can quickly update the product and achieve a better development experience.

const rullupConfig = {
    input: path.resolve(root, entry),
    preserveEntrySignatures: false,
    ...rollupInputOptions,
    // ...
}

 const watcher = rollup.watch({
    ...rullupConfig,
    output: {
        // ...
        ...rollupOutputOptions
    },
    watch: {
        ...rollupWatchOptions
        chokidar: chokidar.watch(/* watchPath */, {
            ignored: [/node_modules/, /\.git/],
            awaitWriteFinish: {
                stabilityThreshold: 100,
                pollInterval: 10
            }
        }),
    }
})


watcher.on('event', event => {
    if (event.code === 'BUNDLE_END') {
        doRestart()
        // emit something...
        // write files...
        // ...
    }
});

However, the implementation of the build function in the vite src/node/build/index.ts:build file is too complex and deeply coupled, and I have to re-implement it externally, so I hope this can be extracted as a single function.

links

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:14
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

4reactions
surmon-chinacommented, Oct 28, 2020

I can submit a pull request to implement this feature.

@yyx990803 @antfu @underfin

3reactions
TechAkayycommented, Nov 1, 2020

vite build --watch (defaulted to dev mode) will be very invaluable…

Similar to… @surmon-china

  • Snowpack (snowpackjs/snowpack#782) &
  • Vue-Cli (vuejs/vue-cli#1317)

vite build --watch --hmr like snowpack (https://github.com/snowpackjs/snowpack/issues/1002) would be the ultimate…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Server-Side Rendering - Vite
Vite provides built-in support for server-side rendering (SSR). The Vite playground contains example SSR setups for Vue 3 and React, which can be...
Read more >
Server-Side Rendering (SSR) - Snowpack
snowpack build --watch - Serve files out of the static build directory. startServer({ ... }) - Serve files on-demand via Snowpack's JavaScript API....
Read more >
Best practices to increase the speed for Next.js apps
This framework allows developers to build powerful web apps with JavaScript ... SSR will also improve application performance, especially on ...
Read more >
Asset Bundling (Vite) - The PHP Framework For Web Artisans
When building applications with Laravel, you will typically use Vite to ... You can learn more about Vite's CSS support within the Vite...
Read more >
Monitoring - AWS Amplify Hosting
For more information about how the CloudWatch service works, see the Amazon ... An alarm watches a single CloudWatch metric and sends an...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found