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

6 min readApr 24, 2021

// kindly Note Heroku no longer provides free hosting or pgSQL hosting.

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 are all our friends and relatives. So I made this app to use as a website and also manage blood donations for my group. I have created and shared this, so any group or NGO can use it 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.

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.

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.

web: vendor/bin/heroku-php-nginx -C nginx.conf public/

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

Add another file now name it “nginx.conf”

add_header X-Frame-Options "SAMEORIGIN";
add_header X-XSS-Protection "1; mode=block";
add_header X-Content-Type-Options "nosniff";index  index.php index.html index.htm;charset utf-8;gzip on;
gzip_comp_level 5;
gzip_min_length 256;
gzip_proxied any;
gzip_vary on;
gzip_types
  application/atom+xml
  application/javascript
  application/json
  application/ld+json
  application/manifest+json
  application/rss+xml
  application/vnd.geo+json
  application/vnd.ms-fontobject
  application/x-font-ttf
  application/x-web-app-manifest+json
  application/xhtml+xml
  application/xml
  font/opentype
  image/bmp
  image/svg+xml
  image/x-icon
  text/cache-manifest
  text/css
  text/plain
  text/vcard
  text/vnd.rim.location.xloc
  text/vtt
  text/x-component
  text/x-cross-domain-policy;location / {
    try_files $uri $uri/ /index.php?$query_string;
}location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt  { access_log off; log_not_found off; }error_page 404 /index.php;location ~ /\.(?!well-known).* {
    deny all;
}

Please copy-paste it. And save it.

Note: You can also go to the 
https://github.com/debjit/pass-config-files
And download the files as zip.
Unzip the files and go to "heroku" directory and upload two files to the repo.

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.

php artisan key:generate --show

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

php artisan migreate:fresh --seed --force

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”=>”API Enviornment Veriable — 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”

https://account.sendinblue.com/advanced/api/

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

Username: admin@admin.com
Password: password

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.