ALF Developer Course

An intensive course in website and program development with the aim of giving the participants a good introduction to the principles for developing structured, creative and well-functioning solutions.

Documentation

Client: Angular, DaisyUI, TailwindCSS
Server: Node, NestJS, Prisma

Built using Angular 17, utilizing standalone components.

Requirements

Having trouble running or building the project?
This might be happening if you run different versions of NodeJS or Angular.
Try installing the versions listed at the top of this document!

Git

Using Git is a must for working on this project, and you should never work on the main branch!
In this documentation we will use Git in the terminal, use Github Desktop or LazyGit if you prefer.
Go to https://git-scm.com and follow the installation steps.
If you don't get access to Git from your default terminal, you can use the Git Bash terminal.

NodeJS / NPM

In order to install the projects dependencies, you will need to install NodeJS.
Go to https://nodejs.org and download the latest version.
NPM should be installed along with NodeJS.

Angular CLI

Angular CLI is mainly used for generating components and building the project.
Go to https://angular.io and follow the installation steps.

You can check if the installation went ok by running the following commands in your terminal:

node --version

npm --version

ng version

Getting started

Cloning the repository

Open your terminal and cd into a folder where you want to clone the repository.
Use pwd and ls to orientate yourself, and run the following command.

git clone https://github.com/kilavila/utviklerkurs.git

Now move into the project folder by running:

cd ./utviklerkurs

Creating a new branch

Create a new branch in the repository, again; don't work on main!
You can use your firstname as a branch name if you're not sure what to call it.
Run the following command:

git checkout -b your-branch-name

Make sure you are in the correct branch:

git branch

Running the project

To install all the dependencies in the project, run the following command:

npm install

When the installation is complete, the project should be ready to run locally.
All the scripts and dependencies can be found in package.json.
Now run the following command to run the project locally:

npm start

Open your browser and navigate to http://localhost:4200
Press CTRL+C in the terminal to stop the server.

Commit and push your changes

Always, always, always write a proper commit message!
It should be short and descriptive...

To commit your changes, run the following commands:

git add .
git commit -m "Your commit message"

If this is the first time you're pushing a commit, you will need to create an account on Github.
Go to https://github.com and create an account.

Then, run the following command to push your changes:

git push -u origin your-branch-name

You only have to use git push -u origin your-branch-name when you're pushing the first time.
Otherwise, you can use git push.

Merge branches

Make a pull request if you don't have access to main or don't know how to merge!

A merge tutorial will be available soon. Practise merging in smaller projects first.

Making a pull request:

1. Navigate to your branch on Github(https://github.com/kilavila/utviklerkurs/tree/your-branch-name).
2. Click on Contribute.
3. Click on Open Pull Request.
4. Fill in the form and click on Create pull request.

Building the project

Skip this step if you made a pull request and didn't merge with main.
Someone will merge your changes, build and deploy it for you.

When you have made all the changes, run the following command to build the project:

npm run build

Generated files can be found in the dist/utviklerkurs/browser folder.
Upload the files to the web server with either SSH or FTP.

Alternatively: Use SSHFS in the terminal to mount an empty local folder to the web server and copy the files over. Keep in mind that SSHFS can be slow and not necessarily the best solution for larger files.

Read more about: SSHFS

Optimizations

GIMP and ImageMagick for image optimization.

Images should have:

• proper aspect ratio
• proper resolution
• WEBP format (preferred format)
• JPG format (backup format for WEBP)
• maximum 200KB

Contact

Contact information can be found at Utviklerkurs.no.

Authors

• @kilavila