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
2. First step :

   npm create vite@latest

3. This new command prompts for the information about features to include in the initial app. Accept the defaults by pressing the Enter or Return key.
4. Second step: provide your project name as my-app

   Project name : my-app

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

   Select a framework: React

6. 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/.

Tailwind frame configuration

After initialize a React Vite project install the required dependencies for Tailwind CSS. Run the following command in your project directory:

    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Generate a Tailwind CSS configuration file by running the following command:

npx tailwindcss --init

This will create a tailwind.config.js file in your project's root directory.

Create a "postcss.config.js" file in your project's root directory and add the following configuration:

 export default {
plugins: {
"postcss-import": {},
tailwindcss: {},
autoprefixer: {},
},
};

Ynex Setup

If you have already download and install node.js and React then ignore prerequisites.

Prerequisites

Node.js

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

React

To install the React using npm, open a terminal/console window and run the following command.

        npm install react
        (or)
        yarn install react
        

Setup an Ynex Template by

1. Download the Ynex rar/zip file.
2. Extract it and then go in to Folder here you will see a Ynex Folders
3. For Example
4. Here, I'm Choosing vite-file.
5. Now from a terminal window, navigate to the directory containing your application

6. Ynex/vite-file>

7. You can import all dependency by installing npm command

8.                                     npm install
                                       (or)
                                       yarn install

9. Now you are in stage to successfully run Ynex using below command:

10.                                     npm run dev
                                        (or)
                                        yarn run dev
                                        

    Once you serve your application by default it will take their default port using http://localhost:5173/

Note

1. npm install

   If your are using npm install, You have to delete the

   yarn-lock file

   (or)

   yarn install

   If your are using yarn install, You have to delete the

   package-lock.json file

   basically npm i is used to install all dependencies or devDependencies from a package. if there will be any dependencies which need to be installed but getting error message while installing, then --force will help to install those dependencies.

   The --force argument will force npm to fetch remote resources even if a local copy exists on disk. It will be on a last-dependency-downloaded-wins basis and will overwrite any previously downloaded dependencies.

   npm install --force

   if there is peer dependency issues while installing
   it will always skip peer dependencies (whatever those are) during installation even if there are no issues.

   npm install--legacy-peer-deps

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

Build Application

yarn run build (or)npm run build