Vite Installation Setup

Create a workspace and initial application

You develop apps in the context of an vite-React workspace.
To create a new workspace and initial starter app just follow the below steps

1. Run the command , as shown below

 First step :
		  
npm create vite@latest   
//This command prompts for the information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.

Second step:
provide your project name as my-app

Project name : my-app

Third step:
select your required framework you are familiar with,

Select a framework: React

Fourth step: 
select your required script language you are familiar with,

Select a language: Typescript	

//The vite installs the necessary React npm packages and other dependencies. This can take a few minutes. This creates a new workspaces and a simple Welcome app, ready to run.

Run the application

The vite includes a server, so that you can build and serve your app locally.

1. Navigate to the workspace folder, such as my-app.
2. Run the following commands:

cd my-app

npm run dev

The yarn or npm serve command launches the server, watches your files, and rebuilds the app as you make changes to those files. The run dev just Option automatically opens your default browser to http://localhost:5173/.

How to Run the Udon Template:

                                                
										npm install
											(or)
										yarn install
									
								

                                                
										npm run dev
											 (or)
										yarn run dev
									
								

How to Convert SCSS to CSS:

                                                
										npm run sass
									
								

Staterkit:

StarterKit is a foundational template or boilerplate that provides the basic structure and essential components needed to build a web application from scratch. It’s designed to save time by offering pre-configured setups, allowing developers to focus on building features rather than setting up the initial project structure.

• Folder Structure: Organized directories for components, pages, assets, styles, and utilities.
• Basic Pages: Such as a dashboard, login/authentication page, and error pages.
• Reusable Components:dashboards, pages, apps, uitilities, ui-elements, advanced-ui, tables, maps, charts, forms ready to be customized.
• Styling Setup: CSS, SCSS for quick UI development.

How to Run the Staterkit:

                                                
										npm install
											 (or)
										yarn install
									
								

                                                
										npm run dev
											(or)
										yarn run dev
									
									
Once you serve your application by default it will take their default port using http://localhost:3000/
								

How to Convert SCSS to CSS:

                                                
										npm run sass
									
								

Note:

If your are using "npm install", You should need to delete the "yarn-lock file" from project root.

If your are using "yarn install", You should need to delete the "package-lock.json file" from project root.

To install the peer Depencies

In general, the npm i command is used to install all dependencies or devDependencies from a package. However, sometimes you may encounter errors while installing certain dependencies. In such cases, the --force argument can be used to force npm to install those dependencies.

The --force argument overrides any previously installed dependencies and fetches remote resources even if a local copy exists on disk. It follows a "last-dependency-downloaded-wins" approach, which means that it will overwrite any previously downloaded dependencies.

Using the --force argument can be helpful when you need to install a specific dependency that is causing issues during installation. However, it should be used with caution, as it can potentially cause conflicts with other dependencies or lead to unexpected behavior. It's always a good idea to thoroughly test your application after using the --force argument to ensure that everything is working as expected.

npm install --force

When installing packages using npm, if there are peer dependency issues, npm will always skip the installation of peer dependencies, even if there are no issues. Peer dependencies are a specific type of dependency that a package requires to function properly, but which are not managed by that package's dependency manager.

Skipping the installation of peer dependencies can sometimes lead to issues with the functionality or compatibility of the package. To ensure that your package functions correctly, it's important to manually install any missing peer dependencies using the npm install command. When installing peer dependencies, you should also be aware of the potential for conflicts with other packages or dependencies. It's a good idea to carefully review the peer dependencies required by each package and ensure that they are compatible with other packages in your project. By taking these steps, you can avoid potential issues and ensure that your packages are installed and functioning correctly.

npm install--legacy-peer-deps

We have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file

For Build your Template

Build your application for host on server using below command:

yarn run build
(or)
npm run build