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 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 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 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, 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.
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 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 to stay up to date on the framework or checkout the docs for more information on how to bring your app idea to life with Lucky.
Top comments (0)