Introduction 🥳
- This is a beginner friendly series made by acmDev team with the goal to help beginner developers create their first website using Svelte ( Javascript framework to build website )
What'll be covered in this blog 🤓
- Required installation for the project
- Setup the project ( clone the repo )
- Run the project locally
Let's start 🤖
A. Technology Installation:
- VSCode ( text editor - where you'll code ) - Required
- Node.js v16+ ( JavaScript environment to help you install Svelte later on ) - Required
- Note for Ubuntu/Tuffix users: Refer to the instructions at the bottom of the page
- Svelte Plugins ( after you've downloaded VSCode, open Extensions and search for Svelte to install the plugins - it helps you highlight code and autocomplete with Svelte syntax) - Required
- Git ( for collaboration purpose and you'll need to use this in real world but not necessary for this project ) - Optional
B. Setup the project:
1. Clone the repo ( 2 ways )
- Using Git ( You'll need to Download Git first )
- Type the command
git clone https://github.com/acmCSUFDev/website-template.git
in your terminal to clone
- Download the ZIP file from this repo ( Beginner Friendly )
![Screen Shot 2022-10-06 at 4 09 14 PM](https://user-images.githubusercontent.com/58461444/194434631-6158497d-4883-43aa-a25d-369afa089d8a.png)
2. Open with VSCode
- Once you've cloned our website template, UNZIP the folder if you choose method 2, then open the folder you've just unzipped in VSCode
![Screen Shot 2022-10-06 at 4 11 25 PM](https://user-images.githubusercontent.com/58461444/194434835-04d6610e-2971-461e-89a1-09288c247e04.png)
C. Run the project locally
-
Have Node.js installed.
-
In your VSCode, in the project folder, open Terminal and type
npm install
-
After npm install, you should see a folder called node_modules which indicated you've used npm install correctly
-
Run your website by typing and click on the link provided
npm run dev
![Screen Shot 2022-10-06 at 4 17 18 PM](https://user-images.githubusercontent.com/58461444/194435735-d87c34de-3325-491f-80c8-824592222ecb.png)
After you click on the link provided, you should see our beautiful Svelte template :) congrats 🤩
Note on installing Node.js on Ubuntu/Tuffix
By default, sudo apt install nodejs
will install node v10 which is incompatible with Svelte. To remedy this, first uninstall the existing nodejs and npm installation with sudo apt remove nodejs npm
and install Node Version Manager using
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
Afterwards, restart your terminal to load the new nvm
command.
Now run nvm install 16
and nvm use 16
to install and set node v16 as the default version
Run node -v
to verify the correct version is now in use