Angular Universal PWA Starter

Angular Universal PWA Starter built with Angular Cli on Nestjs with TypeORM + Postgres. Auth with jsonwebtoken library.

Demo:

Universal PWA Starter Demo

Assumptions

• angular cli
• yarn (dependency management)
• angular 5.0+ (new service worker)
• I have provided public and private keys for demonstration purposes only. Please do not use them in your project.
  • don't even check your real keys into source control.
• You have another folder called angular-universal-pwa-starter-deploy on the same level that you have angular-universal-pwa-starter.
  • Example deploy repo
  • angular-universal-pwa-starter-deploy contains:a git repo, .gitignore, and .gitattributes. You will copy over the needed files with build scripts. It is the deployment folder that you pull from to update the server.
  • The various build scripts compile the server and move the dist folder & package.json to the angular-universal-pwa-starter-deploy folder.
• Postgres Config You have a database with the same configuration as linked, or you change that config to database user info of your choosing.
• Change SEO Defaults

Files that require changes for a fresh project

• /src/app/app.common.module.ts {appId: 'angular-universal-pwa-starter'}
• /server/modules/database/database.providers.ts set your database username, password, and database fields.
• private.key and public.key generate your own. Don't store your production keys on github.
• dotenv: create a file called .env in the root of the project (ie next to readme.md). Do not save it to source control. Give it the following variables:

  ESSION_ID_SECURE_COOKIE=false
  OSTGRES_PORT=5432
  OSTGRES_USERNAME=postgres
  OSTGRES_PASSWORD=testingpass
  OSTGRES_DATABASE=testingDB
  AILGUN_API_KEY=yourAPIKey
  AILGUN_EMAIL_DOMAIN=mail.yourwebsite.com
  ITENAME_BASE=yourwebsite.com	
  ITE_URL=http://localhost:4200
  

• create another .env file in your deploy folder, it will have the same variable names, but with values suited for a production environment.

Thoughts

• why bother with a depoyment repo? precompile everything on your dev environment, it is probably a beefier machine. A $5 Digital Ocean droplet runs out of memory when trying to run ng build --prod, so let's just skip that pain entirely.

e2e testing in watch mode

• 3 terminals:
  • npm run dev-server to run the api
  • ng serve --aot --env=e2e to run the frontend which protracter will use in watch mode
  • npm run e2e:watch e2e tests which rerun upon file save.

Useful Commands

• ng serve --aot - Run in frontend aot development mode on port 4200.
• npm run dev-server - Runs server on port 8000 via ts-node, assumes no frontend changes in regards to rendering with universal.
• npm run prep-dev-server - Full build of frontend, then serves frontend and backend on port 8000 via ts-node.
• npm run deploy - Build and push server & frontend assets to github deployment repo.
• npm run analyze-aot - Bundle analysis of non-tree shaken bundle. lets you see the individual angular module pieces.
• npm run analyze-deploy - Bundle analysis of tree shaken bundle. kind of opaque, but truest to reality.
• yarn upgrade-interactive - Upgrade only what you want to.
• npm run format - formats with tsfmt (typescript-formatter) based on tsfmt.json settings. This script gets called automatically before prep-dev-server and deploy.

Build Script Explained

• npm run deploy
  • first it runs format whichs reads options from tsfmt.json and formats code for consistent style.
  • second it runs prep-front-end
    • a: it runs ng build prod to build the frontend production app.
    • b: it runs ng build --prod --app 1 --output-hashing=false to build the server Aot Factory: AppServerModuleNgFactory
  • third it runs prep-server which uses nestjs.tsconfig.json to compile the server assets to js.
  • fourth it runs copy-needed-files-to-deploy-folder which copies yarn.lock and package.json for installing dependencies on server and moves the dist folder to angular-universal-pwa-starter-deploy (or whatever you name your folder ending in -deploy)
  • fifth it runs deploy-to-github which changes your directory to the deploy folder, then makes an auto generated commit of the contents of the deploy folder.

creating deployment on vps:

cd /var/www/
sudo git remote add origin https://github.com/EreckGordon/angular-universal-pwa-starter-deploy
sudo git pull origin master
yarn

updating deployment:

ssh root@ipv4 address
su - web
cd /var/www/
sudo git pull origin master
yarn
pm2 restart dist/server

To Do List

• ~linting + standardize code formatting~ <-- ~tsfmt~ prettier

• ~testing~

  • ~frontend~ <-- angular-cli has working tests now.
  • ~backend~ <-- e2e is only coverage currently.

• ~configure environment variable for server like cli. This would allow insecure cookies during dev and secure during prod without fiddling by hand.~ <-- dotenv

• ~Error: Could not extract user from request: jwt expired need to deal with expired JWT.~

  • ~attempt to renew token, if user no longer exists on db flush cookies~
  • ~refactor auth-service so it isn't just one large file.~

• ~frontend auth module~

  • ~observable auth service~
  • ~guards~
  • ~request password reset~
    • ~component~
    • ~server functionality~
  • ~password reset~
    • ~component~
    • ~server functionality~
  • ~account management component~
    • ~delete user modal~
    • ~change password inline (*ngIf)~
  • ~logout component~
  • ~inform user of errors with snackbar~
  • ~add recaptchaV2~
    • ~create account~
    • ~login~
    • ~request password reset~

• refactor backend auth

  • to handle multiple types of logins.
    • ~email and password~
    • ~anonymous~
    • ~social: google~
    • ~social: facebook~
    • social: twitter
    • social: github
  • ~to email users~
    • ~to reset their password upon forgetting it~
  • change return user info -- currently giving email of logged in user (even if they have multiple emails associated with their account)
    • maybe give array of all account emails?
    • notify user of their currently logged in method
      • maybe have little svgs of each type of login method associated with account
      • and logged in method is highlighted, or maybe explicitly called out as logged in
  • identify common functionality and refactor. I know there are a good amount of times where I repeat code that I shouldn't.
  • inconsistency - upgrading from anonymous to various users.
    • social users delete the old anonymous user from database after taking what they need.
      • this is because i assume that there could be an existing user that you just forgot to sign in as, and the server takes care of the rest
    • username/password users use the uid of the anonymous user.
      • it never assumes you have an existing account.
    • i think this would be best resolved by having username / pw more closely mimic the way social providers handle it.
      • this will take some refactoring i believe.
    • ps: does this even matter at all?

• ~baseUrl as a part of environment~

• ~social provider upgrades:~

  • ~upgrade anonymous user to social account~
  • ~fix account management page~
    • ~edit pw only if you have a username/password combo for our site.~
    • ~merge accounts - if you have 2+ accounts, login as one to merge with other.~
      • ~link google provider~
      • ~link facebook provider~
      • ~link email and password provider~
        • ~also need frontend built, making sure to send email, password, and provider: 'emailAndPassword'~
  • ~delete account:~
    • ~make sure to clean up all login providers when deleting account.~
      • ~delete providers~
      • ~unauthorize account from provider permissions~

• ~recaptchas everywhere that you can sign in or create account. missing in a few areas:~

  • ~social sign in page~
  • ~social link page~
  • ~username/password link page~

• ~SEO Stuff:~

  • ~remove keywords (useless apparently)~
  • ~add og:~
  • ~add twitter:~
  • ~add itemprop (schema.org)~
  • ~read up on json-ld to determine what properties it requires~

• ~ssr module -- currently AppController eats any get requests. Put it into its own module and import it last, so it only eats unused routes, letting us use get requests.~

• ~wipe out frontent functions except create anonymous user as hello world to server + db~

• ~frontend has an unauthorize function. i think it may be useless, because the server should just handle unauthorize upon account deletion.~

• ~websocket~ <-- see auth gateway + auth cache.

• ~update auth module middleware usage~

• ~Move shared interfaces to dedicated shared folder.~

  • there's probably a few more floating around that need refactoring

• ~Rename from src to frontend to clarify intentions.~

• google analytics

• file uploads with dropzone

• flesh out blog

• service worker push

• second theme - simultaneously active for additional color options

• comments / chat system

• database migrations

• copy over only a barebones package.json that just gives the dependencies, rather than the entire copy of package.json as currently implemented.

• auto delete anonymous users over a certain age. maybe a cron job? maybe with a subject.

• self-hosted fonts, icons (maybe?)

• needed tests

  • username / password auth
    • forgotten password reset
  • anonymous auth
    • create anonymous user
    • upgrade user to username / password, user id stays same
    • upgrade anonymous user when account already has associated email (fails)
  • social auth
    • google
    • facebook
  • unit tests front and backend