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.
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
--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
You can find more configuration options in the netlify docs.
Building the App
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
Now to deploy our Angular app we just need to push to our git repository with:
git push origin master.
Our final directory structure looks like this:
/client # Angular Front End /_redirects /package.json /... /server # Lucky Api Back End /... /bin /deploy_server netlify.toml
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
- Create a Netlify app by connecting to your apps git repo
netlify.tomlconfiguration with the following:
[build] base = "client" publish = "client/dist/apps/portfolio" command = "npm run build-netlify"
_redirectsfile 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
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.
Latest comments (0)