ereckgordon / angular-universal-pwa-starter

Angular Universal PWA Starter

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:

   SESSION_ID_SECURE_COOKIE=false
   POSTGRES_PORT=5432
   POSTGRES_USERNAME=postgres
   POSTGRES_PASSWORD=testingpass
   POSTGRES_DATABASE=testingDB
   MAILGUN_API_KEY=yourAPIKey
   MAILGUN_EMAIL_DOMAIN=mail.yourwebsite.com
   SITENAME_BASE=yourwebsite.com	
   SITE_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

angular-universal-pwa-starter's Issues

Dev backend and frontend at the same time

On package json I have found some paths to run both back and front. But how to run both so we can dev both simultaneous?

SSR working on some routes

As in topic. When using home, chat or sign in/out site is not being rendered as universal page.
It seems it's working only for blog route.

PWA Demo not working offline

The Angular PWA is not available when checking "offline" checkbox in Chrome Network tab.