Clips App

Welcome to Clips, the ultimate platform for gamers to share their most epic moments with the world! With our powerful tools and user-friendly interface, you can easily upload, edit, and showcase your gaming skills like never before.

Firebase configuration

Important

You need to have created and configured a project in Firebase. There is information in the course how to do that for the main project needs.

Add configuration src/environments/environments.ts in the following example format:

export const environment = {
    production: false,
    firebase: {
        apiKey: "<api-key>",
        authDomain: "<auth-domain>",
        projectId: "<project-id>",
        storageBucket: "<storage-bucket>",
        appId: "<app-id>"
    }
}

Table of Contents

• Installation guide (Windows/Mac)
  • Installing Node.js and npm
  • Installing Typescript
  • Installing Angular CLI
  • Install packages
• Running the application
  • Development server
  • Build
  • Code scaffolding
• Testing
  • Running unit tests
  • Running end-to-end tests
• Further Help

Installation Guide (Windows/Mac)

This project was generated with Angular CLI version 14.2.3. To run this application we will need Node.js, npm, Typescript and the Angular CLI. In this session, we will install them one by one. We assume that the repository is pulled to a local storage at this point.

Installing Node.js and npm

In the terminal, check if we have installed node.js by running:

node -v

and

npm -v

to check the versions. If any of these are not installed, download and install Node.js from here. When we are installing node.js, make sure we include the npm package manager in the installation list.

After the installation, run node -v and npm -v again, the version of node.js and npm should be displayed.

Installing Typescript

We can check if we have Typescript installed by running:

tsc -v

to check the typescript compiler version. If it is not installed, we can install it using npm by running:

On Windows:

npm install typescript --save-dev

On Mac:

brew install typescript

After installing, the command tsc-v should return the version of typescript. For more information, please visit Typescript's download website.

Installing Angular CLI

We install the Angular CLI using npm package manager by running the following command in the terminal:

npm install -g @angular/cli

On Windows client computers, the execution of PowerShell scripts is disabled by default. To allow the execution of PowerShell scripts, which is needed for npm global binaries, you must set the following execution policy:

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

Carefully read the message displayed after executing the command and follow the instructions. Make sure you understand the implications of setting an execution policy.

We can check if Angular CLI is successfully installed by running:

ng version

The version of Angular CLI will be displayed. For more inforamtion, please visit Angular's setup guide for local workspace.

Install packages

Run npm install to install packages specified in package.json.

Running the application

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Testing

Running unit tests

This project use Karma and Jasmine. Run npm run test to execute the unit tests via Karma.

Running end-to-end tests

This project use Cypress for End-2-End tests Run npm run e2e to execute the end-to-end tests via Cypress. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.