ruby on rails - Deploy Angular 2 app to Heroku -


in past bundled angular 1 , rails apps , typically used heroku, has worked great me. i'm on angular 2 want separate out angular , rails code. i've created basic angular 2 app via angular-cli, haven't been able figure out how deploy heroku. i'm not using expressjs or that. figure out yet?

ok came solution. had add basic php backend, it's pretty harmless. below process.

first setup heroku app , angular 2 app.

  1. create heroku app
  2. set heroku buildpack heroku/php
    • heroku buildpacks:set heroku/php --app heroku-app-name
  3. create project via angular-cli
  4. add index.php file /scr below snippet

    <?php include_once("index.html"); ?>

  5. add procfile /scr below snippet

    web: vendor/bin/heroku-php-apache2

  6. added /deploy .gitignore

now used npm package push tarballs heroku

  1. here's simple package upload tarball, https://www.npmjs.com/package/heroku-deploy-tarball
    • npm heroku-deploy-tarball --save
  2. i'm using tar.gz create tarball
    • npm tar.gz --save
  3. then created deploy.js file @ root of projecdt following code. first run buildcommand specified , move index.php , profile dist folder. tarball entire dist folder , gets uploaded heroku.

var deploy = require('heroku-deploy-tarball'); var targz = require('tar.gz'); var exec = require('child_process').exec;  var requestedtarget = process.argv[2];  if (!requestedtarget) {   console.log('you must specify deploy target');   return; }  var targets = {   production: {     app: 'heroku-app-name',     tarball: 'deploy/build.tar.gz',     buildcommand: 'ng build --prod'   } }  var movecompressfiles = function (callback) {   exec('cp ./src/index.php ./dist/index.php',     function(err) {       if(err)         console.log(err);       console.log('index.php copied.');     });   exec('cp ./src/procfile ./dist/procfile',     function(err) {       if(err)         console.log(err);       console.log('procfile copied.');     });    new targz().compress('./dist', './deploy/build.tar.gz',     function(err){       if(err)         console.log(err);       else         callback();       console.log('the compression has ended!');     }); };  console.log('starting ' + targets[requestedtarget].buildcommand); exec(targets[requestedtarget].buildcommand, {maxbuffer: 1024 * 500}, function(error) {   if (!error) {     console.log(targets[requestedtarget].buildcommand + ' successful!');     movecompressfiles(function () {       deploy(targets[requestedtarget]);     });   } else {     console.log(targets[requestedtarget].buildcommand + ' failed.', error);   } }); 
  1. now run node deploy production , should deploy heroku.

edit

just got word heroku working on experimental buildpack allow static sites this. here link build pack.


Comments

Popular posts from this blog

angular - Is it possible to get native element for formControl? -

unity3d - Rotate an object to face an opposite direction -

javascript - Why jQuery Select box change event is now working? -