Home
Jamstack Explorers
Menu

Angular in the Jamstack with Tara Z. Manicsic

Angular Project Setup

To get started we'll want to make an Angular project using ng new and setting it up in git with GitHub.

Transcript:

The first thing we'll want to do to get started is install globally the Angular CLI by doing NPM install-G@angular-CLI, and by the miracle of video editing, that will happen very quickly. We can clear that screen out and take a look at the version we're running now. At the time of this recording, the latest version of CLI was 1004. If you need any instructions on how to install or update using Angular, you can find all the information at angular.io/guide/setup-local. Let's head back to the terminal to create a new project using the Angular CLI that we just installed by running NG new and the project named angular-explorer. They'll ask if we want to use routing, we'll say yes, and we'll choose CSS as our styling. You can see all the files that it's creating for the skeleton project that we are now assembling.

Now that our project is created, we can open up a code editor- VS code is what we'll use today- by using code . to open up the file that we're in now. Then we can look at the directory that's holding our project angular-explorer, see that we have all of our code in here, and we'll mostly be working in source app to set up our project. Before we even make any changes, let's head back to the terminal and change directory inside the project directory.

Once inside, we're going to take advantage of the GitHub command line tools and run GH repo create to create a GitHub repository. Side note, you will need to be signed in to GitHub to make this step work. Now that we have version control and can revert any bad choices we make, let's go inside our app.component.html file and remove all of the skeleton information from line 1 to line 533 and add a quick little H1 header that will just say, "Let's start exploring."

To make sure our site is running correctly, we will go ahead and go to the terminal and use the command NG serve to look at our site locally. We'll say yes to the analytics. You can always say no. Then we can head to the browser and go to local host 4200 to see our site is up and running. Next, we'll head back to the terminal to run a few git commands in order to get our files up to our repository.

First we'll run get add period to add all the files changed. Then we'll make a commit message with git commit-M, single quote, removes skeleton content. Then finally it will push it up to our repository with git push using --set-upstream flags, since this is our first push origin master, and then pat ourselves on the back for finishing a set up of a project to start exploring the Jamstack with Angular.

Explorers

your progress

27