Checklist for Deploying a Vue JS Application to Heroku with SSL and Cloudflare for DNS

Feature thumb vue

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:


Domain name:


CNAME www record:


Domain name:


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: