search

artsy-entrepreneurs / early-screens-personal-network-discipline

0 stars 0 forks source link

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 #5

Open sumeetpareek opened 3 years ago

sumeetpareek commented 3 years ago

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

sumeetpareek commented 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
sumeetpareek commented 3 years ago

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.

sumeetpareek commented 3 years ago

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

sumeetpareek commented 3 years ago

✅ just leaving it with sitename setting now: https://demo-personal-network-yoga-discipline.netlify.app/

(( TODO have simpleandaudacious.com like google DNS connect later ))

sumeetpareek commented 3 years ago

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 ))

sumeetpareek commented 3 years ago

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