Skip to content
Gallery
LDF Website
LDF Website
Environment Setup
Internal Database
Design Sections
Links
Learning Resources
Meetings
FAQs
Gen Images
Feedback
Extra Page
More
Share
Explore

icon picker
Environment Setup

Setting Up Your Development Environment

1. Text Editor
4
⁠
⁠

Before you start working with Node.js, you need a text editor to write your code. Visual Studio Code (VSCode) is a popular choice due to its rich set of features and extensions that can enhance your productivity. However, you can use any text editor you are comfortable with, as long as it does not impose the complexities of a full Integrated Development Environment (IDE).

Installing VSCode

Download and install VSCode from
Visual Studio Code
⁠
⁠

Extensions

Some useful extensions that you may want to install are:
Git Lens (Extension ID:
eamodio.gitlens
⁠
)
Astro (Extension ID:
astro-build.astro-vscode
⁠
)
Tailwind CSS (Extension ID:
bradlc.vscode-tailwindcss
⁠
)
info

Directly search using extension id to make sure download the correct extension.

2. Node.js
4
⁠
⁠

Node.js is the runtime environment that will execute your JavaScript code on the server side.

Installing Node.js

Download and install the Long Term Support (LTS) version of Node.js from the official website:
NodeJS Download
⁠
⁠

3. Git
4
⁠
⁠

Git is essential for version control and collaboration in software development projects.

Installing Git on Windows

Download and install Git Bash from
Git For Windows
⁠
. Git Bash provides a Bash emulation used to run Git from the command line.

Installing Git on macOS

If you are using macOS, you can install Git using the Homebrew package manager with the following command:
brew install git

4. GitHub Account
3
⁠
⁠

GitHub is a web-based platform for version control and collaboration. It allows you to manage Git repositories online.

Creating a GitHub Account

Sign up for a GitHub account at
Github
⁠
. It is recommended to use your LUMS email address for registration.

5. Configuring Git with Your GitHub Account
2
⁠
⁠

After installing Git, you need to configure it to recognize your GitHub account.

Git Configuration Commands

Open your terminal or Git Bash and set your GitHub username:
git config --global user.name "YourUsername"

Set your GitHub email address (use the same email you used for your GitHub account):
git config --global user.email "<campus_id>@lums.edu.pk"
Check your configuration:
git config --list

Why Use Git for Collaboration?

Git is a distributed version control system that allows multiple developers to work on the same project without interfering with each other's work. It tracks changes, allows you to revert to previous states, and supports multiple workflows for collaboration. Using Git ensures that you can manage your project's code base efficiently, handle merge conflicts, and maintain a history of your project's progress.

6. Clone the Github Repo
3
⁠
⁠

Clone the Starter Github Repo to your local repository:
Create a new empty folder named ldf-website and open vscode in it.
info

Keyboard Shortcut

You can open a new terminal using : Ctrl + Shift + `
Run the git clone command
npm
info

The . means to clone the content of the repository into the current directory.

⁠
image.png
⁠
⁠
You should be able to see some files now
⁠
image.png
⁠
⁠

7. Installing the packages
2
⁠
⁠

Using the Node Package Manager

You can install the packages using a node package manager. node has these few package managers:
NPM (comes by default, slowest, popular)
YARN (faster than npm)
PNPM (fastest)
ok

Fast Package Manager

I like to work with pnpm but you can use any of the above package managers. if you want to install a package manager you can do so using NPM
for example you can install PNPM
npm install -g pnpm

Installing the Packages defined in the package.json File

pnpm i
# or
pnpm install
replace pnpm with npm or yarn if you want to use some other package manager.

error

Allow Remote Execution Of Scripts On Powershell

if you are using pnpm on powershell for the first time, you may encounter an issue like this:
Running Scripts is disabled on this system
To fix this, open PowerShell in administrator mode and run:
Set-ExecutionPolicy RemoteSigned

8. Starting the development Server
2
⁠
⁠

You can start the dev server by running
pnpm dev
⁠
image.png
⁠
⁠
You can then open the web page on the given link.

9. Working on Assigned Section File
⁠
⁠

First, you need to assign yourself a section either in the
Design Section Tables
⁠
or in the
Teams Table
⁠
⁠
For, example I decide to work with FAQs Section and my name is umer so,
Create a new branch for your changes
# create a new branch with your name
git branch -b by-umer
# move to that branch using checkout command
git checkout by-umer

# or you can directly create a new branch and move to it by running a single command
git checkout -b by-umer
# make sure to use your name, not mine 🤡
git checkout -b by-<your-name>
info

You can list all the branches by running git branch

The *
Make your changes in the codebase. If I have picked up FAQs section then my working file would be src/components/Hero.astro in the code base

View Your Changes by running the dev server on the localhost url.
Stage your changes by adding files to git for tracking
# add all files
git add .
# or add a specific file
git add <file-name>
Commit your changes
git commit -m "a meaning full commit message that tells details about the change you made"
Push your branch to the remote repository
git push origin by-umer
# or
git push origin by-<your-name>
Create a Pull Request : After pushing your branch, you'll typically see a message in the command line output that includes a URL to create a pull request. You can use that URL to open a web browser and create the PR manually.
minus

Never ever make changes directly to the main branch or branch of other collaboraters.

Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.