Dart shelf backend deploying to Heroku.

Thiago Evoá
5 min readAug 15, 2022

--

Hello dev, in this article I'm gonna try to show how to create a Dart backend project using shelf and deploy it on Heroku.

In order to make it works I had to make some research in different places so if you are reading this, probably you will just need this resource to create yours.

Creating project

Open your terminal and type this command bellow, and you will have you project ready to go.

terminal

Another way to do this is using a vsCode, so for this press cmd + shift + P and type "dart new" and now you probably see the option for creating a new Dart project.

vsCode

Understanding server.dart

Once the project has been created, let's take a look on the server.dart file to understand what's going on here.

server.dart

Here is the entry point of the project and will have the routes handler with all the endpoints you define, and also the port which is set to listen the requests. By the way you can set middleware to do something before the request hit the endpoint.

Running project

As I said before the project is ready to run, and this is good because we don't have much effort to do so.

First let's run using the terminal, so on vsCode open up the terminal, go to the bin folder and type the command bellow and if you see something like the image, I guess is all good.

run terminal

The other one is pressing the play button on vsCode when the server.dart file is open and you will have the same thing.

run debug

Publish on GitHub

I wont focus on how to use Git, so if you don't know how to use it just make some research. After you create a repository on your Github just go to the root of your project and use these commands bellow.

This step will be important to publish the server to Heroku automatically after pushing to the master branch on Github.

push to GitHub

Heroku

For now I'll just use the Heroku web site to do these steps but if you are familiar using the Heroku cli go ahead.

And the first thing to do is creating a project that is going to host the backend, so for that, enter on your account go to "New" and press "Create new app".

heroku new app

The Heroku app does not support Dart and to make things work, after creating the Heroku project we need to add some configurations to allow the build.

So, go to the "Settings tab" and add these config variables bellow.

config vars
vars gist

One thing that's worth mentioned here, is related to the "DART_SDK_URL", because this on you need to use the version you have defined on your pubspec.yaml file and if you have a different version go to this link and copy the right link version for you.

Next step is add the buildpack url in order to make Heroku use this and build the project. In my case I forked the igridorik repository because I needed to make a change regarding the Dart version I'm using.

add buildpack

And as the result you should have something like this.

added buildpack

Linking Github on Heroku

The easiest way to deploy automatically when you have an update on your code, is connecting the Github repository to the Heroku, and for that go to the "Deploy" tab and search for the repository you created.

github repository link

After find it press the "Connect" button and you are good to go.

searching repository

Now if you want to make deploys automatically just press the "Enable Automatic Deploys" button choosing the branch you want to trigger this action.

adding repository

And you should have something like it.

automatically reply

So try to update something on your project and then push to the branch you choose. Now go to the "More" option o top right and select "View logs" to see if the build succeed.

build

But note if you try to reach the endpoints of your project it still will not work as expected, and this is because you need to add a Procfile file as the image below.

procfile

And once you push this file to the repository, take a look on the logs again, you will see that now your backend is listening on a port.

running on Heroku

And now if you don't know how to access your backend, just go to the "Settings" tab and go to the "Domains" section and press the link.

project url

This will be the result, so now go ahead and play a little making some changes.

hello world

Well, that’s it.. Dart in the backend is another alternative if you like this language and does not want to learn a different one to build a backend project. So give it a try and see if this frameworks fits on your needs.

--

--