- Open terminal, type the below commands in order create a folder and get inside the folder
mkdir folder-name && cd folder-name- Initialize npm inside the folder
npm init -y- Install Vite front-end build tool as development only dependency
npm --save-dev viteOR
npm i vite --save-dev- Install Sass compiler
npm --save-dev sass OR
npm i sass --save-devNote: In case the above commands doesn't work, particularly in case of installing Vite, do try to install Vite globally with the following commands via opening terminal on macOS. Make sure you're in the root/ in the home folder of your mac.
sudo npm i -g vite
vite --version- Create a folder src, and inside it create two sub folders as-
mkdir {src,src/js,src/scss}- Now create following files as-
touch src/index.html src/js/main.js src/scss/styles.scss vite.config.js- Paste the following code inside vite.config.js in order to enable HMR via Vite, to create a local server and output the build files into a folder named dist-
import { resolve } from 'path'
export default {
root: resolve(__dirname, 'src'),
build: {
outDir: '../dist'
},
server: {
port: 8080
}
}- Now to run the local Vite server, we need to add the following npm script inside package.json file as-
{
// ...
"scripts": {
"start": "vite",
},
// ...
}- Now add the following HTML code inside the index.html file as-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./js/main.js"></script>
</head>
<body>
</body>
</html>- Add the following code inside the main.js file as-
import '../scss/styles.scss';- Now run the project by typing the following command inside terminal
npm start*for macOS users only: in case if you face any issue in the terminal while running npm start like
Expected identifier but found "import"
(define name):1:0:
1 │ import.meta.dirnameuse the following command in order to downgrade esbuild version as-
npm i -D esbuild@0.24.0- Initialize Git in the project folder
git init- Add a .gitignore file in the root of the project folder
touch .gitignoreand add following directories to exclude them while performing Git operations inside the .gitignore file as-
node_modules
.vscode/*You're all set to move ahead :)