Setting Up a Landing Page Project with Vite

In recent years, the web development eco-system have made a massive breakthrough! Thanks to “Vite”, the fast and optimized web bundler, now we can scaffold and optimize all kinds of web project and assets. From full-fledged web applications using React, Vue, etc, to simple marketing landing pages.

Why Vite?

A bundler is a tool that takes all your code files - HTML, JavaScript, CSS, images, etc. - and combines them into optimized files that browsers can efficiently load. Traditional bundlers like Webpack and Parcel have to process your entire application before you can see any changes in development, which can become painfully slow as projects grow.

Vite is a bundler that takes a fundementally different approach. Instead of bundling everything upfront during development, it leverages ES modules (the browser’s native module system) which means:

• Lightning-fast cold starts: Traditional bundlers take up to 30-60 seconds to spin up on large projects. Vite starts in milliseconds, regardless of project size.

• Instant Hot Module Replacement (HMR): Change your code and see changes in the browser instantly - no full page reloads, no waiting. Traditional bundlers have to rebuild affected chunks, which slows down as your app grows.

• Powered by ESBuild: For production builds, Vite uses ESBuild (written in Go) for transpilation, which is 10-100x faster than Javascript-based bundlers.

For a single-page landing page site, Vite offers the perfect balance: simple configuration, modern defaults (Typescript and SCSS work out of the box), and professional build output with minification, code splitting, and cache-busting hashes - all without complex Webpack configs or plugin ecosystems to navigate. Let’s see how we can set this up.

Project Setup

Now that we understand why Vite is a great choice, let’s walk through setting up a production-ready landing page project from scratch. We’ll configure Typescript for type safety, SCSS for styling, and establish a clean project structure that’s both maintainable and scalable.

Prerequisites & Initial Setup

Before we begin, make sure you have nodejs version 18 or higher installed. You can check your version from the command line.

node --version

First create your project directory and initialize it.

mkdir my-landingpage
cd my-landingpage
npm init -y

This creates a basic package.json file. Now install Vite as a development dependency.

npm install -D vite

That’s it for the initial setup. Vite is now installed and ready to use. In the next steps, we’ll structure our project and add TypeScript and SCSS support.

Project Structure

One of the first decisions you’ll make is where to place your index.html file. Vite’s default convention is to keep it in the project root, but you can also place it inside src/ directory with some configuration.

Option 1: Root Level index.html (Vite’s default)

my-landingpage/
├── index.html          # Entry point in root
├── src/
│   ├── scripts/
│   │   └── main.ts
│   └── styles/
│       └── main.scss
├── package.json
└── node_modules/

With this structure, your index.html references files like this.

<link rel="stylesheet" href="/src/styles/main.scss" />
<script type="module" src="/src/scripts/main.ts"></script>

Option 2: index.html inside src/ (requires config)

my-landingpage/
├── src/
│   ├── index.html      # Entry point in src
│   ├── scripts/
│   │   └── main.ts
│   └── styles/
│       └── main.scss
├── vite.config.ts      # Required for this setup
├── package.json
└── node_modules/

This approach keeps all source files together and requires a vite.config.ts (we’ll cover this in section 2.6).

Regardless of which structure you choose, the mental model is the same. For this guide, we’ll use Option 2 (everything in src/), as it keeps the project root cleaner and separate source code from configuration files.

TypeScript Configuration

Vite has built-in TypeScript support, but we need to install TypeScript and create a configuration file. Install TypeScript as a development dependency.

npm install -D typescript

Create a tsconfig.json file in your project root.

{
	"compilerOptions": {
		"target": "ES2020",
		"module": "ESNext",
		"lib": ["ES2020", "DOM"],
		"strict": true,
		"moduleResolution": "node",
		"esModuleInterop": true
	},
	"include": ["src/**/*"]
}

What these options mean:

• target: "ES2020": Compiles TypeScript to ES2020 JavaScript, which all modern web browsers support.
• module: "ESNext": Uses the latest ES module syntax.
• lib: ["ES2020", "DOm"]: Provides type definitions for ES2020 features and browser DOM APIs.
• strict: true: Enables all strict type-checking options (catches more potential errors). This is an optional but recommended config.
• moduleResolution: "node": Resolves modules the way Node.js does.
• esModuleInterop: true: Allows default imports from CommonJS modules.
• include: ["src/**/*"]: Only compile files inside src/ directory.

This configuration gives you strong type safety while maintaining compatibility with modern JavaScript features. Vite will automatically transpile your TypeScript files - no additional loaders or plugins required.

SCSS Setup

One of Vite’s best features is how effortlessly it handles CSS preprocessors. For SCSS, you simply install the sass package, and Vite takes care of the rest – no configuration needed. Install sass as a development dependency.

npm install -D sass

That’s it! Vite will automatically compile any .scss files you import. You can now organize your styles like this.

src/styles/
├── main.scss           # Main entry point
├── _variables.scss     # SCSS variables
└── _mixins.scss        # Reusable mixins

In your main.scss, import the partials.

// Variables and mixins
@use 'variables' as *;
@use 'mixins';

body {
	margin: 0;
	// rest of your code
}

Then reference it in your index.html like so.

<link rel="stylesheet" href="/styles/main.scss" />

Vite will compile the SCSS to CSS, minify it, and add cache-busting hashes in production builds automatically. No webpack loaders, no complex configuration – just install Sass and start writing.

Package.json & Sripts

Now let’s configure our package.json with the necessary scripts and settings. Open your package.json and make these changes.

{
	"name": "my-landingpage",
	"version": "1.0.0",
	"description": "My Landing Page",
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "vite build",
		"preview": "vite preview"
	},
	"devDependencies": {
		"sass": "^1.77.0",
		"typescript": "^5.0.0",
		"vite": "^5.0.0"
	}
}

Key points:

• type: "module": This is crucial. It tells Node.js to treat .js files as ES modules, which aligns with Vite’s modern module approach. Withouth this, you may encounter module resolution errors.