Project Setup on Ubuntu

A React project using Vite, TypeScript, and Material UI will be created with the name website.

Prerequisites: Install Node.js and npm

If Node.js is not yet installed on your system, set it up using nvm:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
source ~/.bashrc
nvm install 20
nvm use 20

Verify the installation:

node -v
npm -v

Node.js version 18 or higher is required.

Initialize the Project

Create a new Vite project with React and TypeScript templates. Run this command in your preferred directory (such as ~/projects/):

npm create vite@latest website -- --template react-ts

This scaffolding tool generates a project named website using the react-ts template, which includes React with full TypeScript support.

Navigate into the project folder:

cd website

Install Dependencies

Install the base packages:

npm install

Then add Material UI and its peer dependencies:

npm install @mui/material @mui/icons-material @emotion/react @emotion/styled

Run the Development Server

For local access only:

npm run dev

To make the server accessible over the network (useful for testing on other devices or sharing with team members):

npm run dev -- --host

The application will be available at http://your-server-ip:5173/.

Verify MUI Integration

Replace the contents of src/App.tsx with the following test code:

import { Button } from '@mui/material';

function App() {
  return (
    <div style={{ padding: 20 }}>
      <h1>Welcome to Website Project</h1>
      <Button variant="contained" color="primary">
        MUI Button
      </Button>
    </div>
  );
}

export default App;

Open the URL in you're browser. A styled button indicatse that MUI is correctly configured.

Project Structure

website/
├── public/
├── src/
│   ├── assets/
│   ├── App.tsx
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md