Quick Setup for Frontend Projects

Table of Contents

• Why Use Boilerplates?
• Essential Tooling
• Starter Templates
• Step‑by‑Step Instructions
• Optional Extras

Why Use Boilerplates?

Starting from scratch can be a lot of click‑click‑click. Boilerplates let you:

• Automate bundling (Vite, Parcel, Rollup)
• Include hot‑reloading out of the box
• Get linting, formatting, and type‑checking ready
• Jump straight into writing UI, not configuration

Essential Tooling

Below are the most common tools, with their command‑line starter commands.

• Vite (React/Vue/Svelte) – npm create vite@latest my-app
• Parcel – npx create-standalone-app@latest my-app
• Next.js (React + SSR) – npx create-next-app@latest my-app
• SvelteKit – npm init svelte@next my-app
• Vue 3 with Vite – npm create vite@latest my-vue-app -- --template vue

Starter Templates

All the templates below include ESLint + Prettier, a simple README, and a demo component.

1. React with Vite: github.com/sohamsh/react-vite-starter
2. Vue 3 + Vite: github.com/sohamsh/vue-vite-starter
3. SvelteKit starter: github.com/sohamsh/sveltekit-starter
4. Next.js boilerplate: github.com/sohamsh/nextjs-boilerplate
5. Parcel simple web page: github.com/sohamsh/parcel-simple
6. Vanilla JS + Parcel: github.com/sohamsh/vanilla-parcel
7. React + TypeScript + Vite: github.com/sohamsh/react-ts-vite

Step‑by‑Step Instructions

We'll walk through creating a React + Vite project, then show how to add a simple component.

# 1️⃣ Create the project
npm create vite@latest my-app -- --template react

# 2️⃣ Enter the directory
cd my-app

# 3️⃣ Install dependencies
npm install

# 4️⃣ Run the dev server
npm run dev

Once the dev server is running, open http://localhost:5173 and you should see the default “Vite + React” page.

Adding a new component

/src/components/HelloWorld.jsx

import React from 'react';

export default function HelloWorld() {
  return <h2>Hello, Gen World!</h2>;
}

And import it in App.jsx:

import HelloWorld from './components/HelloWorld';

export default function App() {
  return (
    <div>
      <HelloWorld />
    </div>
  );
}

Optional Extras

• Tailwind CSS – npm i -D tailwindcss@latest postcss@latest autoprefixer@latest + npx tailwindcss init -p
• Storybook – npx sb init for component library docs
• ESLint + Prettier – npx eslint --init and add prettier plugin
• CI with GitHub Actions – use .github/workflows/ci.yml template from ci-template
• Testing with Vitest – npm i -D vitest and add test scripts