Dev Portfolio Project Part 1 - Getting Started

by Daniel Truong

October 13, 2022 • 3 min read

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:

Project Template Link

1. Clone the repo ( 2 ways )

  1. 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
  1. Download the ZIP file from this repo ( Beginner Friendly )

Screen Shot 2022-10-06 at 4 09 14 PM

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

C. Run the project locally

  1. Have Node.js installed.

  2. In your VSCode, in the project folder, open Terminal and type
    npm install

  3. After npm install, you should see a folder called node_modules which indicated you've used npm install correctly

  4. Run your website by typing and click on the link provided
    npm run dev

Screen Shot 2022-10-06 at 4 17 18 PM

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

Read as TXT: /blog/613.txt