r4nu54/cloud-class

01 Production bundle

In this example we are going to create a production bundle using vite.

We will start from 00-boilerplate.

Steps to build it

• npm install to install previous sample packages:

npm install

First, we will check the current vite config

./vite.config.ts

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath } from 'node:url';

export default defineConfig({
  envPrefix: 'PUBLIC_',
  plugins: [
    react({
      babel: {
        plugins: ['@emotion'],
      },
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
});

Vite env variables

We can split vendor chunks if we want:

./vite.config.ts

- import { defineConfig } from 'vite';
+ import { defineConfig, splitVendorChunkPlugin } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath } from 'node:url';

export default defineConfig({
  envPrefix: 'PUBLIC_',
  plugins: [
    react({
      babel: {
        plugins: ['@emotion'],
      },
    }),
+   splitVendorChunkPlugin(),
  ],
...
});

Let's add a different env variables for production:

./.env.production

PUBLIC_ORGANIZATION=facebook

Now, we can add the build command:

./package.json

...
  "scripts": {
    "start": "run-p -l type-check:watch start:dev",
    "start:dev": "vite --port 8080",
+   "build": "npm run type-check && npm run clean && npm run build:prod",
+   "build:prod": "vite build",
    "type-check": "tsc --noEmit --preserveWatchOutput",
    ...
  },

Run it:

npm run build

Search env variable value in the production bundle.

Let's try to run the production bundle:

cd dist
npx lite-server

About Basefactor + Lemoncode

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend