Developers working with modern JavaScript frameworks are always looking for tools that streamline their workflow. Vite has emerged as a popular build tool, offering fast bundling and hot module replacement. When combined with SolidJS, a reactive UI library, it creates a powerful environment for rapid development. This article guides you through setting up Vite with SolidJS to maximize productivity and enjoy seamless hot reloading.

Prerequisites

  • Node.js installed on your machine (version 14 or higher)
  • Basic knowledge of JavaScript and npm
  • Understanding of SolidJS fundamentals

Setting Up the Project

Create a new project directory and initialize it with npm:

mkdir solidjs-vite-project

cd solidjs-vite-project

npm init -y

Installing Dependencies

Install Vite, SolidJS, and related plugins:

npm install solid-js vite @vitejs/plugin-solid

Configuring Vite

Create a vite.config.js file in your project root with the following content:

import { defineConfig } from 'vite';
import solidPlugin from '@vitejs/plugin-solid';

export default defineConfig({
  plugins: [solidPlugin()],
  server: {
    hot: true,
  },
});

Creating the Application

Set up your project structure:

mkdir src

Create an index.html file inside src with the following content:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>SolidJS with Vite</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.jsx"></script>
</body>
</html>

Create main.jsx inside src:

import { render } from 'solid-js/web';
import App from './App';

render(() => , document.getElementById('app'));

And create App.jsx:

import { createSignal } from 'solid-js';

function App() {
  const [count, setCount] = createSignal(0);

  return (
    <div>
      <h1>SolidJS & Vite Example</h1>
      <p>Count: {count()}</p>
      <button onClick={() => setCount(count() + 1)}>Increment</button>
    </div>
  );
}

export default App;

Running the Development Server

Start the Vite development server with hot module replacement:

npx vite

Open your browser and navigate to http://localhost:3000. You should see your SolidJS app with live updates as you modify the code.

Benefits of Using Vite with SolidJS

  • Fast Startup: Vite leverages native ES modules for quick server start.
  • Hot Module Replacement: Instant updates without full reloads.
  • Optimized Builds: Efficient production bundling with minimal configuration.
  • Developer Experience: Simplified setup and real-time feedback enhance productivity.

Conclusion

Integrating Vite with SolidJS provides a streamlined development environment that accelerates your workflow. With fast server startup and hot reloading, you can focus more on building your application rather than managing build processes. Follow the steps outlined above to set up your project and enjoy a modern, efficient development experience.