Web Development #

Install NPM and Node.js #

In order to use Vite, you'll need to install Node.js and NPM. NPM is a package manager for JavaScript. Node.js is a JavaScript runtime environment that allows you to run JavaScript code outside of a browser.

If you don't install Node.js, which also installs NPM, you'll get an error when you try to run npm create vite@latest. It will say something like npm : The term 'npm' is not recognized.

Go to https://nodejs.org/en/download/ and download the latest version of Node.js. When you install Node.js, it will also install NPM.

If you still have issues after installation, follow these instructions for Windows.

Create a project using Vite #

Create a project from scratch using Vite.

1. Open Visual Studio Code or the Command Prompt and go to your main folder, then one with your name.
2. Open a new terminal by clicking on the Terminal menu button, choosing New Terminal, and then enter the following command:

npm create vite@latest

3. Enter the name of your project when prompted. Don't use spaces. Example: tictactoe or tic-tac-toe.
4. Select Vanilla, which means basic HTML, CSS, and JavaScript.
5. Choose JavaScript, or TypeScript if you want.
6. Open this new project by going to File > Open Folder... and selecting the folder that was just created.
7. Open the terminal by clicking on Terminal in the menu and selecting New Terminal. In the terminal type npm install, which will install the dependencies for your project.
8. In your project folder, delete counter.js, javascript.svg, and delete all of the code inside main.js. You can also delete the content inside style.css if you want.
9. Click on package.json, then click on the Debug link that's shown between lines 5 and 6. Choose dev since we are in the development process.
10. In the terminal at the bottom, look for the Local: http://127.0.0.1:xxxx. Hold down the control button and click on that link. This will open a preview of your app.