Migrating from Razzle to Vite: A Journey to Faster Builds and Greater Flexibility

Photo by Iva Rajović on Unsplash

In the fast-paced world of web development, optimizing build processes and enhancing development flexibility are paramount. Our recent migration from Razzle to Vite, coupled with a shift from EC2 to S3/CDN hosting, has revolutionized our workflow. Here’s a detailed account of our journey, the challenges we faced, and the significant improvements we achieved.

The Initial Setup

Initially, we built our React application using Razzle and hosted it on Amazon EC2. For local development, we utilized Docker to host the application, facilitating hot module replacement (HMR) and ensuring consistency across environments. However, all backend servers ran locally, leading to several challenges:

• Time-Consuming Setup: Setting up the development environment was time-consuming.
• Limited Flexibility: We struggled to point the local UI code to different backend servers for testing and debugging.

JAMSTACK

Jamstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. The term “Jamstack” stands for:

• JavaScript: Dynamic functionalities are handled by JavaScript, running entirely on the client-side.
• APIs: All server-side processes or database actions are abstracted into reusable APIs, accessed over HTTP with JavaScript.
• Markup: Websites are prebuilt at build time, usually using a static site generator.

Key Characteristics of Jamstack

1. Decoupling: Frontend is decoupled from the backend, allowing developers to focus on the user interface while APIs handle backend functionalities.
2. Pre-rendering: Pages and posts are pre-rendered and served as static files, improving performance and security.
3. Enhanced Performance*: With content delivered via CDNs, the delivery speed is significantly improved.
4. Scalability: Simplified scaling as static files can be served from a CDN without the need for managing servers.
5. Security: Reduced risk as there is no server or database directly exposed to the internet.

Jamstack Architecture

CDN: Content Delivery Networks ensure fast delivery of static files by caching them in various locations around the world.

Services: APIs communicate with various backend services such as databases, authentication services, and payment gateways.

In the new Architecture, we will have requests divided in broadly two ways,

• Requests with /api path which requires AuthToken to access our services.
• Other routes /* which can be served without any restriction from S3 directly, specifically in S3 it will point to the folder called /live

The Migration to Vite

To overcome these challenges, we decided to migrate our application to Vite, a modern build tool that offers a faster and more flexible development experience. Here’s how we approached the migration:

Lift and Shift

Instead of modifying the existing repository, we adopted a lift-and-shift approach, creating a new repository for the Vite-based build. This allowed us to:

• Minimize Risks: Isolate the migration process from the existing codebase, reducing the risk of disrupting ongoing development.
• Streamline Development: Work on the new setup without legacy constraints.

Installing the vite

bun create vite my-vue-app --template react-ts

vite config

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, 'env', 'VITE_');
  return {
      envDir: './env/',
      define: {
        global: {},
      },
      optimizeDeps: {},
      plugins: [react(), tsconfigPaths(), nodePolyfills()],
  },

Connecting Local Development to Remote Servers

A key aspect of our migration was enabling local development environments to connect to remote servers. This setup provided several advantages:

• Unified Testing Environment: Developers could test the local UI with different backend servers, ensuring consistency and reducing discrepancies between environments.
• Improved Debugging: Connecting to remote servers made it easier to debug issues that were specific to certain backend configurations.
• Enhanced Collaboration: Teams could work with the same backend services, fostering better collaboration and quicker issue resolution.

server: {
    proxy: {
      '/api/v3': {
        target: env.VITE_PROXY_URL || 'http://localhost:80',
        changeOrigin: true,
      },
      '/api/v2': {
        target: env.VITE_PROXY_URL || 'http://localhost:80',
        changeOrigin: true,
      },
    },
    host: true,
},

Moving from EC2 to S3/CDN

Deploying our application to Amazon S3 and serving it through a Content Delivery Network (CDN) brought several benefits:

• Improved Performance: CDNs cache content globally, ensuring faster load times for users.
• Scalability: S3 and CDNs handle large volumes of traffic seamlessly.
• Enhanced Flexibility: We could connect the UI to any backend server, facilitating easier testing and debugging.

Adopting GitHub and GitHub Actions

As part of the migration, we also moved from Bitbucket to GitHub. This transition enabled us to leverage GitHub Actions for our CI/CD pipelines, resulting in:

• Faster Builds: GitHub Actions provided more efficient and quicker build processes.
• Simplified Workflows: Seamless integration with GitHub repositories streamlined our development workflows.

Switching from Jest to Vitest

To complement our new build tool, we migrated from Jest to Vitest. This change offered several advantages:

• Better Integration: Vitest integrates smoothly with Vite, providing a unified development experience.
• Performance Gains: Vitest’s speed and efficiency aligned with our goals for faster builds and tests.

test: {
      retry: 2,
      css: false,
      globals: true,
      watch: false,
      environment: 'happy-dom',
      setupFiles: './src/setup-test.ts',
      globalSetup: './src/global-setup.ts',
      coverage: {
        provider: 'v8',
        exclude: [
          '**/{karma,rollup,tailwind,vite,vitest,jest,ava,postcss,nyc,cypress,commitlint,build}.config.*',
          '**/public/**',
          '**/.eslintrc.cjs',
          '**/vite-env.d.ts',
       ],
      },
   },

The Outcome

The migration to Vite, S3/CDN hosting, and the new CI/CD setup significantly improved our development process:

• Reduced Build Times: Vite’s efficient build mechanism and GitHub Actions drastically cut down our build times.
• Enhanced Developer Experience: Faster setup, HMR, and the ability to connect to any backend server made development more enjoyable and productive.
• Scalable and Reliable Deployment: Hosting on S3 and serving through a CDN ensured our application could handle high traffic with ease.

Conclusion

Our journey from Razzle to Vite, combined with a strategic move to S3/CDN hosting and GitHub, has been transformative. The new setup has not only optimized our build and deployment processes but also provided the flexibility needed to streamline development and testing. As we continue to evolve, we’re excited about the possibilities this new infrastructure brings to our projects and team.