Gulp deploy dist folder of Node app to Heroku

Question

I'm reasonably new to node, git, github and Heroku and I'm struggling to work out the best way of sending my application to Heroku without cluttering up the repo with my compiled, minified app and without doing too much in Heroku.

My node.js project looks a bit like this:

- client
     ... code
- server
     ... code
- node_modules
- package.json
- gulpfile.js
- dist
    - client
    - server

Everything apart from node_modules and dist goes into github.

The gulpfile compiles, minifies and concatenates everything ready for release in dist. How do I push just the dist folder to Heroku, without also putting it into github? What is best practice? I'd rather not send my gulpfile to Heroku as it means moving the devDependencies in package.json and using a post update script, as it ties the project to Heroku more than I'd like.

Reasons for not using post hook are summed up well in these two posts: https://stackoverflow.com/a/15050864/344022 & https://stackoverflow.com/a/21056644/344022, unfortunately they don't provide an easy to understand alternative.

Answer 1

Heroku now has a static buildpack in development to handle this (see https://github.com/heroku/heroku-buildpack-static)

Create a static.json file to use the files from dist/ with .html suffix and to re-route all calls back to the SPA

{
  "root": "dist/",
  "clean_urls": true,
  "routes": {
      "/**": "index.html"
  }
}

Extend package.json scripts to ensure dist/ directory is built, for example

"scripts": {
  ...
  "heroku-postbuild": "gulp"
}

So that dev dependencies from package.json get installed

heroku config:set NPM_CONFIG_PRODUCTION=false --app

Multiple build packs so you can build and deploy

heroku buildpacks:add heroku/nodejs --app <app_name>
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git --app <app_name>

Your procfile can be empty in this case.

Answer 2

I had the same problem of pushing only the dist folder to heroku app, Right now I am using a different approach, not sure the idle one, but it works for me. I created a deploy file and added the below code

  import {spawnSync} from 'child_process';

  function deploy(){ 
    options = {
      cwd: path.resolve(__dirname, './dist')
    };
    //push dist folder to deploy repo
    console.log('Initialising Repository');
    spawnSync('git',['init'],options);
    console.log('Adding remote url');
    spawnSync('git',['remote','add', remote.name, remote.gitPath],options)
    console.log('Add all files');
    spawnSync('git',['add','.','--all'],options)
    console.log(`Commit with v${version}`);
    spawnSync('git', ['commit','-m',`v${version}`], options)
    console.log('Push the changes to repo');
    spawnSync('git', ['push', '-f', remote.name, 'master'],options)
 }

kept repo iformation in package.json and read here, I am running this after a webpack build task. So this will push my new build to heroku. Even if the .git inside dist gets deleted it will take care of it.

Answer 3

Go on, set up a post hook on heroku which builds you app and copies the files to where they'll be served. This is fairly normal practice, and once it's set up all you need to do is a git push to deploy your app, which is really rather handy. The alternative is to have a separate repository which you manually copy the files to and push from, but that doesn't seem as slick to me, greater chance of human error by messing up the dependencies, or forgetting to delete generated files which are no longer needed etc.