Discuss

Deploying your Web Sites/Apps to Heroku

On this page

With Wappler you can easily deploy your web site and apps to Heroku with a single click.

What is Heroku?

Heroku is a cloud platform as a service supporting several programming languages. One of the first cloud platforms, Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go.

In our example we will show you how to use NodeJS with Heroku.

Creating a Heroku Project

In order to use Heroku with Wappler you need to setup an account and then create your project.

Register a Free Account

The first step is to create an account (it's free) on Heroku website. Go to: https://www.heroku.com/ and click the Sign Up For Free button:

Screenshot_7|690x395

Follow the steps and create your account.

Create a Heroku App

The next step is to create your app. Log in with your newly created account and click Create new app button:

Screenshot_8|690x395

Add a name for your app. It will be used to access your app like: https://your-app-name.herokuapp.com/:

Screenshot_9|690x395

Select your region:

Screenshot_10|690x395

And click the Create App button:

Screenshot_11|690x395

Your app is now ready:

Screenshot_12|690x395

Creating a Wappler Project

Open the Project Manager:

Screenshot_1|690x395

Select New Project tab and create a new blank project:

Screenshot_2|690x395

Add a name for your project:

Screenshot_3|690x395

Select a project folder:

Screenshot_4|690x395

Open the Hosting Type menu and select Heroku Hosting:

Screenshot_5|690x395

Then open the Server Model menu and select NodeJS:

Screenshot_6|690x395

Enter your Heroku Project name here. If you don't know what is it, you can click the Manage Heroku Apps button:

Screenshot_13|690x395

It will open your Heroku projects in the browser, so you can check your project name:

Screenshot_14|690x395

Enter it and click Save:

Screenshot_15|690x395

You are done. Your new project is ready, it will ask you to deploy to Heroku - select yes:

Screenshot_16|690x395

Then you will see a message, saying you need to log in - select yes:

Screenshot_40|690x394

The terminal opens asking you to press any key, so click inside the terminal and press any key:

Screenshot_44|690x394

This will open your browser, where you will see a Log In button. Click it:

Screenshot_41|690x394

You will see a success message, when you are logged in:

Screenshot_42|690x394

Close the browser window and go back to Wappler. The Commit dialog appears - enter your comment and version, then click Commit:

Screenshot_43|690x394

Heroku Project Targets

Wappler automatically creates 2 targets for your project - development and production. The development target points to a local NodeJS server and the production target points to your Heroku project.

You can see the targets by clicking the project settings icon:

Screenshot_20|690x395

You can see your targets in targets menu:

Screenshot_21|690x395

Deploying to Heroku

When you are done setting up your page(s) and preview them on your development target you can then switch to the Production target and deploy your project.

Open the Targets menu, then select Production:

Screenshot_31|690x398

And click the Deploy to Heroku button:

Screenshot_32|690x398

The commit dialog appears. Enter your comment and version, then click the Commit button:

Screenshot_33|690x398

Your app has been uploaded to Heroku and you can preview it in your browser:

Screenshot_1|690x312