0

I have an application using Node.js with Aurelia on the front-end, which I want to deploy on Heroku.

To run the app locally, I need to execute following commands:

1. npm start 
2. cd public > gulp watch

After installing heroku-cli, tried publishing it using git push heroku master.

The problem is, Heroku only runs npm start when it's deploying the app on cloud. So it is able to start the server.

However, it doesn't know anything about cd public and gulp watch.

My question is, how can I tell Heroku to change directory to public and execute gulp watch command, once it has started the server?

software_writer
  • 3,941
  • 9
  • 38
  • 64

2 Answers2

1

Edit:

I forgot to address an important point. Since you only mentioned Aurelia in your question, I (wrongly) assumed that that's all you had.

Ultimately, for a production app you'll want to have a proper webserver hosting your Aurelia app.

Example:

For Aurelia apps I've built, I typically have 3 distinct processes running, each with their own port (or hostname):

  • IdentityServer
  • ASP.NET Web Api
  • OWIN FileServer

The third one is what hosts my Aurelia app as a static bundle.

There is no gulp or anything like that involved here. The server doesn't even have npm installed and sees it just like any other server-side application. And that's exactly how I deploy it; no node-related commands needed.

If you're using nodejs for your server-side stuff, use http-server to serve the static bundle.

When you host your aurelia app within your own serverside application you get the added benefit of being able to send some bootstrapping configuration directly along with the bundle, so you don't have to hard-code urls and such.

That's what I implied with "don't host a static site on heroku": bundle it up, and let your web application host it. My original answer would only apply if there is no server-side stuff involved.

Original answer:

It's generally not recommended to host static sites on heroku, see this blog post. The bottom line is that Aurelia sites are static, and a static site doesn't need an app server. It's unnecessarily expensive and doesn't have as good distribution as most CDNs do.

With that said, if you insist on hosting a static Aurelia site on Heroku then your best bet is to combine all your script calls into a single call which, as you say, already runs. So make your npm start script call gulp watch.

You'd probably want to npm install your dependencies and call ../node_modules/.bin/gulp watch instead of calling gulp globally.

When it comes to Heroku however, gulp watch in itself probably won't work because that will start a development server which will have no port binding in Heroku. It will run, but it won't be accessible from the outside.

gulp watch is not something you want to run on a server anyway because it will watch for file changes (which never happen there) and run things like browsersync which will be useless. Just bundle your app and start a normal http-server or better yet, upload the bundle ready-to-start into the correct folder and you're done.

Fred Kleuver
  • 7,797
  • 2
  • 27
  • 38
  • Thanks, can you please explain what makes Aurelia sites static? As per my understanding, static sites have fixed content generated before deployment. They display same content to every visitor. However, my Aurelia application is dynamic web-app, using Postgres and has lots of user interaction. Will that still be considered a static site? Thanks! – software_writer Mar 31 '18 at 23:03
  • @akshayKhot I edited my answer with some clarification – Fred Kleuver Apr 01 '18 at 00:19
0

You want to build your app and then deploy as if it were a fully-compiled, static application. With Aurelia CLI, that would be au build --env prod and then copy the scripts folder, index.html, and any dependencies like css, fonts, etc. to a separate folder. gulp build works the same way.

From there, you will publish the compiled app to Heroku as shown in this medium.com article:

https://medium.com/@winnieliang/how-to-run-a-simple-html-css-javascript-application-on-heroku-4e664c541b0b

The main part of the article is below, but here is the kicker - you are "tricking" heroku into thinking it is a PHP app. Serious! 

Head to root directory of the repo that contains index.html which dictates the main HTML page.
Run touch composer.json to create a file called composer.json.
Add the following line: {} inside.
Run touch index.php to create a file called index.php.
Add the line: <?php include_once("index.html"); ?> inside.
Now update the repo on Github if it’s connected to your account or Heroku command git push heroku master . Wait for the automatic deploy to work its magic and tada!

There are some other steps to make your compiled app into a repo (ie, git init) but this should work for you. It did for me.

smoore4
  • 4,520
  • 3
  • 36
  • 55