This article is intended for the developers who want to get their hands on Angular2 without waiting for a stable version. Scaffold an Angular2 app with this Yeoman generator, and deploy it easily on Heroku.
While Angular has been a strictly opinionated framework of JavaScript, it has always been quite un-opinionated about how you structure your application and how you deploy it. Being un-opinionated about the project structure and deployment strategy is both good and bad. Good, because it lets you decide how you arrange (MVC or based on features) your code and where to deploy it. Bad, because it becomes quite confusing for beginners to decide which of the many ways to structure and deploy angular applications.
With Angular2 framework development reaching Release Candidate milestone, developers have already started trying out the latest builds to get used to it. Also, TypeScript is being considered as the recommended language for Angular2, adding one extra step (compilation) in the development process. I have checked out Angular2 quickstart project & angular-cli. Although the boilerplate is quite self-sufficient, it still lacks the same stuff as Angular: structure and deployment. Playing around with the quickstart project was good, but I wanted to check out the complete flow of developing, testing and deploying an Angular2 app and make the process as easy as possible until we have a stable build of Angular2 with some official guidance from its creators.
I have created a Yeoman Generator (listed on Yeoman.io, named ‘angular2-sass-gulp-heroku’), which creates the boilerplate for a simple Angular2 app. This structure is similar to what is generated by angular-cli. The resulting application uses all the commands provided by the cli along with a few tweaks which have been added to include SASS and Bootstrap SASS.
Moreover, I have added steps to deploy the generated application on Heroku without any extra dependencies, just using the modules which are already in the project.
Below, I will explain how to use this generator to get a fully working Angular2 startup app with:
- A folder structure to arrange your TypeScript code neatly
- Gulp tasks to clean and move static font files within build
- SASS (SCSS syntax) & Bootstrap SASS support (Javascript library of Bootstrap included)
- Minor tweaks for Heroku deployment
Prerequisites
- Node.js (version >= 4)
- Git installed on your development machine
- Heroku account & Heroku Toolbelt installed. Log in to Heroku using Heroku toolbelt on your terminal/CMD prompt.
Install global dependencies
Run these commands to globally install angular-cli, Yeoman & the app generator:
npm install -g angular-cli
npm install -g yo
npm install -g generator-angular2-sass-gulp-heroku
Generate the project
I will be using test-project as project name.
Run:
yo angular2-sass-gulp-heroku test-project
The generator will ask following details:
- Project name
- Small description of the project
- Github URL(if any) of the project
Once you fill in these details, the project will be created in the directory where you executed the above command.
Change to the project directory now.
cd test-project
“Synerzip team is very responsive & quick to adopt new technologies. Team naturally follows best practices, does peer reviews and delivers quality output, thus exceeding client expectations.”
“Synerzip’s agile processes & daily scrums were very valuable, made communication & time zone issues work out successfully.”
“Synerzip’s flexible and responsible team grew to be an extension to the StepOne team. Typical concerns of time zone issues did not exist with Synerzip team.”
“Synerzip worked in perfect textbook Agile fashion – releasing working demos every two weeks. Though aggressive schedules, Synerzip was able to deliver a working product in 90 days, which helped Zimbra stand by their commitment to their customers.”
“Outstanding product delivery and exceptional project management, comes from DNA of Synerzip.”
“Studer product has practically taken a 180% turn from what it was, before Synerzip came in. Synerzip cost is very reasonable as compared to the work they do.”
“Synerzip makes the timezone differences work FOR the customer, enabling a positive experience for us. ‘Seeing is believing’, so we decided to give it a shot and the project was very successful.”
“The Synerzip team seamlessly integrates with our team. We started seeing results within the first sprint. And due to the team’s responsiveness, we were able to get our product to the sales cycle within 7 months.”
“Product management team from Synerzip is exceptional and has a clear understanding of Studer’s needs. Synerzip team gives consistent performance and never misses a deadline.”
“Synerzip is different because of the quality of their leadership, efficient team and clearly set methodologies. Studer gets high level of confidence from Synerzip along with significant cost advantage of almost 50%”
“Synerzip’s hiring approach and practices are worth applauding. Working with Synerzip is like
“What you see is what you get”.”
“Synerzip has dedicated experts for every area. Synerzip helped Tangoe save a lot of cost, still giving a very high quality product.”
“Synerzip gives tremendous cost advantage in terms of hiring and growing the team to be productive verses a readymade team. Synerzip is one company that delivers “co –development” to the core!”
“Synerzip is a great company to work with. Good leadership and a warm, welcoming attitude of the team are additional plus points.”
“Our relationship with Synerzip is very collaborative, and they are our true partners as our values match with theirs.”
“Synerzip has proven to be a great software product co-development partner. It is a leader because of its great culture, its history, and its employee retention policies. ExamSoft’s clients are happy with the product, and that’s how ExamSoft measures that all is going well.”
“They possess a great technical acumen with a burning desire to solve problems. The team always takes the initiative and ownership in all the processes they follow. Synerzip has played a vital role in our scaling up and was a perfect partner in cost, efficiency, and schedules.”
“As we are a startup, things change on a weekly basis, but Synerzip team has been flexible in adapting the same”
“Synerzip team has been very proactive in building the best quality software, bringing in best practices, and cutting edge innovation for our company.”
“We’ve been working for more than six years with Synerzip and its one of the better, if not the best, experience I’ve had working with an outsourcing company.”
“My experience with Synerzip is that they have the talent. You throw a problem at them, and someone from that team helps to solve the issue.”
“The breadth and depth of technical abilities that Synerzip brings on the table and the UX work done by them for this project exceeded my expectations!”
“Synerzip UX designers very closely represent their counterparts in the US in terms of their practice, how they tackle problems, and how they evangelize the value of UX.”
“Synerzip team understood the requirements well and documented them to make sure they understood them rightly.”
“Synerzip is definitely not a typical offshore company. Synerzip team is incredibly communicative, agile, and delivers on its commitments.”
“Working with Synerzip helped us accelerate our roadmap in ways we never thought possible!”
“While working with Synerzip, I get a feeling of working with a huge community of resources, who can jump in with the skills as needed.”
