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.
- create heroku app
- set heroku buildpack heroku/php
heroku buildpacks:set heroku/php --app heroku-app-name
- create project via angular-cli
add index.php file
/scr
below snippet<?php include_once("index.html"); ?>
add procfile
/scr
below snippetweb: vendor/bin/heroku-php-apache2
- added
/deploy
.gitignore
now used npm package push tarballs heroku
- here's simple package upload tarball, https://www.npmjs.com/package/heroku-deploy-tarball
npm heroku-deploy-tarball --save
- i'm using tar.gz create tarball
npm tar.gz --save
- 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); } });
- 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
Post a Comment