⚙ Building full-stack web app on Heroku - Part 1

⚙ Building full-stack web app on Heroku - Part 1

Context

Before Heroku, I tried many serverless/hosting services like Netlify and Vercel which are goods. But I wanted to deploy a spring-boot app. I think it's also doable with AWS.

For the POC, I keep it simple and prototype a library webapp.

via GIPHY

In order to make a full-stack web app on Heroku, I need to do 4 steps:

  1. Database to store data
  2. Backend to access and manipulate the database
  3. To expose a restful API
  4. Frontend to display the data

I choose to build database and backend, then frontend later (part 2)

Database and spring-boot backend on Heroku

1. Database on Heroku

via GIPHY

I simply follow this post to create a database on Heroku 😉

At the end of his post, he introduced 5 database explorers so I choose to go with the software TablePlus to visualize database content.

2. Create Spring boot backend

a. Create spring restful API

To build this part I found lots of resources actually:

b. Issues faced

via GIPHY

java version

Postgres Database interaction

For the hibernate properties file

For the Heroku database connection, the issue was Heroku is providing you a config var DATABASE_URL=postgres://username.password@localhost:5432/postgres

Unfortunatly, the correct spring.datasource.url format is this one DATABASE_URL=jdbc:postgresql://127.0.0.1/postgres

Check bellow articles

active profile

In order to be able to run the code locally and deployed on Heroku, you have to set up profiles AND/OR config variables.

/* active profile by default */
spring.profiles.default=none
/* To specify your active profile you run on */
spring.profiles.active=dev,hsqldb

/* --- OR --- */

/* move your sensitive data to environment variables */
datasource.username = ${DB_USER_NAME}
datasource.password = ${DB_USER_PASSWORD}

c. Local and distant test

via GIPHY

Coming soon: PART 2 -Angular frontend