How did I host my Blood Donation Diary app on Heroku for free?

A brief description.

Blood Bank does not have enough stock. So my friends started a chat group and helped people who needed blood. But we can only help a very limited number of people as they all are our friends and relative. So I made this app to use as a website and also manage blood donation for my group. I have created and shared, so any group or NGO can use this and act promptly. Here is my app link.

Alpana Blood Donation Drive

I am using free services available. So you need to register for a couple of services. I use google login for every app, you can register using email too.

  1. heroku.com
  2. Cloudinary.com
  3. sendinblue.com
  4. github.com

We are deploying on Heroku. Heroku provide hosting, bandwidth and database. But it does not have any storage, which is needed to store requisition images. So I have chosen another free image hosting service Cloudinary. To send emails I am using the Sendinblue transactional email SMTP service. That's all we need for my application to run smoothly.

Let’s set up Heroku.

I am assuming you are registered with Heroku and in https://dashboard.heroku.com/.

Now click the new and fill-up the form, name and region and that's it. Your app is ready to deploy. Please note your app name will be your app URL.

Register to Github.

You can either fork it or just clone it in your local environment, I will be showing the fork method here.

For this example, I am using my Blood Donation Diary web app. Here is the GitHub link. Click fork and that's it now you have an own copy.

Now go to Deploy and connect to GitHub. Authorise Heroku, and search with the repo name you just forked, in this case, it is bddv1.

Add Configuration Files :

Now create a file “Procfile” without any extension.

And commit a new file. Select “Commit directly to the main branch”

Add another file now name it “nginx.conf”

Please copy-paste it. And save it.

Now you need to upload 2 config files to your cloned repo.

Add App Key:

Goto heroku dashboard and select “More”> “Run Console”.

Now you need to run code bellow to see the unique key for your app. Please keep it secret.

Copy the key and keep it to the safe place. Please copy it with out any space. You need it when adding “Config Vars”.

Let’s add a database:

Go to “Resources” and find “Heroku Postgres”, select plan name “Hobby Dev — Free” click “Submit Order Form”. That's it.

Your database is attached to this app.

Now click “Heroku Postgres” and go to settings.

You need database credentials to set up your app. Click “View Credentials” and copy the values.

Now you need to insert to the app “Config Vars”.

Goto settings and insert all database and other information you copied.

Click “Reveal Config Vars” and insert key-value pair as below.

Key = “DB_CONNECTION”, value =”pgsql”

Key = “DB_HOST”, Value = Host(From Heroku postgresql database credentials)

Key = “DB_DATABASE”, Value = Database (From Heroku postgresql database credentials)

Key = “DB_USERNAME”, Value = User (From Heroku postgresql database credentials)

Key = “DB_PASSWORD”, Value = Password(From Heroku postgresql database credentials)

Key = “DATABASE_URL”, Value = URI (From Heroku postgresql database credentials)

Please copy-paste all the values and don't add blank or space anywhere, this may cause an error.

Please insert “key”=“APP_KEY” and the result of “php artisan key:generate — show” to the “value” fiels. It’s important. Your app won’t run without it.

Let’s migrate:

Now the database is configured and needed to migrate tables. goto “More>Run Console” and enter

And that's your website is almost ready.

Upload Image:

Heroku does not support image upload, so we have to use the image storage service Cloudinary. Now register and get your app secret URL and add it to the app config file.

Add Config to your site variable in settings. Click “Reveal Config Vars” and insert key-value pair as below.

‘Key’ =“CLOUDINARY_URL” , “value”=>”copy your link from cloudinary dashboard”

“key”=>”CLOUDINARY_UPLOAD_PRESET” , ”value”=>”Get value from tutorials define bellow”

get your “CLOUDINARY_UPLOAD_PRESET” https://cloudinary.com/documentation/upload_presets from here.

The app will not display the requisition form if you did not upload it in the Cloudinary service.

Email configuration:

I am using Sendinblue email service, which also offers free email SMTP services. Goto “Transactional” section and copy and paste the settings from their website.

You need this key-value pair to work with Sendinblue.

KEY=VALUE

MAIL_MAILER=smtp
MAIL_HOST=provided-by-sendinblue
MAIL_PORT=587
MAIL_USERNAME=your-username
MAIL_PASSWORD=your-password
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=your-ngo-mail-address@domain.com
MAIL_FROM_NAME=”Your App Name”

And that's it. Your app is ready for serving. Please note you have to log in using these credentials.

Before deploy please see this config as an example and see you are missing any fields.

Note: If you are using space in value please add the value inside double quote like “”. For example, see APP_NAME, its value is inside double quote. But see MAIL_MAILER values it’s not inside any “”.

Deploy :

Now you can deploy your code to Heroku. Goto deploys and in manual deploy select main and deploys the branch. That’s it. Your app is now live. But note your app needs to be configured and a database to store data.

I hope all the best.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Debjit Biswas

Debjit Biswas

I am a Web Developer. I love to do experiments and share my journey with you. Please follow me for more posts. Go to https://debjit.in for more info.