My “zero-to-coding” Angular workflow

Optimize the work needed to just start coding

Your work with Angular apps may either involve just a one-time app & environment setup every now and then — or you may need to create projects on a much more regular basis, where you often have to create new sandboxed projects, e.g. for toying with some idea, as a preparation of a talk or a for blog post :)

This small workflow improvement should make the job a bit more streamlined.

The usual steps goes something like this:

1. you generate the app with angular-cli: ng new my-fancy-app
2. then wait for npm to finish downloading half of the internet
3. and remember that you were to check if npm has finished
4. then start the ng server: npm start
5. then open the browser and type localhost:4200
6. then open the app in Visual Studio Code or WebStorm

Truth be told, this is not that terrible at all (thanks, Angular CLI!), but it does involve several actions and some time and attention, despite being just one thing you wanted to do: start coding the Angular app. So let’s make it even more simple!

1. Replace NPM with Yarn

Unfortunately you cannot remove time entirely from the process (“emm, sir, it wouldn’t be a process then”), but you can reduce it significantly by installing dependencies with Yarn instead of NPM. Just tell angular-cli not to run npm install and run yarn yourself instead:

Btw. I always forget to add SASS to the mix here…

Well, that’s a bit wordy… We could make an alias for this, but we want to keep the ability to name the app, so we need something that can take an argument. What we will define is a function that you can put in your .bashrc, .zshrc or whatnot:

Now we just need to ngapp my-fancy-app and that will create an Angular app with dependencies installed with Yarn.

2. Open a browser

Ok, that’s easy. You just add && open http://localhost:4200 to the function.
Or start chrome http://localhost:4200 if you’re on Windows.

3. Open the project in your editor of choice

Again, depending on your choice of weaponry:

For Visual Studio Code turn on the Command Palette and type “shell” to find an option to install the command in your path:

For WebStorm run the “Tools » Create Command-line Launcher” from the menu:

… and add your editor to our zero-to-coding setup:

4. Run the app

The last thing is to start the ng server. We had to leave it for the end since once we run that start script we won’t be able to get back to the command line in our bash script.

The final setting looks like this:

And feels like this: (well, minus the time)

I obviously did speed it up — nobody wants to watch stuff just being installed ;)

I hope this little snippet will take yet another unnecessary distraction from your workflow. I’ll be sharing here more useful bits and pieces like this so you’re more than welcome to follow my profile.