DevTeam.Space Product Development Blog

Explore our in-depth product development tutorials and new technology announcements published by our software development experts

All articles

How to Deploy your Dart app to Heroku?

Dart is an easy-to-learn programming language that is really taking off. Heroku is one of the most prominent ‘Platform as a Service’ (PaaS) in the market today.

Together the pair are a great solution for mobile app development. Dart makes web and mobile app development easier, while Heroku provides the platform for the app.

If you have a Dart app and wondering how to deloy it to Heroku, I will explain just how to do this in this article.

Contents

First things first: Why programm with Dart?
What is the future of Dart language programming?
What is Heroku?
Why choose Heroku PaaS?
How does Heroku work?
Deploy Dart app to Heroku: Explained
Planning for more complex Dart apps on Heroku?

First things first: Why program with Dart?

Google built their latest cross-platform mobile development framework ‘Flutter’ using Dart. The framework enables developers to create powerful native apps on iOS and Android using a single codebase.

The recent high profile developments using Dart have drawn lots of focus from the development community.

Dart operates according to the same concept as many other popular object-oriented languages. These include C#, Java, and JavaScript. Since most developers already know these, Dart is very easy to learn.

Most frameworks enable developers to share portions of the code base on different platforms. Dart scores well in regards to this as you only need to develop a single app and then natively compile it to both Android and iOS. Flutter plays on this advantage.

Dart allows the sharing of the code base between mobile and web applications as well, which is a significant advantage. Read more about it in “Why Dart is the language to learn in 2018”.

Dart also helps developers to improve their productivity. Another key advantage of Dart is that you can both compile ‘Ahead of time’ (AOT) and ‘Just in time’ (JIT). The former is very helpful in allowing apps to work natively. The latter also helps during the development and testing.

Dart is also good for reactive programming. This type of programming focuses on data flows and propagating change. Programming languages enabling reactive programming should make it easy to express static and dynamic data flows. Dart does this.

In this kind of programming, one component emits data flow, while libraries provide underlying structures that facilitate data exchange. Read more about reactive programming in “What is reactive programming?”.

What is the future of Dart language programming?

Dart is an open-source object-oriented programming language that was created in 2011. It was developed by Google. Programmers can use it for both client-side and server-side development.

While initially successful, the number of job postings requiring this language has been stagnant for some time, something which implies that it was not doing so well. However, a number of big companies have implemented it. Google uses it in Google AdWords, Google Fiber, and more recently in Flutter. Workiva, Adobe, and Blossom do too.

This has led many to believe that the language doesn’t have a robust future. However, knowledgeable developers consider it as a language that will last the long term. For many, Flutters’ use of it vindicated their stance. Read more about it in “Is Dart programming dead already?”.

So far, Flutter has received very positive reviews. The ease with which coders can develop native-like mobile apps is clear. Programmers didn’t miss the fact that the framework is built using Dart. This led to the renewed interest in Dart.

Googles’ newly proposed ‘Fuchsia’ operating system (OS) makes the future even more interesting! There are possibilities that Fuchsia might soon replace Android. Read more about it in “What is Google’s Fuchsia OS, anyway?”.

Guess what? Google is developing it using Dart. This means that Dart has a very bright future.

To read more about the language, visit the Dart language homepage. Dart 2.1, a version of the recent Dart 2 release is already available on the market. Dart 2 has been brought out to help boost web developers’ productivity. Performance and scalability are key areas that will benefit from Dart 2.

You can read this Dart 2 announcement for more information.

What is Heroku?

Heroku is one of the earliest PaaS providers. It’s been around since 2007 when it used to support only one programming language – Ruby. Salesforce.com later acquired it. Heroku now supports many other popular programming languages, for e.g., Java, Node.js, Scala, Python, PHP, and Go.

PaaS is a cloud computing model where PaaS providers handle the cloud infrastructure, networking, servers, storage, middleware, OS, runtime environments, database provisioning, security, and scaling. PaaS providers also make it very easy to integrate 3rd party APIs.

Developers only need to bring their code and data to the table. PaaS providers offer DevOps tools, therefore, developers can automate testing, build management, and deployment. Programmers can run their web apps on PaaS platforms, while PaaS providers manage the platform. PaaS has made the developer the new king.

There are many reputed PaaS providers, for e.g., AWS Elastic Beanstalk, Google App Engine, Oracle Cloud Platform, Microsoft Azure, etc.

In an eariler article, I compared several PaaS providers in “10 top PaaS providers for 2019”. Heroku is a popular and established PaaS, although Salesforce.com also has their Salesforce ‘application Platform as a Service’ (aPaaS).

Why choose Heroku PaaS?

There was a time when thinking about PaaS brought Heroku to mind instantly. Heroku has been in the business for over a decade, long before many other of the current PaaS providers had even thought of doing so. Heroku remains a popular choice for many developers and entrepreneurs. Read more about the popularity of Heroku in this Business.com review of Heroku.

Its process model enables really quick app deployment. Heroku retains a high degree of focus on its core offering, i.e., to provide a platform for web app development. It doesn’t compete with other 3rd party providers that offer a variety of services in the PaaS landscape. It makes integration with these services easy.

Heroku offers a highly valued developer experience to both entrepreneurs and enterprises. On its website, it claims to serve over 23 billion requests daily. 7 million apps run on its platform, utilizing over 150 add-on services. They count giants like Toyota among their enterprise customers. This makes it a major player.

How does Heroku work?

Before I explain a Dart app to Heroku deployment method, let’s briefly understand how Heroku works. The first step to deploying a Dart app to Heroku is to define an application. Note that it can be in a language supported on Heroku, for e.g., Java, Ruby, etc.

By ‘defining an application’, I refer to specifying the language, the development framework, and a description of dependencies. If you are developing in a language that Heroku doesn’t support, you can use custom buildpacks. I will explain that part shortly.

The platform should know which part of your app that it needs to execute. If you already have existing code, you don’t need to make any changes to deploying it on Heroku. Read “How Heroku works” to know more about it.

Heroku uses Git to deploy apps. It’s a powerful version control system. This distributed system is highly popular with most developers. Note that you can also transport your source code to Heroku using other means, for e.g., an ‘Application Programming Interface’ (API).

After Heroku receives your application source code, it initiates a build process. The process is language-specific, although the pattern is similar. Heroku runs your application in a single ‘Dyno’. The deployment process creates a virtual machine (VM) image called a ‘slug’.

The slug uses a buildpack. A VM instance launched from this slug is called a Dyno. Read more about it in this Stackoverflow Q&A thread titled “What exactly is a single Hero Web Dyno?”.

Heroku buildpacks are collections of open-source scripts. These scripts are used for compiling the course codes for apps on Heroku. Developers can use buildpacks to extend the build system of Heroku, to support a particular language or other customizations etc.

Buildpacks also enable developers to make binary packages available to the runtime environment. Buildpacks determine the build process for an app. Read more about Heroku buildpacks in “Customize your build with Heroku Buildpacks”.

Deploy Dart app to Heroku: Explained

So how can you deploy your app, so that it is running Dart in the cloud with Heroku? To explain this, I will use a reference article by Jermaine Oppong, a web development expert. Jermaine writes his piece focusing on Dart 2, i.e., the latest release.

When it comes to code snippets or commands, I refer you to “Deploying Dart 2 apps on Heroku”, which i will call my ‘reference article’.

Setting up your environment

Firstly, you will need to set up a Heroku PaaS account. Visit the Heroku sign-up page for this. Heroku uses Git, therefore, you need to set up a Git account. Read “GitHub – account setup and configuration” to know how you can do so.

Most experienced developers prefer to use ‘Command Line Interfaces’ (CLIs). I assume it’s the same with you or your development team. You will be glad to know that Heroku provides CLIs that make your with on the platform easier! It’s easy to install the Heroku CLI, visit their CLI page on their developers’ center.

You also need the Dart 2 SDK. Download it from the Dart 2 page on the Dart language website. The webpage also has the required instructions.

Your web project

This is the app you will deploy to Heroku. You may already have coded one. If you haven’t coded one yet, you can get a sample Dart 2 “Hello World” code from the Dart language website.

Open a Heroku terminal from your command prompt, and navigate to your project. You need to write an HTTP server. This requires you to declare dependencies. Please consult the reference article for detailed commands.

Execute the project locally:

You will need to begin by executing the project locally, however, for that, you need the “webdev” tool. The webdev page of the Dart language website provides detailed instructions for installing and configuring this tool.

You need to activate webdev. Subsequently, run relevant commands to generate the bundle. These commands will create your build folder. After this, you can execute relevant Dart execution commands and. Check your localhost on your browser and verify that the sample app is running. Check the reference article for commands.

Your new Heroku app:

For deploying Dart 2 apps on Heroku, you need to create apps on Heroku first. Heroku CLI is quite versatile. You can use the Heroku terminal and CLI to create a Heroku app.

After you enter the required commands, Heroku will generate a random name for your app, and create it. You need to commit the app. This is the initial commit. The reference article describes the necessary commands.

Configure the Heroku buildpack for Dart

If you run deploy commands now, they will not work. PaaS platforms require buildpacks to run apps written in particular languages. I mentioned earlier about the various languages Heroku supports, for e.g., Java, Ruby, etc. Heroku already has buildpacks for those languages.

Heroku doesn’t yet support Dart. That doesn’t mean our project has come to a dead-end! Heroku allows custom buildpacks. Jermaine, the author of the reference article has customized such a buildpack for Dart 2. You can find it in this GitHub repository.

Execute relevant commands to configure the Dart 2 buildpack for Heroku. These commands will instruct the buildpack to get the latest SDK, moreover, these will also build your project using the webdev tool. Check the reference article for commands.

Deploy Dart app with private dependencies to Heroku

Now that you have set all the required dependencies, and configured all the tools, it’s time to deploy. You need to create a ‘procfile’ at the project root. This should have the necessary instructions to start the server.

You need to commit the changes. Use the “push” command to deploy. You can get the syntax for the commands in the reference article. The Heroku terminal will display the status of this deployment operation.

The messages will also show you the URL of your web app. After you receive the message confirming successful deployment, you can open your browser and navigate to that URL, to check whether your sample app is executing.

That’s it, you are done!

Planning for more complex Dart apps on Heroku?

This guide shows you to deploy a simple app written in Dart, to Heroku. If you are planning for more complex Dart apps on Heroku, then a deployment tutorial isn’t enough.

Depending on the requirements, you might need to engage with development partners. Check our guide “How to find the best software development company?”.