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

 

Update Nameservers

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:

Name: example.com

Domain name: example.com.herokudns.com

 

CNAME www record:

Name: www.example.com

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.

 

 

Heroku Settings

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.

 

Express Settings

Create a server.js file in the root of your Vue application and add the following to it: