Code Monkey home page Code Monkey logo

angular-pwa-course's Introduction

Angular PWA Course - Build the future of the Web Today

This repository contains the code of the Angular PWA Course - Build the future of the Web Today.

Installation pre-requisites

IMPORTANT: Please use NPM 5 or above, to make sure the package-lock.json is used.

For running this project we need and npm installed on our machine. These are some tutorials to install node in different operating systems:

Its important to install the latest version of Node

Installing the Angular CLI

With the following command the angular-cli will be installed globally in your machine:

npm install -g @angular/cli 

How To install this repository

We can install the master branch using the following commands:

git clone https://github.com/angular-university/angular-pwa-course.git

This repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following:

cd angular-pwa-course
npm install

Its also possible to install the modules as usual using npm:

npm install 

NPM 5 or above has the big advantage that if you use it you will be installing the exact same dependencies than I installed in my machine, so you wont run into issues caused by semantic versioning updates.

This should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course.

Running the Development Backend Server

We can start the sample application backend with the following command:

npm run server

This is a small Node REST API server.

Running the Development UI Server

To run the frontend part of our code, we will use the Angular CLI:

npm start 

The development application is visible at port 4200 - http://localhost:4200, but in this course we will be mostly running the application production mode.

Running the application in production mode, with the service worker active

In order to build the application in production mode, we use this command:

ng build --prod

This is going to output the production application in the dist folder, with the service worker active. To run the application we will need an HTTP server, so let's install http-server:

npm install -g http-server

We can then run the production application by doing:

cd dist
http-server -c-1 .

And now the production application should be available at port 8080 - http://localhost:8080.

Note: Please check in the server startup log to see what port is http-server using. By default its 8080, but it that port is busy then 8081 will used, etc.

Shortcut command for building the application in production mode

We will be building the application often in production mode. This shortcut command will build the application in production mode and start http-server all in one go:

npm run start:prod 

Getting the code at the beginning of each section

This repository has multiple branches, have a look at the beginning of each section to see the name of the branch.

At certain points along the course, you will be asked to checkout other remote branches other than master. You can view all branches that you have available remotely using the following command:

git branch -a

The remote branches have their starting in origin, such as for example 1-notifications.

We can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command:

  git checkout -b 1-notifications origin/1-notifications

It's also possible to download a ZIP file for a given branch, using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button.

Other Courses

Modern Angular With Signals

If you are looking for the Modern Angular With Signals Course, the repo with the full code can be found here:

Modern Angular With Signals Course

Angular Security Masterclass

If you are looking for the Angular Security Masterclass, the repo with the full code can be found here:

Angular Security Masterclass.

Angular Security Masterclass

Angular Advanced Library Laboratory Course

If you are looking for the Angular Advanced Course, the repo with the full code can be found here:

Angular Advanced Library Laboratory Course: Build Your Own Library.

Angular Advanced Library Laboratory Course: Build Your Own Library

RxJs and Reactive Patterns Angular Architecture Course

If you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here:

RxJs and Reactive Patterns Angular Architecture Course

RxJs and Reactive Patterns Angular Architecture Course

Angular Ngrx Reactive Extensions Architecture Course

If you are looking for the Angular Ngrx Reactive Extensions Architecture Course code, the repo with the full code can be found here:

Angular Ngrx Reactive Extensions Architecture Course

Github repo for this course

Angular Ngrx Course

Angular 2 and Firebase - Build a Web Application Course

If you are looking for the Angular 2 and Firebase - Build a Web Application Course code, the repo with the full code can be found here:

Angular 2 and Firebase - Build a Web Application

Github repo for this course

Angular firebase course

Complete Typescript 2 Course - Build A REST API

If you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here:

https://angular-university.io/course/typescript-2-tutorial

Github repo for this course

Complete Typescript Course

angular-pwa-course's People

Contributors

jhades avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-pwa-course's Issues

'*.bundle.jsBranch' files in '2-download-and-install' not created

Hello,

I'm attempting to follow along with the section of the tutorial for downloading an application in the background, but when using using npm run server on one terminal window and npm start on another, I get errors in the Chrome console about failed requests and my cache storage is empty unless I don't include the bundled files. Can someone look into why this is occurring?

Also, it's worth noting that after I pulled the 2-download-and-install branch, I was getting errors when attempting to register the service worker because src/sw.js was not included in the assets array of the angular.json file.

EDIT: From my understanding, *.bundle files are no longer created by newer versions of the angular-cli. Can the sw.js file be updated to reflect the correct files?

EDIT2: When I was attempting the next lesson (Using Service Workers To Implement a Cache Then Network Fetch Strategy), taking the page offline and then refreshing would cause the page to crash instead of loading without the courses content. I was able to resolve this by adding the /runtime.js file to the cache, which was not described in the video; can this be added to sw.js?

dev build: Could not subscribe to notifications error in both chrome and firefox

i've installed the example into a docker container and browser is running in windows 10 host.

in both browsers console throwing up error

Service workers are disabled or not supported by this browser

push notifications appear to be working with other websites.

just to be safe ive confirmed that service workers are enabled..

Firefox: Go to about:config and set dom.serviceWorkers.enabled to true; restart browser.
Chrome: Go to chrome://flags and turn on experimental-web-platform-features; restart browser (note that some features are now enabled by default in Chrome.)

Push notification not working in Chrome

I have cloned the code and made appropriate changes. I am able to get push notification in firefox but in Chrome I am not able to get push notifications.
Operating System: Linux
Node Version:10.8.0
web-push Version:3.2.5

Service worker is not working

I have created new angular application and integrated pwa. Service worker is working and got the chrome application for that application once installation done over browser.
But service worker is not working in my existing application. I don't know the reason why it's not working for my application. Only difference between two application is version mismatch in angular core and angular common. In sample application angular core and common version is 6.0.3 but my application version is 6.0.0.
Please assist me to add pwa in my application

Is this Repo have one page

This Repo is cloned properly but does it have many page or single . I am getting

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'lessons'
Error: Cannot match any routes. URL Segment: 'lessons'
on clicking Lessons .

Could not subscribe to notifications Error: Service workers are disabled or not supported by this browser

`1-service-workers` branch is not working

I'm attempting to follow along in the Service Workers Hello World course, but even when pulling a fresh copy of the 1-service-workers branch, any script involving the ng command (npm start, npm build, etc) raises the error that the command requires to be run in an Angular project, but a project definition could not be found.. I noticed that the file .angular-cli.json is outdated for later versions of Angular and tried to rename it to angular.json and replace its contents with the angular.json file from the 1-notifications branch, but this raised the error Data path "" should NOT have additional properties(project).. The PWA course was extremely enjoyable up until now; can the repo be updated such that it can be run?

GET http://localhost:4200/api/lessons 404 (Not Found)

I cannot get the proxy to work.

Starting in branch /0-start
OS: Mac
Broswer: Chrome v73

I keep getting GET http://localhost:4200/api/lessons 404 (Not Found) returned.

I've added "logLevel": "debug" to the proxy and see it logging out [HPM] GET /api/lessons ~> http://localhost:9000.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.