how to use Angular CLI to create a new project and deploy it

I want to show you how to use Angular CLI to create a new project and deploy it even if you've never used Angular before.

To install Angular CLI, just run the following command:

    $ npm install -g @angular/cli

Once it's installed you'll be able to run it from the command line using the ngcommand. When you do, you'll see a lot of output, but if you scroll back, you should be able to see the following:

    $ ng --version

If everything installed correctly, you should see the current version output to your terminal. Congratulations!

Now that we have Angular CLI and its dependencies installed, let's use this tool to create our first application.

Open up the terminal and run the ng new command to create a new project from scratch:

    $ ng new angular-hello-world

Once you run it, you'll see the following output:

    installing
      create .editorconfig
      create README.md
      create src/app/app.component.css
      create src/app/app.component.html
      create src/app/app.component.spec.ts
      create src/app/app.component.ts
      create src/app/app.module.ts
      create src/assets/.gitkeep
      create src/environments/environment.prod.ts
      create src/environments/environment.ts
      create src/favicon.ico
      create src/index.html
      create src/main.ts
      create src/polyfills.ts
      create src/styles.css
      create src/test.ts
      create src/tsconfig.json
      create .angular-cli.json
      create e2e/app.e2e-spec.ts
      create e2e/app.po.ts
      create e2e/tsconfig.json
      create .gitignore
      create karma.conf.js
      create package.json
      create protractor.conf.js
      create tslint.json
    Successfully initialized git.
    Installing packages for tooling via npm.
    Installed packages for tooling via npm.

Note: the exact files that your project generates may vary slightly depending on the version of @angular/cli that was installed.

This will run for a while while it's installing npm dependencies. Once it finishes we'll see a success message:

    Project 'angular-hello-world' successfully
created.

There are a lot of files generated! Don't worry about understanding all of them yet. We explain every file here throughout the book. Through the chapters there we'll walk through what each one means and what it's used for.

For now, let's just run the app and then deploy it

Running the App

To run the app, type the following:

  $ cd angular-hello-world
  $ ./node_modules/.bin/ng serve

Then wait a minute and you should see:

  ** NG Live Development Server is running on http://localhost:4200 **
  ...
  webpack: Compiled successfully.

This means your first Angular app is running! You can view it in your browser by opening http://localhost:4200.

Viewing our App on Localhost

What's happening here is that Angular CLI has compiled our code and started a development server on our machine. Now, let's take this code and put it on the internet where everyone can see.

Deploying the App

Deploying our app is the act of pushing our code to a server, where it can be accessed by others.

Broadly speaking, the idea is that we're going to:

• compile all of our TypeScript code into JavaScript (which the browser can read)
• bundle all of our JavaScript code files into one or two files
• and then upload our JavaScript, HTML, CSS, and images to a server

Ultimately, this Angular app is an HTML file that loads JavaScript code. So we need to upload our code to a computer somewhere on the internet.

So first, we build our Angular app:

./node_modules/.bin/ng build --target=production --base-href '/'

This command tells the ng tool to build our application for a productionenvironment. We also set the --base-href to a single slash /.

This command will run for a little while and when it finishes you should have a distfolder on your disk.

$ ls dist/
favicon.ico
index.html
inline.95a6cb571dbc2cfcb6a0.bundle.js
main.91fb0238219cb9a1d089.bundle.js
polyfills.5aae015f16e5b66f61e9.bundle.js
styles.d41d8cd98f00b204e980.bundle.css
vendor.4efaf64fc64d0c1e3642.bundle.js

These files are the full compiled result of your app. Notice that there is a long string of characters in the middle of each file such as:

main.91fb0238219cb9a1d089.bundle.js

Those characters are a hash of the content (and may not match on your computer). If you look at each file, you can see that we have some icons, the index.html, a main.js, a polyfills.js, a vendor.js, and some styles.css.

Now all the need to do is upload these to our server.

Uploading to a Server

There are lots of ways to host your HTML and JavaScript. For this demo, we're going to use the easiest way possible: now.

If you don't want to use now, you're free to use whatever method you want. For instance, you can host sites on Heroku, AWS S3, upload files to your own server via FTP, etc.

The important thing is that the server exposes all of the files in our distfolder onto the internet.

Installing now

We can install now using npm:

npm install -g now

To deploy a site with now is very easy:

cd dist # change into the dist folder
now

The now command should ask you a couple of questions (such as your email address) and you'll need to check your email and click the link inside.

After you've confirmed your account (or if you had one already), now will upload your code and then give you a URL to view to see your application.

Visit that URL and view your app. If it works, try sending the URL to a friend!

Viewing our App on The Internet

Congratulations! You've built and deployed your first Angular app!

Of course, there is a lot more to learn, but at least now we know that whatever we build can be deployed live online!

Next time, we'll chat a bit more about how Angular uses components to structure apps.