5 Things to Do After `ng new`
Tags: angular, cli, webdev, tutorial
Published: 2019-08-20 17:48:08

The Angular CLI is the recommended approach for starting new Angular applications, because it gives you an awesome app out of the box. But let's imagine you've run `ng new` already. What should you do next? How can you help ensure you build an awesome app that scales?

For the purposes of this article, I'm going to assume you already chose to use [SCSS](https://sass-lang.com/) and the [router](https://angular.io/guide/router) when prompted, because both of those are **very** good ideas.



## 1. Setup naive continuous integration with CircleCI
I call this a naive configuration, because it's not truly "continuous integration" until you have a much more robust system, but it's been a great starting point for applications I've worked on. I used to use TravisCI but it looks like the world is moving towards [CircleCI](https://circleci.com).

Create a file called `.circleci/config.yml`

If you know how to configure CircleCI, great! Go ahead and do that. If you don't? Just use my most basic config here:

```yml
version: 2
jobs:
  build:
    working_directory: ~/my-project
    docker:
      - image: circleci/node:12-browsers
    steps:
      - checkout
      - restore_cache:
          name: Restore Yarn Package Cache
          keys:
            - yarn-packages-{{ checksum "yarn.lock" }}
      - run:
          name: Install Dependencies
          command: yarn install --frozen-lockfile
      - save_cache:
          name: Save Yarn Package Cache
          key: yarn-packages-{{ checksum "yarn.lock" }}
          paths:
            - ~/.cache/yarn
      - run: xvfb-run -a npm run lint
      - run: xvfb-run -a npm run build --prod --progress=false

```

This config will automatically lint your project, and run a production build. It assumes you want Node 12, and to use [yarn](https://yarnpkg.com/).

Why not run tests? You should probably run your tests too! I don't include them here because I have found that at least on day 1 of a new project, maintaining tests can often be a distraction from figuring out how your application should be architected, but every app should ALWAYS pass lint checks, and be buildable.


## 2. Add a design system
The easiest way to start making your app look better is to add a design system like [Material Design](https://material.io/). The Angular team provides a set of components that embody Material Design in the library [Angular Material](https://material.angular.io). You can add it into your app via the CLI, and then create a navigation component for your app.

```
ng add @angular/material
ng generate @angular/material:nav app-nav
```

This will create an `app-nav` component with many of the features you'll need to start your app in the right direction, from a responsive sidenav to a top toolbar.

## 3. Add offline support and PWA superpowers
Offline support is a really desirable feature in web applications that can make your app much more capable than traditional web apps. Angular's Progressive Web App (PWA) support makes this much easier.

```
ng add @angular/pwa
```

Running this command will create a web app manifest (`manifest.webmanifest`) which you should customize along with your `favicon.ico` and icons files. It also creates an `ngsw-config.json` which configures how your application should behave offline. Which files should be cached, when should they be cached (`lazy` vs `prefetch`)? Should you prefer the latest content (`freshness`) or the fastest content (`performance`) for a `strategy`.

Read all about the various [options for the service worker config](https://angular.io/guide/service-worker-config).


## 4. Add Firebase Authentication
Almost every application I've ever built needed to know something about my users, and to offer customizations and data for them over time. Often this leads us to build custom auth systems, or manually integrate with Google, Facebook, etc. [Firebase](https://firebase.google.com) gives us a better way. A single integration with Firebase's auth system means we can get access to all of the social logins we need, and we never have to manage passwords, and eliminates much of the worry over the security of our users.

`ng add @angular/fire`

You'll want to create a Firebase project on [the console](https://console.firebase.google.com/) and add a Web App. It will give you a screen with a configuration that will look like this:

![firebase configuration screenshot](https://firebasestorage.googleapis.com/v0/b/fluindotio-website-93127.appspot.com/o/posts%2F5-things-to-do-after-ng-new%2FScreenshot_20190818_064841.png?alt=media&token=6519c072-a0d4-41b4-8e63-d13708766b4a)

Ignore the instructions and copy the JSON configuration object. You'll place this in your app module as follows:

```
imports: [
...
AngularFireModule.forRoot({.. THE COPIED OBJECT...}),
...
]
```

From there I typically create some sort of `auth.service.ts` that wraps the Firebase authentication methods and provides helpful Observables I use throughout my app like "is the user currently logged in?"

```

this.isUser = auth.authState.pipe(map(authState => (authState ? authState.uid : null)));
```


## 5. Add a server & backend
This one is newer, but very cool. When you get big enough, you might start reaching for more traditional database tools like Mongo/MySQL/PostgreSQL, and when you want to take full control of your backend, it's possible to do so in the same Angular project via a cool framework called NestJS.

`ng add @nestjs/ng-universal`

This one command will update your Angular application with a `server` folder where you can `nest generate` new APIs or backend tools, and also adds in built-in server side rendering, which can improve the feeling of speed in your application.