Skip to content

Commit

Permalink
closes #6 added trendy app with firebase hosting
Browse files Browse the repository at this point in the history
  • Loading branch information
@timofeysie
timofeysie committed Aug 31, 2021
1 parent 1e7f193 commit e77d24e
Show file tree
Hide file tree
Showing 13 changed files with 1,148 additions and 180 deletions.
5 changes: 5 additions & 0 deletions .firebaserc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"projects": {
"default": "trendy2022"
}
}
68 changes: 68 additions & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,71 @@ testem.log
# System Files
.DS_Store
Thumbs.db

# from firebase
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
firebase-debug.log*
firebase-debug.*.log*

# Firebase cache
.firebase/

# Firebase config

# Uncomment this if you'd like others to create their own Firebase project.
# For a team working on the same Firebase project(s), it is recommended to leave
# it commented so all members can deploy to the same project(s) in .firebaserc.
# .firebaserc

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
159 changes: 10 additions & 149 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,12 @@ This is a sample app created following the steps in [Workshop: Enterprise Angula
## Workflow

```txt
npm run server // start the server up
nx serve nest-demo // start the nest server
nx run trendy:build --configuration=production
nx serve trendy // trendy frontend
nx run trendy:server --configuration=production
nx run trendy:firebase --cmd deploy // deploy to firebase
npm run server // start the customer portal server
nx serve customer-portal // serve the front end Angular app
nx test auth // test the auth lib
nx test layout // test the layout lib
Expand All @@ -24,6 +28,11 @@ A trend search for the nest-demo looks like this:
http://localhost:3333/api/images/Christina%20Applegate
```

```url
Project Console: https://console.firebase.google.com/project/trendy2022/overview
Hosting URL: https://trendy2022.web.app
```

Run the server and then the customer-portal and the app will be served at: http://localhost:4200

You can also go directly to login: http://localhost:4200/auth/login
Expand Down Expand Up @@ -371,154 +380,6 @@ Right now, the server reports either an "unknown error" if the server is not run

That will be updated in the next section, step 9 - Route Guards and Products Lib.

### Step 9 - Route Guards and Products Lib

Branch: step-9-Route-Guards-and-Products-Lib

Steps.

1. Add a lazy loaded lib Products with routing & a products container component to the lib
2. Update the RouterModule.forRoot array in apps\customer-portal\src\app\app.module.ts
3. Add ProductsModule route
4. Generate a guard with the CLI & add the auth guard logic
5. Add auth guard to main routes

6. Check the route guard is working
7. Cache the user in local storage to save logging in for the rest or the workshop.

```txt
nx generate @nrwl/angular:lib products --routing --lazy --parent-module=apps/customer-portal/src/app/app.module.ts
...
CREATE libs/products/README.md
CREATE libs/products/tsconfig.lib.json
CREATE libs/products/src/index.ts
CREATE libs/products/src/lib/products.module.ts
CREATE libs/products/tsconfig.json
CREATE libs/products/jest.config.js
CREATE libs/products/src/test-setup.ts
CREATE libs/products/tsconfig.spec.json
CREATE libs/products/.eslintrc.json
UPDATE package.json
UPDATE workspace.json
UPDATE nx.json
UPDATE tsconfig.base.json
UPDATE .vscode/extensions.json
UPDATE jest.config.js
UPDATE apps/customer-portal/src/app/app.module.ts
UPDATE apps/customer-portal/tsconfig.app.json
```

```txt
nx g @nrwl/angular:component containers/products --project=products
CREATE libs/products/src/lib/containers/products/products.component.html
CREATE libs/products/src/lib/containers/products/products.component.spec.ts
CREATE libs/products/src/lib/containers/products/products.component.ts
CREATE libs/products/src/lib/containers/products/products.component.scss
UPDATE libs/products/src/lib/products.module.ts
```

Error: Cannot find module '@demo-app/products'
at $_lazy_route_resources|lazy|groupOptions: {}|namespace object:5

After updating the RouterModule.forRoot array and adding the ProductsModule route in the products.module.ts, it's time to run the app.

The instructions are: "Login again to check the routing is correctly configured by trying to click the 'products' button in the main menu."

However, we are getting this runtime error:

```txt
Error: Uncaught (in promise): Error: Cannot find module '@demo-app/products'
Error: Cannot find module '@demo-app/products'
at $_lazy_route_resources|lazy|groupOptions: {}|namespace object:5
```

Try with new syntax of module imports:

```js
loadChildren: () =>
import('@demo-app/products').then(
(mod) => mod.ProductsModule // added
),
```

This works. Time to update the course which shows source from the end of the section, not the source as it should be in-progress so that the source shown at this point in the section will run.

When adding the auth guard login, the path to the service needs to be updated to this:

```js
import { AuthService } from '../../services/auth.service';
```

Had to add an ESLint ignore statement for the debugger line to work:

```js
// eslint-disable-next-line no-debugger
debugger;
```

Update the path to the service in the auth.guard from this:

```txt
libs/auth/src/lib/services/auth/auth.service.ts
```

To this:

```txt
libs/auth/src/lib/services/auth.service.ts
```

You can see from other directories, such as auth guard, that the services actually is wrong.

```txt
libs\auth\src\lib\guards\auth\auth.guard.spec.ts
```

It would become apparent as an error when the user tries to create another service. This actually means that we needed to have a sub-folder in the services directory. Where were those created again?

In step 5, this command is shown.
That should be correct. Not sure why I excluded the extra auth directory needed.

```js
nx generate @nrwl/angular:service services/auth/auth
```

The cleanup for this is a bit of work, as every branch since then will need to be updated.

Creating the folder and moving the service there now will cause the following errors:

```txt
./libs/auth/src/index.ts:2:0-58 - Error: Module not found: Error: Can't resolve './lib/services/auth.service' in 'C:\Users\timof\repos\timofeysie\angular\demo-app\libs\auth\src'
./libs/auth/src/lib/containers/login/login.component.ts:1:0-58 - Error: Module not found: Error: Can't resolve '../../services/auth.service' in 'C:\Users\timof\repos\timofeysie\angular\demo-app\libs\auth\src\lib\containers\login'
./libs/auth/src/lib/guards/auth/auth.guard.ts:2:0-58 - Error: Module not found: Error: Can't resolve '../../services/auth.service' in 'C:\Users\timof\repos\timofeysie\angular\demo-app\libs\auth\src\lib\guards\auth'
./libs/layout/src/lib/containers/layout/layout.component.ts:51:116-130 - Error: export 'AuthService' (imported as 'i1') was not found in '@demo-app/auth' (possible exports: AuthGuard, AuthModule, authRoutes)
Error: libs/auth/src/index.ts:2:29 - error TS2307: Cannot find module './lib/services/auth.service' or its corresponding type declarations.
2 export { AuthService } from './lib/services/auth.service';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: libs/auth/src/lib/containers/login/login.component.ts:2:29 - error TS2307: Cannot find module '../../services/auth.service' or its corresponding type declarations.
2 import { AuthService } from '../../services/auth.service';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error: libs/auth/src/lib/guards/auth/auth.guard.ts:9:29 - error TS2307: Cannot find module '../../services/auth.service' or its corresponding type declarations.
9 import { AuthService } from '../../services/auth.service';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
```

Have to make the change in these files:

```txt
libs/auth/src/lib/containers/login/login.component.ts
libs/auth/src/lib/guards/auth/auth.guard.ts
libs/auth/src/index.ts
```

As long as the tutorial all have the correct path, I'm not too worried about the branches for now.

### 11 - Adding NgRx to Nx App

Branch: step-11-Adding-NgRx-to-Nx-App
Expand Down
66 changes: 66 additions & 0 deletions apps/trendy/.gitignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
firebase-debug.log*
firebase-debug.*.log*

# Firebase cache
.firebase/

# Firebase config

# Uncomment this if you'd like others to create their own Firebase project.
# For a team working on the same Firebase project(s), it is recommended to leave
# it commented so all members can deploy to the same project(s) in .firebaserc.
# .firebaserc

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage

# nyc test coverage
.nyc_output

# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
33 changes: 33 additions & 0 deletions apps/trendy/dist/apps/trendy/404.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Not Found</title>

<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px 16px; border-radius: 3px; }
#message h3 { color: #888; font-weight: normal; font-size: 16px; margin: 16px 0 12px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
@media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>404</h2>
<h1>Page Not Found</h1>
<p>The specified file was not found on this website. Please check the URL for mistakes and try again.</p>
<h3>Why am I seeing this?</h3>
<p>This page was generated by the Firebase Command-Line Interface. To modify it, edit the <code>404.html</code> file in your project's configured <code>public</code> directory.</p>
</div>
</body>
</html>
Loading

0 comments on commit e77d24e

Please sign in to comment.