Yes, this is a pretty specific post, but if you use this type of stack, a checklist like this can help streamline your workflow.
The Vue JS application needs to have postinstall and start scripts
An example is below:
The Vue JS application needs to have express installed as a dependency
You can install it with the command:
npm install --save express
You'll need to update the nameservers wherever you registered the domain name (GoDaddy, Namecheap, etc). You can get the values for the nameservers in the Cloudflare DNS tab.
Cloudflare DNS Settings
In order to work with a SSL cert from Heroku, you'll need two CNAME DNS records in your cloudflare account. Examples:
CNAME root record:
Domain name: example.com.herokudns.com
CNAME www record:
Domain name: www.example.com.herokudns.com
Cloudflare SSL Settings
Update the Cloudflare crypto tab settings to use 'Full' for the SSL type and then 'On' for 'Always use HTTPS'.
Side note: I've seen a few posts where the SSL settings needed to be set to 'Flexible'. I've always needed it set to 'Full', but just an FYI.
In your Heroku app's dashboard, in the 'settings' tab, add the custom domain names, for both the root and www versions. And then select that you want to use the automatically managed ssl.
Create a server.js file in the root of your Vue application and add the following to it: