Replit's mission is to make programming more accessible. We give people free cloud computing so they can build apps on any device. One of the most popular ways to build applications on the Internet today is React. However, historically React tools have been slow on Replit. While the JavaScript ecosystem has created great tools for professional developers, many of the most popular ones, such as Create React App and Webpack, are becoming more complex and inefficient.
Luckily, we've seen the JavaScript community grasp this challenge and move on to building faster, more efficient tools, which means we can finally deliver the experience our users have come to expect from us.
This new experience builds on Vite , a JavaScript build tool that enables fast and cost-effective development. Vite comes with a number of features including HMR or Hot Module Replacement, a build command that integrates your tools with Rollup , and built-in TypeScript and JSX support.
Vite speeds up development with React. It speeds up a lot. With HMR, the changes you make are rendered in milliseconds, dramatically speeding up UI prototyping. With that in mind, we decided to rewrite our React template using Vite and were shocked to see how much faster it got. This is how it looks compared to our old CRA template:
Over the past few weeks, our new React template has helped our designers prototype complex UI components and have enabled many of our engineering candidates to create an entire web application in just a few hours on our (virtual) sites. When you see this in action, it's easy to see why:
How it works
Vite works by treating your source code and your dependencies differently. Unlike your source code, dependencies don't change as often during development. Vite takes advantage of this fact by pre- bundling your dependencies with esbuild . Esbuild is a JS builder written in Go that bundles dependencies 10 to 100 times faster than JavaScript based alternatives like Webpack and Parcel.
It then serves up your source code via native ES or ESM modules , which allows the browser to handle the actual bundle.
Finally, Vite supports HMR, which ensures that when you edit a file, only the relevant modules are replaced, rather than rebuilding the entire bundle, which causes a page reload and resets the state. Unlike other builders, Vite does HMR on its own ES modules, which means it only needs to invalidate the affected modules when editing the file. This ensures that update times are consistently fast and not scale linearly as your application grows.
Let's start
To get started, simply fork our React template or select React.js from the dropdown when creating a new replay .
Vite is also framework agnostic, so if you don't like React, you can also use our Vue and Vanilla JS templates .
We hope this will help you bring your ideas to life even faster, and we look forward to seeing what you create!