DEV Community

Nhan Nguyen
Nhan Nguyen

Posted on

1

React TypeScript - Vite + 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:

Image of Docusign

šŸ› ļø Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (0)

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

šŸ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay