Skip to main content

Host Angular App on Heroku

Angular is one of the javascript frameworks which provides new dimensions of writing javascript and on the other hand Heroku is a web hosting platform which allows applications to host. Most importantly, it gives option to host various applications free of cost.

Now considering that an angular project is ready and need to be hosted somewhere so could be accessed publicly. There are few steps which will push the project on Heroku platform and enable the angular project to be browsed by outside world.

Pre-requisite:
1. You should have a Heroku account, if not create one.
2. Heroku toolbelt is installed on machine. Once installed using command prompt, enter
"heroku login" and provide your email and password to log into heroku account.
3. In case you need some domain name, register it in advance. Otherwise you can access the URL which Heroku provides by default.
4. Last and most important point, you should be ready with angular project. Insure that you are not getting any error while running commands like "grunt build" or "grunt serve".

Lets start to host it on Heroku:
1. Run the command "grunt build" on your angular project. Once succeed, it will create a "dist" folder in your project with compiled code and clean structure.

2. Heroku need a server to serve the files. As angular project only has static files, we will use Node server for serving the file.

Create a web.js file and keep it in root directory of project. Put the mentioned lines in that file and save it.
var gzippo = require('gzippo');
var express = require('express');
var app = express();

app.use(express.logger('dev'));
app.use(gzippo.staticGzip("" + __dirname + "/dist"));
app.listen(process.env.PORT || 5000);


3. Now create a procfile (without any extension) and keep it in root directory as well. Put the mentioned lines in that file and save it.
web: node web.js


Note: "procfile" is starting point of application and lines written in it is telling node server to execute "web.js" file which internally is serving content from "dist" folder.

4. Run command "heroku create [app_name]"
It will create a project on heroku.

5. After adding file using "git add ." and committing using "git commit m 'initial commiy'", push it to heroku using command
 > git push heroku master

6. It will push the project on Heroku project and give you the heroku path to browse the website. For instance, http://abc.herokuapp.com

You are done!!

In case some specific domain name is required to point to this app, can be done easily by providing CName and pointing to heroku app.


Please provide your feedback or email me to "email.bajaj@gmail.com" for any query.


Comments

Post a Comment

Popular posts from this blog

Nutch crawler and integration with Solr

Before moving ahead with this article, I assume you have Solr installed and running. If you would like to install Solr on windows, mac or via docker, please read Setup a Solr instance . There are several ways to install nutch which you can read from Nutch tutorial , however I have written this article for those who would like to install nutch using docker. I tried finding help on google but could not find any help for nutch installation using docker and spent good amount of time fixing issues specific to it. Therefore I have written this article to help and save time of other developers. Install nutch using docker- 1. Pull docker image of nutch using below command,      > docker pull apache/nutch 2. Once image is pulled, run the container,      > docker run -t -i -d --name nutchcontainer apache/nutch /bin/bash 3. You should be able to enter in the container and see bash prompt,      > bash-5.1#  Let's setup few important setting...

AJAX Progrraming

Ajax , shorthand for Asynchronous JavaScript and XML , is a web development technique for creating interactive web applications. The intent is to make web pages feel more responsive by exchanging small amounts of data with the server behind the scenes, so that the entire web page does not have to be reloaded each time the user requests a change. This is meant to increase the web page's interactivity, speed, and usability. The Ajax technique uses a combination of: XHTML (or HTML) and CSS, for marking up and styling information. The DOM accessed with a client-side scripting language, especially JavaScript and JScript, to dynamically display and interact with the information presented. The XMLHttpRequest object is used to exchange data asynchronously with the web server. In some Ajax frameworks and in certain situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server, and in other implementations, dynamically added tags may be used. ...

Call a custom Script from Excel

  It is quite common that we receive the data in Excel and several times we have to remove unwanted characters from columns or modify the data as per the requirement. To avoid manual fixes of these kind of requirements, we may use Macro to automate the process which not only increase productivity but also avoid manual errors. We can easily create Macro to quickly fix it. Here are the steps to create Macro and run it. Open Excel Goto View tab on Main menu Click on 'View Macros'. This should open a Macro popup. Enter Macro Name and click on + icon. Clicking on + icon should open Macro Coding screen(as shown below). Add your code in the function. Click on Save icon to save the file with Macro. Click on Run icon to run the Macro code. The above code should remove additional line breaks from columns. Reference Code(to remove line breaks from columns): Sub MyCustomMacro () Dim MyRange As Range Application . ScreenUpdating = False Application . Calculation = xlCa...