Documentation / Build Process

Build Process

Master the build process, optimization techniques, and deployment strategies for Bimble Chat Vue

Build System Overview

Bimble Chat Vue uses Vite as its build tool, providing lightning-fast development experience and optimized production builds. The build system handles:

Fast Development

Hot Module Replacement (HMR) with instant updates

Code Splitting

Automatic code splitting for optimal loading performance

Tree Shaking

Removes unused code for smaller bundle sizes

Asset Optimization

Automatic optimization of images, CSS, and JavaScript

Dev Server
~200ms
Code Splitting
Auto
Tree Shaking
~40% saved
Build Time
~30s

Development Build

Start the development server for local development with hot reload:

1
Start Development Server

Run the development server with hot module replacement:

npm run dev
yarn dev
pnpm dev
2
Development Features

The development build includes:

  • Source Maps: Full source map support for debugging
  • Hot Module Replacement: Instant updates without page refresh
  • CSS Hot Reload: SCSS changes apply instantly
  • Error Overlay: In-browser error display
  • Fast Refresh: Vue component state preservation
Development Server Details

The development server runs on http://localhost:5173 by default and automatically opens in your browser.

Production Build

Create an optimized production build ready for deployment:

1
Build for Production

Generate optimized production files:

npm run build
yarn build
pnpm build
2
Build Output

The production build creates a dist/ directory with optimized files:

dist/ Production build output
index.html Entry HTML file
assets/ Optimized JS, CSS, and images
index-{hash}.js Main application bundle
index-{hash}.css Minified CSS styles
assets/images/ Optimized images and icons
3
Preview Production Build

Test the production build locally before deployment:

npm run preview
yarn preview
pnpm preview

Build Configuration

Customize the build process through Vite configuration:

1
Vite Configuration

The build is configured in vite.config.js:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vuetify from "vite-plugin-vuetify";

export default defineConfig({
  base: "./",
  plugins: [
    vue(),
    vuetify({
      autoImport: true,
      styles: { configFile: "src/scss/variables.scss" }
    })
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {}
    }
  },
  optimizeDeps: {
    exclude: ["vuetify"],
    entries: ["./src/**/*.vue"]
  }
});
2
TypeScript Configuration

TypeScript compilation is configured in tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true
  }
}

Build Optimization

Optimize your production builds for better performance:

Code Splitting

Automatic route-based and component-based code splitting

Built-in with Vite
Asset Minification

Automatic minification of JavaScript, CSS, and HTML

Terser & CSS Nano
Image Optimization

Optimized image loading and compression

Built-in optimization
Cache Busting

Automatic hash-based file naming for cache invalidation

Automatic hashing
Performance Tips
  • Use dynamic imports for route-based code splitting
  • Optimize images in src/assets/images/
  • Remove unused CSS with tree shaking
  • Enable compression on your web server

Deployment

Deploy your production build to various hosting platforms:

Static Hosting

Deploy to Netlify, Vercel, or other static hosting platforms

  • Zero configuration
  • Automatic deployments
  • CDN included
  • SSL certificates
GitHub Pages

Deploy directly from your GitHub repository with Actions

  • Free hosting
  • Git integration
  • Custom domains
  • Automated workflows
Docker Container

Containerize your application for any cloud platform

  • Platform agnostic
  • Scalable deployment
  • Environment consistency
  • Easy orchestration
1
Static Hosting Setup

Deploy to static hosting platforms like Netlify or Vercel:

Build for Production
Required

First, create an optimized production build:

# Build the project
npm run build

# Upload dist/ folder to your hosting platform
# Or connect your Git repository for automatic deployments
2
GitHub Pages with Actions

Set up automated deployment to GitHub Pages:

GitHub Actions Workflow
Automated

Create a workflow file for automatic deployment:

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist
3
Docker Containerization

Create a Docker container for cloud deployment:

Multi-stage Dockerfile
Production

Optimize your container with multi-stage build:

# Dockerfile
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Environment Variables

Configure environment-specific settings for different deployment stages:

1
Environment Files

Create environment-specific configuration files:

# .env.local (development)
VITE_APP_TITLE=Bimble Chat Vue (Development)
VITE_API_BASE_URL=http://localhost:3000/api
VITE_ENABLE_MOCK_API=true

# .env.production (production)
VITE_APP_TITLE=Bimble Chat Vue
VITE_API_BASE_URL=https://api.yourdomain.com
VITE_ENABLE_MOCK_API=false
2
Using Environment Variables

Access environment variables in your Vue components:

// In your Vue components
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
const appTitle = import.meta.env.VITE_APP_TITLE;
const enableMockApi = import.meta.env.VITE_ENABLE_MOCK_API === 'true';

// In your configuration files
export const config = {
  apiBaseUrl: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api',
  appTitle: import.meta.env.VITE_APP_TITLE || 'Bimble Chat Vue',
  enableMockApi: import.meta.env.VITE_ENABLE_MOCK_API === 'true'
};

Troubleshooting

Build Fails with Memory Issues

Issue: Build process runs out of memory on large projects.

Solution:

# Increase Node.js memory limit
NODE_OPTIONS="--max-old-space-size=4096" npm run build

# Or in package.json scripts
"build": "NODE_OPTIONS='--max-old-space-size=4096' vite build"
Assets Not Loading in Production

Issue: Static assets return 404 errors in production.

Solution:

  • Check the base configuration in vite.config.js
  • Ensure assets are imported correctly: import logo from '@/assets/logo.svg'
  • Use relative paths for deployment in subdirectories
Large Bundle Size

Issue: Production bundle is larger than expected.

Solution:

  • Analyze bundle with npm run build -- --sourcemap
  • Use dynamic imports for large components
  • Remove unused dependencies and code
  • Optimize images and assets

What's Next?

Now that you understand the build process, explore these deployment options:

Development Setup

Configure your development environment
Themes & Colors

Customize the visual appearance
State Management

Understand application state structure