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
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
- You should have a Heroku account, if not create one.
- 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.
- In case you need some domain name, register it in advance. Otherwise you can access the URL which Heroku provides by default.
- 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
- 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.
- 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);
- 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. - Run command "heroku create [app_name]"It will create a project on heroku.
- After adding file using "git add ." and committing using "git commit m 'initial commit'", push it to heroku using command > git push heroku master
- 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.
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.
Source collected from http://www.c-sharpcorner.com/Blogs/46317/host-angular-app-on-heroku.aspx
No comments :
Post a Comment