Open sumeetpareek opened 3 years ago
Installing a new app gives options for how to work with stylesheets
ng new early-screens-personal-network-yoga-discipline sumeetpareek@Sumeets-MacBook-Pro
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
This setting helps improve maintainability and catch bugs ahead of time.
For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use?
CSS
❯ SCSS [ https://sass-lang.com/documentation/syntax#scss ]
Sass [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less [ http://lesscss.org ]
Stylus [ https://stylus-lang.com ]
The new Stylus lang thing looks cool - https://stylus-lang.com/
We should use it's website front page as an inspiration, and explain the use of personal network yoga discipline to our customers in a similar fashion (maybe).
Angular material itself uses SCSS, so for better maintainability we should proceed with that option.
ng new early-screens-personal-network-yoga-discipline
created the app and git repo for us
ng serve --open
confirmed that the default app is working on local machine as expected
So we pushed everything to this github repo, with mention to this issue
git commit --amend
git branch -M main
git remote add origin git@github.com:artsy-entrepreneurs/early-screens-personal-network-yoga-discipline.git
git push -u origin main
Explored the following options of deploying the early version of Angular App
Vercel does not support free anything if you are using a repo under GitHub org, even if the repo is open source. So that's out.
Heroku is an established player for Node.js and Angular App deployment is simple, but it requires to manage Express server, etcetera. Also https domains aren't supported in free version, you need to get the paid Hobby version for that. https://www.heroku.com/pricing So that's out.
Netlify is already familiar to me and even does identity (login) and serverless functions for Free until to hit 1k users ❤️ 😍 Going with netlify.
Steps are very easy, almost just connecting github repo to a new netlify app, and setting in the build command https://www.youtube.com/watch?v=H8t_olktbAI&ab_channel=Netlify
There was a small hiccup of netlify not able to access ORG repos like this one so had to install/connect netlify to this ORG and specifically choose this repo https://docs.netlify.com/configure-builds/repo-permissions-linking/#troubleshooting-repository-linking
build command setting was easy, just a ng build --prod
but I was confused on what to use for publish directory, because examples indicated dist/[project-name]
like say dist/anglify
so I ran ng build --prod
on local to see where things end up in the build
yup, correct, its dist/project-name, which for us is dist/early-screens-personal-network-yoga-discipline
netlify is building things now from main branch (( TODO we need to setup subdomain, and separate demo version URL's, ideally all of them ))
✅ the app is accessible at - https://adoring-panini-c0ae17.netlify.app/
NEXT STEPS
✅ just leaving it with sitename setting now: https://demo-personal-network-yoga-discipline.netlify.app/
(( TODO have simpleandaudacious.com like google DNS connect later ))
installed angular material with Pink/Blue Grey theme
ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes
Walking through the HERO default documentation example app to change title and such https://angular.io/tutorial/toh-pt0
(( TODO create issue to follow up on all links of Anuglar out of the box placholder page ))
This blog has list of open source angular apps https://medium.com/akveo-engineering/top-16-most-popular-angular-open-source-projects-in-2020-e51086efd3ef
Exploring each of those seemed like the best way to update favicon is this https://github.com/akveo/nebular/commit/41879c81c3f2e3ac54f40ceb72bd9b30190c565e
As build and release engineer — deploy an out of box angular and material ui app on a public URL, followed by a couple more releases — so that early screens developed in December 2020 can be regularly released