Deploying Angular and Lucky Monorepo Using Netlify and Heroku
Tags: angular, lucky, netlify, heroku
Published: 2018-07-12 19:29:43

---
title: Deploying Angular and Lucky Monorepo Using Netlify and Heroku
published: true
description: Deploying Angular and Lucky Monorepo Using Netlify and Heroku
tags: Angular, Lucky, Netlify, Heroku
---
I like to keep my client and server together because it makes me more efficient by allowing me to open both apps in a single VS Code workspace. The difficulty comes when deploying the apps separately, but luckily we can use services like Netlify and Heroku to simplify that for us!

As a reference, [my blog](https://mikias.net/blog) is made with a JSON Api built with Lucky and a front end built with Angular. You can look at [the source code on github](https://github.com/mikeeus/portfolio) for an example of how to deploy these apps together, use nrwl and ngrx with Angular or build and test my Lucky apis.

The folder structure is something like this:

```
/client         # Angular Front End
/server         # Lucky Api Back End
/bin
  /deploy_server
```

## Lucky on Heroku

Heroku doesn't allow using a non root directory for publishing your applications. I got around this by using `git subtree` method that I learned from [this post on coderwall](https://coderwall.com/p/ssxp5q/heroku-deployment-without-the-app-being-at-the-repo-root-in-a-subfolder) which allows us to deploy a sub directory of our git repository.

### Prepare for Deploy

First create the heroku app, add the buildpack and set the environment variables necessary for the Lucky app to run on Heroku. You can find [full instructions in the Lucky Guides](https://luckyframework.org/guides/deploying-heroku/), the only difference being that **for the Lucky Api you only need the crysal buildpack.**

### Deploy!

Now the key difference is in how we deploy to heroku. Instead of `git push heroku master` we're going to use `git subtree` to only push a subdirectory of our repo.

```
git subtree push --prefix server heroku master
```

Change the `--prefix` parameter to the name of your sub-directory.

I put that command in a file at `bin/deploy_server` and made it executable with `chmod u+x` for convenience.

## Angular on Netlify

Netlify is easily my favorite service for deploying static applications. I use it for all my Angular apps and it has great features even at the free tier.

### Hooking Up to Git

To deploy all we need to do is log in to netlify, go to the sites page at `app.netlify.com/account/sites` and select the "New Site from Git" button.

This will prompt you to log in with Github or Bitbucket, then select a repository to link to. One done, it will watch for push events to the repo and deploy your application automatically, using magic, of course.

Joking. There is no such thing as magic. We actually need to tell Netlify how to build our app and where to find the `index.html` to serve. 

### Configuring Base Directory

Since our application is in a sub-directory we could create a `package.json` in our root directory and use a `"postinstall"` script to trigger an npm install and build (eg: `"postinstall": "cd client && npm install"`), then use a deploy command like `"build": "cd client && ng build..."`.

This will deploy fine the first time but due to the way netlify caches directories like `node_modules`, it will not cache the packages installed from the `package.json` in the sub-directory and subsequent deploys will fail. To get around this we need to create a `netlify.toml` file to set the base directory or our application, specify our build command and our publish directory. This will make netlify cache our `node_modules` folder correctly and allow our build scripts to run.

The file will look like this:

```
# netlify.toml

# Global settings applied to the whole site.  
# 
# “publish” is the directory to publish (relative to root of your repo),
# “command” is your build command,
# “base” is directory to change to before starting build. if you set base:
#    that is where we will look for package.json/.nvmrc/etc not repo root!

[build]
  base    = "client"
  publish = "client/dist/apps/portfolio"
  command = "npm run build-netlify"
```

**Note** the publish directory path needs to be set from the root, while the build command will be run from the base directory (in this case `client/`)

You can find more configuration options in the [netlify docs](https://www.netlify.com/docs/continuous-deployment/#deploy-contexts).

### Building the App

The `npm run build-netlify` actually expands to: `ng build --prod --build-optimizer && cp _redirects dist/apps/portfolio`. When running a single page application you need to redirect every non-root route back to your `index.html`, otherwise netlify will display a 404 page which we don't want.

We use a `_redirects` file with a simple configuration to handle this:

```
# client/_redirects
/* /index.html 200
```

### Deploy!

Now to deploy our Angular app we just need to push to our git repository with: `git push origin master`.

## Directory Structure

Our final directory structure looks like this:

```
/client         # Angular Front End
  /_redirects
  /package.json
  /...
/server         # Lucky Api Back End
  /...
/bin
  /deploy_server
netlify.toml
```

## TL;DR

**heroku build command:**
- Setup heroku using [instructions from the Lucky Guides](https://luckyframework.org/guides/deploying-heroku/) but remember **not to add the nodejs buildpack**
- Deploy with ```git subtree push --prefix server heroku master```

**netlify:**
- Create a Netlify app by connecting to your apps git repo
- create `netlify.toml` configuration with the following:
```
[build]
  base    = "client"
  publish = "client/dist/apps/portfolio"
  command = "npm run build-netlify"
```
- create `_redirects` file in your Angular root with the following: `/* /index.html 200`
- create a build script in your Angular app like this: `"build-netlify": "ng build --prod --build-optimizer && cp _redirects dist/apps/portfolio"`
- deploy with: `git push origin master`

## Join Us

I hope you enjoyed this tutorial and found it useful. Join us on the [Lucky gitter channel](https://gitter.im/luckyframework/Lobby) to stay up to date on the framework or [checkout the docs](https://luckyframework.org/guides) for more information on how to bring your app idea to life with Lucky.