Prepare applications for deployment via CI
A common approach to deploying applications is via docker containers. Some applications can be built into bundles that are environment agnostic, while others depend on OS-specific packages being installed. For these situations, having just bundled code is not enough, we also need to have package.json.
Nx supports the generation of the project's package.json by identifying all the project's dependencies. The generated package.json is created next to the built artifacts (usually at dist/apps/name-of-the-app).
Additionally, we should generate pruned lock file according to the generated package.json. This makes the installation in the container significantly faster as we only need to install a subset of the packages.
Nx offers two varieties of Webpack plugin which can be used to generate package.json.
Basic Plugin Configuration
@nx/webpack/plugin plugin is compatible with a conventional webpack configuration setup which offers a smooth integration with the Webpack CLI. It is configured in the plugins array in nx.json.
1{
2 "plugins": [
3 {
4 "plugin": "@nx/webpack/plugin",
5 "options": {
6 "buildTargetName": "build",
7 "serveTargetName": "serve",
8 "serveStaticTargetName": "serve-static",
9 "previewStaticTargetName": "preview"
10 }
11 }
12 ]
13}
14Where build, serve, serve-static and preview in conjunction with your webpack.config.js are the names of the targets that are used to build, serve, and preview the application respectively.
NxWebpackPlugin
The NxWebpackPlugin plugin takes a main entry file and produces a bundle in the output directory as defined in output.path. You can also pass the index option if it is a web app, which will handle outputting scripts and stylesheets in the output file.
To generate a package.json we would declare it in the plugin options.
1const { NxWebpackPlugin } = require('@nx/webpack');
2const { join } = require('path');
3
4module.exports = {
5 output: {
6 path: join(__dirname, '../../dist/apps/acme'),
7 },
8 devServer: {
9 port: 4200,
10 },
11 plugins: [
12 new NxWebpackPlugin({
13 tsConfig: './tsconfig.app.json',
14 compiler: 'swc',
15 main: './src/main.tsx',
16 index: '.src/index.html',
17 styles: ['./src/styles.css'],
18 generatePackageJson: true,
19 }),
20 ],
21};
22The NxWebpackPlugin is optional, and you can bring your own Webpack configuration without using it or any plugins from @nx/webpack. However, you will need to generate package.json and the lock file manually. This can be done using the createPackageJson and createLockFile functions from @nx/devkit but it is recommended to use the NxWebpackPlugin for a smoother experience.
Programmtic usage
If you using a custom setup that does not support generatePackgeJson or generateLockfile flags, you can still use Nx to generate package.json and the lock file. The createPackageJson and createLockFile functions are exported from @nx/devkit:
1// TODO: add example
2Vite is a build tool is great for development, and we want to make sure that it is also great for production. We are working on a plugin for Vite that will has parity with the Webpack plugin. Stay tuned for updates.