How I start (almost) any project

I saw this video from Fireship, and got inspired to share a tip or two how to get started building your next web app.

Quick back history, I'm a developer who have coded for more than a decade, Big fan of Angular, stay in there react and vue lovers i will share a few points why, because i have actually built production ready apps in all of the major frontend frameworks.

So when a start a web app i spin up this stack every time.

Following things are installed prior to this, angular-cli, node, npm...

For my frontend i do:

ng new my-webapp
cd my-webapp
ng add @angular/material
Then i select custom, globla typography and setup browser animations

I create a github repo without anything ticked just the name of [my-webapp]

After that i go into my terminal in the directory of [my-webapp] and do the following

git remote add origin [email protected]:YOUR_GITHUB_USERNAME/my-webapp.git
git branch -M main
git push -u origin main
git commit -am "Init commit"
git push

Then i refresh the page on github, now to CI/CD, its amazing to have the app always deployed for sharing with friends/co-working buddys or the likes so i tend to setup netlify for this

So i go to netlify, i have a user if you dont, create one (this is not sponsored in any way). When inside the dashboard i click sites -> new site from git

Then i connect it to my github account i have it limited so they only have access to the repos i give them access to, you can also give them access to anything but if you havn't you have to give them specific rights click the link saying: "configure the netlify app on github"

Otherwise if you see the repo there click it

Next screen go with the defaults click "deploy site"

When its done deploying a url will be available, and you can add a domain or setup a cname towards that, i prefere to use cloudflare for all of my domains mainly because i know all of their tooling.

Next i add my base styling helpers so its easy for me to do media queries or the like and to have a base to go from.

You can use my base setup from the folder in this project ./my-webapp/src/styles and just copy the whole folder into your project and then overwrite whats in your styles.scss file with

@import "styles/helpers";

@import "styles/material/material";

@import "styles/keyframes/blink";
@import "styles/keyframes/pulse";

@import "styles/core/layout";

And then in each component you make you can import helpers like this

@use 'src/styles/helpers' as app;

.example {
  padding: app.dp(4 6); // returns 16px 24px
}

And these also override angular material and improves upon their base components since buttons and many of their badges and the likes does not support having icons in them these overrides improves that.

Next i just build my app.

If i need a backend i add one of two things either a serverless thing running a mongodb on atlas or build out a small Nodejs/express app starting by exposing a repo of json files on /api then later it can be rewritten in to proper api's.

Reason for going with angular over fx react and vue, are two very simple concepts that i believe brings structure into a business and therefore adds a ton of value. Angular is quite opininated so the amount of ways/flavours you can write it in is limited which means the bridge between developers are easy. And their CLI its super convienent that (almost)everything you need is just baked in and is accessable, also its fast to create code and handle dependencies due to the automatic nature of the CLI.

I will be writing a do's and don'ts for angular at least how I believe angular should be written, subscribe and stay tuned for that updates.

Github repo: https://github.com/sp90/my-webapp

If you have any questions please send them to me here or on twitter

Cheers