Develop Reference

How do I bundle my Node.js code into a single file using Vite.js?

I am trying to bundle my Node.js server-side code (Koa app) into a single file which is what Webpack produces when I use the target as node. This is what ncc - node.js compiler collection also achieves.
I am now using Vite for my next project. I am able to bundle the code by using the SSR bundling feature provided by Vite. But I am not able to bundle third-party dependencies into this single file excluding core/built-in node.js modules. This is my Vite build script:
import path from 'path';
import { build } from 'vite';
import builtinModules from 'builtin-modules';
async function main() {
const result = await build({
mode: 'production',
appType: 'custom',
root: path.join(process.cwd(), 'backend'),
ssr: {
format: 'esm',
target: 'node',
// By default Vite bundles everything except the one we pass via `external` array.
external: builtinModules
},
build: {
manifest: false,
rollupOptions: {
input: 'backend/main.mjs',
output: {
assetFileNames: 'bundle.js'
}
},
outDir: '../dist/backend',
ssr: true,
emptyOutDir: true
},
plugins: [],
});
}
main();
In the above code, builtinModules is simply the string array of all the core node.js modules:
// builtinModules
[
'assert', 'async_hooks',
'buffer', 'child_process',
'cluster', 'console',
'constants', 'crypto',
'dgram', 'diagnostics_channel',
'dns', 'domain',
'events', 'fs',
'http', 'http2',
'https', 'inspector',
'module', 'net',
'os', 'path',
'perf_hooks', 'process',
'punycode', 'querystring',
'readline', 'repl',
'stream', 'string_decoder',
'timers', 'tls',
'trace_events', 'tty',
'url', 'util',
'v8', 'vm',
'worker_threads', 'zlib'
]
For my original source code:
// main.mjs
import path from 'path';
import Koa from 'koa';
async function main() {
console.log('Source folder', path.join(__dirname, 'src'));
const app = new Koa();
app.listen(3000);
}
main();
The produced output for the above Vite build configuration is:
// bundle.js
import path from "path";
import Koa from "koa";
async function main() {
console.log("Source folder", path.join(__dirname, "src"));
const app = new Koa();
app.listen(3e3);
}
main();
Ideally, I expected that it would bundle the koa package in the final output leaving behind only native path module. But that's not the case.
So, how do I enable bundling of my entire backend/Node.js source code compile into single file leaving only core node.js modules as external as Node.js is the runtime for my code? The vite server options also provide the noexternal option but setting it to the true works only for webworker like runtime where none of the built-in node modules are available.

Latest vite versions are using preloading you should tweak some rollup options to disable code splitting
import { defineConfig } from 'vite' // 2.8.0
import react from '#vitejs/plugin-react' // 1.0.7
export default defineConfig ({
plugins: [react()],
build: {
rollupOptions: {
output: {
manualChunks: {}
},
},
},
})

NestJS Application won't hot reload after using dotenv package

I try to configure hot reload on my Nestjs application using this article: https://docs.nestjs.com/recipes/hot-reload
I followed exactly the instructions in the first section ("With CLI") but it fails for me. But I do know the reason, just don't know how to resolve this issue. My hot reload script in package.json is exactly as the article says, except 1 change:
"start:dev": "dotenv -e ./envs/.env.development -e ../../prisma/.env.development nest build --watch",
This is my script. As you can see, I apply the process with some environment variables. When running in this way, application boots fine, but Hot Reload won't work. When booting only with "start:dev": "nest build --watch",
It runs with Hot Reload. (Note that I configure webpack in nest-cli.json file, this is why it missing in script statement).
Anyone could tell why applying my own envs makes this issue?
webpack.config.js file:
const nodeExternals = require('webpack-node-externals');
const { RunScriptWebpackPlugin } = require('run-script-webpack-plugin');
const configuration = (options, webpack) => ({
...options,
entry: ['webpack/hot/poll?100', options.entry],
externals: [
nodeExternals({
allowlist: ['webpack/hot/poll?100'],
}),
],
plugins: [
...options.plugins,
new webpack.HotModuleReplacementPlugin(),
new webpack.WatchIgnorePlugin({
paths: [/\.js$/, /\.d\.ts$/],
}),
new RunScriptWebpackPlugin({ name: options.output.filename, autoRestart: false }),
],
});
module.exports = configuration;
nest-cli.json file:
{
"$schema": "https://json.schemastore.org/nest-cli",
"collection": "#nestjs/schematics",
"sourceRoot": "src",
"compilerOptions": {
"webpack": true,
"webpackConfigPath": "./webpack.config.js",
"deleteOutDir": true
}
}
main.ts file:
declare const module: any;
async function bootstrap() {
const prisma = new PrismaClient();
// * https://github.com/prisma/prisma/issues/5430#issuecomment-1098715558
await prisma.$runCommandRaw({
createIndexes: 'RefreshToken',
indexes: [
{
key: {
createdAt: 1,
},
name: 'Refresh Token Index',
expireAfterSeconds: JWT_REFRESH_TOKEN_DURATION_MINUTES * 60,
},
],
});
const app = await NestFactory.create(AppModule);
if (module.hot) {
module.hot.accept();
module.hot.dispose(() => app.close());
}
const port = config.get('port', { infer: true });
await app.listen(port);
}
bootstrap();
Ny env file:
NODE_ENV="development"
PORT="3000"

Serve static images in development with Vite using new URL

I currently have a React App with Vite 2.7.1. I'm having trouble displaying static local images in Vite while in development.This works in production.
I'm using:
new URL(path, import.meta.url);
And I've tried:
new URL(path, import.meta.url).href;
Then I'd consume it like:
const wavesBg = new URL(
'../../../../resources/images/background-waves.svg', import.meta.url
);
<img src={wavesBg } />
I don't know if this is a file server problem, but it does map the address correctly!
Here's my vite.config.ts file:
export default defineConfig({
plugins: [
viteCommonjs(),
// https://www.npmjs.com/package/#vitejs/plugin-react
react(),
tsconfigPaths(),
eslintPlugin(),
],
resolve: {
alias: {
stream: 'stream-browserify',
'~': path.resolve(__dirname, 'src'),
},
},
server: {
open: true,
fs: {
allow: [
// https://vitejs.dev/config/#server-fs-allow
searchForWorkspaceRoot(process.cwd()),
// This is where I'm serving my images.
'/libs/components/src/resources/images',
],
},
},
optimizeDeps: {
/// Omitted
},
// esbuild: { jsxInject: `import React from 'react'` },
});
Note. Vite is currently configured in a monorepo fashion served using the NX CLI.

Vue CLI 3 prerender-spa-plugin displaying blank pages and same index.html

I've run "npm run build" and the output of my file folders are the following:
Then if I dig in deeper, all the page folders have an index.html file containing:
The code for my vue.config.js and the prerender-spa-plugin is:
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html',
inject: false
}),
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, './dist'),
routes: ['/', '/om-guldbaek', '/aktiviteter', '/foreninger', '/begivenheder', '/gdpr', '/institutioner', '/login', '/nyheder', '/kontakt', '/registreringer'],
})
],
},
};
When I publish the website to Netlify with GitHub I get a blank website with no errors in the console. If it helps you can go to: https://guldbaekby.netlify.com
Any help is appreciated, thanks

webpacker not working correctly on heroku

I'm in the middle of upgrading an app from rails 3.2 to rails 4.2 using webpacker gem everything works fine in localhost I have compiled my assets and run
RAILS_ENV=production rails s
but I have errors when pushing to heroku it compiles all assets even the packs but generates errors in js, I use angular in many parts of the app and the error is related with dependency injection
check link

The main problem here was the unglifier gem I had to coment the uglifier
#config.assets.js_compressor = :uglifier
The next part was the configuration for webpack in production that look like this:
const webpack = require('webpack')
const { basename, dirname, join, relative, resolve } = require('path')
const merge = require('webpack-merge')
const CompressionPlugin = require('compression-webpack-plugin')
const sharedConfig = require('./shared.js')
const { env, settings, output, loadersDir } = require('./configuration.js')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ManifestPlugin = require('webpack-manifest-plugin')
module.exports = merge(sharedConfig, {
output: { filename: '[name]-[chunkhash].js' },
devtool: false,//'source-map',
stats: 'normal',
plugins: [
new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
new ExtractTextPlugin({
filename: '[name]-[hash].css',
allChunks: true
}),
new ManifestPlugin({
publicPath: output.publicPath,
writeToFileEmit: true
})
],
resolve: {
extensions: settings.extensions,
modules: [
resolve(settings.source_path),
'node_modules'
],
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
},
resolveLoader: {
modules: ['node_modules']
}
})
Now I can deploy and the assets are working.