Deploying

This is advice for Funkhaus team only.

Please see the Dropbox Paper guides for better guides.

You are simply deploying a Nuxt project, so any way you can deploy Nuxt will work with this boilerplate. Below I explain how we do it at Funkhaus using Heroku.

We recommended using CloudFlare for your DNS, it's free plan is enough to do everything you need.

Deploying to Netlify

Deploying a website

1. Add a Site
2. Connect the GitHub repo (use the Funkhaus account as the "owner", not your personal account)
3. Set "Build command" to npm run generate
4. Set "Publish directory" to dist
5. Under "Advanced build settings" you'll need to define any .env variables that are needed. Normally this is just GQL_ENDPOINT.
   1. Be sure to have your API URL be https:// otherwise Netlify will error.
6. Go to "Domain Settings" and change temporary domain to https://{CLIENT_NAME}-funkhaus.netlify.app or https://{CLIENT_NAME}-storybook-funkhaus.netlify.app
   1. If the site is going live, then you should connect a real domain.
7. If the site is in development, go to "Visitor access" and set password on the site.
8. Make sure the "Netlify Deploy" WordPress plugin is installed and configured. For new sites, leave auto-deploy turned off. Once the site is live, enable auto deploys.
9. In Netlify dashboard, go to "Deploy Settings > Build & Deploy > Post Processing" and disable "Form detection". This will decrease build time by 30 seconds.

Deploying a Storybook

1. Add a Site
2. Connect the GitHub repo (use the Funkhaus account as the "owner", not your personal account)
3. Set "Build command" to npm run storybook-build
4. Set "Publish directory" to storybook-static

Creating Heroku Pipeline

1. Connect the GitHub repo (use the Funkhaus account as the "owner", not your personal account)

When you have your app set up, you'll want to add it to a project specific pipeline.

1. Name your pipeline {project-name}-nuxt
2. Add the corresponding app to production or staging pipelines.
3. Make sure you transfer ownership to Funkhaus if you're part of the team.

Follow the instructions here pipelines

Deploying to Heroku

If you're comfortable with the command line, install the heroku cli tools.

Otherwise you can do it all through the website Dashboard too.

1. Login in to heroku
2. Create an App.
   1. To set up different environments (staging / production) follow the instructions here
   2. Name it {project-name}-production
   3. After beta you will create {project-name}-staging
3. Make sure you transfer ownership to Funkhaus if you're part of the team.
4. For your Heroku app, go to "Deploy" and connect it to the GitHub repo.
   1. Generally it's best to not enable automatic deploy, and to use the "Manual deploy" button at the bottom.
   2. For production apps, we should always deploy form master branch.
5. For your Heroku app, go to "Settings" and define all your Config Vars.
   1. Follow the instructions here to set up your required Nuxt config vars.
   2. Be sure to add the same config vars that are in you .env file too.

Go Live!

1. Prep Nuxt to go live.
   1. Disable Basic Auth on servers .env file or settings panel.
   2. Set the environment endpoints to be the new domain names. Probably https://api.your-site.com/graphql.
   3. If you're using Shopify, https://shop.your-site.com/api/{version number here}/graphql.json. You may want to use a .env for these, it helps when dealing with staging setups.
   4. Be sure to turn off Privacy mode in Flywheel.
2. In Heroku, add your custom domain name to the App. See here. Note the "DNS Target" Heroku gives you, it should be some funny names and a random string like space-balls-12345drewish.herokudns.com.
3. Turn on SSL in Heroku using the "Automated Certificate Management" (this only works if you're hosting on a paid Heroku plan, which Funkhaus has).
4. In CloudFlare, click "+ Add Site" (top left of screen).
   1. When it asks for DNS entries, you'll want to set two CNAME's pointing to the "DNS Target" shown in Heroku (mentioned in Step 1).
   2. One CNAME for www and one CNAME set to @, which CloudFlare will then auto apply "CNAME Flattening", which is good. See here for more.
   3. Add an A-RECORD for your API backend, which is the WordPress install hosted on Flywheel. Generally you want this to be api.your-site.com.
5. Setting up www. and force SSL redirects in CloudFlare. You want two rules:
   1. Click 'Page Rules'.
   2. Click 'Add a rule'.
   3. Match the URL to *www.your-site.com/*.
      1. Select 'Forwarding URL' from the dropdown menu.
      2. Choose '301 - Permanent Redirect'.
      3. Set the redirect URL to https://your-site.com/$2.
   4. Match the URL to http://your-site.com/*
      1. Select 'Forwarding URL' from the dropdown menu.
      2. Choose '301 - Permanent Redirect'.
      3. Set the redirect URL to https://your-site.com/$1.
6. In Flywheel, add a new primary domain, this should match the CloudFlare entry you set above, probably api.your-site.com. When adding the domain ensure that the "Also add www" checkbox is not selected.
   1. Setup the free SSL on Flywheel, and then make sure "Force SSL" is turned on under Advanced.
   2. Be sure to turn off Privacy mode in Flywheel.
7. At this point, you will probably want to redirect your nameservers to point to CloudFlare. Probably these are close to homer.ns.cloudflare.com and marge.ns.cloudflare.com.
8. Confirm that CloudFlare's SSL mode is set to 'Flexible' under 'SSL/TLS' tab. You need to do this, as it conflicts with the auto SSL setup on Flywheel.
9. If the site uses Shopify, you'll need to "Add an existing domain". Probably this will be shop.your-site.com.
   1. In CloudFlare set a CNAME for shop.your-site.com to point to shops.myshopify.com.
   2. You do not need to setup an A-RECORD if you only want the shop to be on a sub-domain.
10. Login to Heroku, and on the "Deploy" tab on the production app, click the "Manual Deploy" button!