Fullstack app: Deploying the Fullstack Application on Render with Docker

This is the third part of this tutorial.

On the first part we have built the frontend, using Vite, React and Typescript.
The second part we build the backend using Spring Boot.

Now, we are going to deploy the application on Render.

Running locally

To test if everything is working fine, we are going to run all the parts of our application locally.

For that, we are going to use Docker-compose.

So, let's build our docker-compose.yaml file.

Create a docker-compose.yaml on the same level of the directories backend and frontend.

docker-compose.yaml

services:
  postgres-db:
    image: postgres:latest
    ports:
      - "5432:5432"
    environment:
      - POSTGRES_DB=database
      - POSTGRES_USER=user
      - POSTGRES_PASSWORD=1234
    volumes:
      - postgres_data:/var/lib/postgresql/data

  spring-app:
    build:
      context: "./backend"
      dockerfile: Dockerfile
    ports:
      - "8080:8080"
    environment:
      - SPRING_DATASOURCE_URL=jdbc:postgresql://postgres-db:5432/database
      - CORS_ALLOWED_ORIGINS=http://localhost:9090,http://react-app:9090
    depends_on:
      - postgres-db

  react-app:
    build:
      context: ./frontend
      dockerfile: Dockerfile
      args:
        - VITE_GET_MESSAGES_URL=http://localhost:8080/allmessages
        - VITE_POST_MESSAGES_URL=http://localhost:8080/sendmessage
        - VITE_DELETE_MESSAGES_URL=http://localhost:8080/deletemessage
    ports:
      - "9090:9090"
    depends_on:
      - spring-app

volumes:
  postgres_data:  

For this we create a PostgreSQL database inside the container and our backend is going to send the messages, that come from our frontend to him.

After this we can run the command, to start all of our containers

docker compose up -d 

If everything is fine, you can open your frontend on your browser at the url http://localhost:9090 and writing your messages.

Setting up the Neon database

Make the login at the Neon.

Select the free plan.

Select the java url for your database, copy this url and save, because we are going to pass this as a environment variable:

Now, your Neon database is ready to be connected with your backend.

Deploy on render

Login on Render.

Go to your dashboard and select Deploy a Web Service

Paste the public git repository of your project here:

Front end deploy

After you connect the repository with render. Scroll down the page a little bit.

• Language: Docker
• Branch: I'm using master, if yours are main feel free to change.
• Root directory: We are building frontend, then the root directory is ./frontend

Scroll down and set the environment variables.

You can see in the docker compose file that we are going to use three environment variables:

• VITE_GET_MESSAGES_URL=""
• VITE_POST_MESSAGES_URL=""
• VITE_DELETE_MESSAGES_URL=""

But the values, for now, will remain empty. Because we need the url from our backend.
We'll come back later and set these variables to the correct value.

You can deploy your app now, but remember, you can't send or read messages, for now.

Remember to save the url of the front end to pass to our backend.

Back end deploy

Go to your dashboard and select Deploy a Web Service

Paste the public git repository of your project here:

After you connect the repository with render. Scroll down the page a little bit.

• Language: Docker
• Branch: I'm using master, if yours are main feel free to change.
• Root directory: We are building frontend, then the root directory is ./backend

Scroll down and set the environment variables.

You can see in the docker compose file that we are going to use two environment variables:

• SPRING_DATASOURCE_URL= Insert the url you got at Neon database
• CORS_ALLOWED_ORIGINS=Insert the url you saved from the frontend deploy,http://localhost:9090,http://react-app:9090

Deploy your app.

Save the url of your backend.

Fix the front end variables

Now, we are going to set the values of our front end variables:

• VITE_GET_MESSAGES_URL="https://your_url_from_backend/allmessages"
• VITE_POST_MESSAGES_URL="https://your_url_from_backend/sendmessage"
• VITE_DELETE_MESSAGES_URL="https://your_url_from_backend/deletemessage"

Save, rebuild and deploy your frontend app.

Conclusion

That's it you build the front-end, back-end of an application and connected to a database.

You can increment this project whatever you like.

Thanks for reading !

📍 Reference

• Render Docs

💻 Project Repository

• Project Repository on Github

👋 Talk to me

• LinkedIn
• Github
• Portfolio