DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

React TypeScript - Vite + React

#programming #beginners #react

Vite is a build tool for modern web projects. It aims to provide a faster and leaner development experience.

The supported template presets are:

JavaScript TypeScript
vanilla vanilla-ts
vue vue-ts
react react-ts
react react-ts
preact preact-ts
lit lit-ts
svelte svelte-ts
solid solid-ts
qwik qwik-ts

Scaffolding our first React TypeScript project:

npm create vite@latest my-react-ts-app -- --template react-ts
...
cd my-react-ts-app
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

Command line interface:

{
  "scripts": {
    "dev": "vite", // start dev server, aliases: `vite dev`, `vite serve`
    "build": "vite build", // build for production
    "preview": "vite preview" // locally preview production build
  }
}
Enter fullscreen mode Exit fullscreen mode

Specify additional CLI "port" option:

Updating vite.config.ts file:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 4200,
  }
})
Enter fullscreen mode Exit fullscreen mode

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

Top comments (0)