This repo serves as the seed project for the Ultimate Angular Pro course as well as the final solution in a separate branch, come and learn advanced Angular architecture!
Setup and install | Tasks | Snippets | Firebase Config | Resources
Fork this repo from inside GitHub so you can commit directly to your account, or simply download the .zip bundle with the contents inside.
During the time building this project, you'll need development dependencies of which run on Node.js, follow the steps below for setting everything up (if you have some of these already, skip to the next step where appropriate):
- Download and install Node.js here for Windows or for Mac.
- Install Firebase CLI on the command-line with
npm install -g firebase-tools
That's about it for tooling you'll need to run the project, let's move onto the project install.
Now you've pulled down the repo and have everything setup, using the terminal you'll need to cd into the directory that you cloned the repo into and run some quick tasks:
cd <angular-pro-app>
yarn install
# OR
npm install
This will then setup all the development and production dependencies we need.
Now simply run this to boot up the server:
yarn start
# OR
npm start
A quick reminder of all tasks available:
yarn start
# OR
npm start
yarn build:production
# OR
npm run build:production
You'll need to ensure you're logged into Firebase first (if you are prompted, otherwise skip to next step):
firebase login
To deploy (after running build task):
firebase deploy
Here are some VSCode snippets I'm using whilst recording this application, these help speed up boilerplate creation for things such as components, modules and services.
Here's how to install the snippets in VSCode. Add them to
typescript.jsonwhen prompted for which language the snippets are for.
{
"@Component": {
"prefix": "@Component",
"description": "Creates a component definition",
"body": [
"import { Component } from '@angular/core';",
"",
"@Component({",
"\tselector: '${1:selector-name}',",
"\tstyleUrls: ['${1:selector-name}.component.scss'],",
"\ttemplate: `",
"\t\t<div>",
"\t\t\t",
"\t\t</div>",
"\t`",
"})",
"export class ${3:Name}Component {",
"\tconstructor() {}",
"}"
]
},
"@Injectable": {
"prefix": "@Injectable",
"description": "Creates an @Injectable service",
"body": [
"import { Injectable } from '@angular/core';",
"",
"@Injectable()",
"export class ${1:Name}Service {",
"\tconstructor() {}",
"}"
]
},
"@NgModule": {
"prefix": "@NgModule",
"description": "Creates an @NgModule",
"body": [
"import { NgModule } from '@angular/core';",
"",
"@NgModule({",
"\timports: [],",
"\tdeclarations: [],",
"\tproviders: []",
"})",
"export class ${1:Name}Module {}"
]
},
"@Pipe": {
"prefix": "@Pipe",
"description": "Creates an @Pipe",
"body": [
"import { Pipe, PipeTransform } from '@angular/core';",
"",
"@Pipe({",
"\tname: '${1:selector-name}'",
"})",
"export class ${2:Name}Pipe implements PipeTransform {",
"\ttransform(value: any) {",
"\t\t$0",
"\t}",
"}"
]
}
}{
"rules": {
"users": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
},
"schedule": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid",
".indexOn": [
"timestamp"
]
}
},
"meals": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
},
"workouts": {
"$uid": {
".read": "$uid === auth.uid",
".write": "$uid === auth.uid"
}
}
}
}
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "",
"ignore": [
"firebase.json",
".firebaserc",
".vscode",
".git",
".gitignore",
".editorconfig",
"src/**/.*",
"database.rules.json",
"package.json",
"README.md",
"tsconfig.json",
"webpack.config.js",
"yarn.lock",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
There are several resources used inside this project, of which you can read further about to dive deeper or understand in more detail what they are:
