Skip to content

Latest commit

 

History

History
191 lines (178 loc) · 9.68 KB

README.md

File metadata and controls

191 lines (178 loc) · 9.68 KB
Raw

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