Containerization of a React app

[rpmolina]

Describe the feature

We can use Docker Compose to Dockerize a frontend app along with any necessary services, such as a database or backend API. To Dockerize a frontend app using Docker Compose, we can follow these general steps:

It's important to ensure that your docker-compose.yml file is optimized for size and security to ensure that your containerized app runs smoothly and securely.

Use Case

Reference

Proposed Solution

Create the example at examples/compose-react. You can use https://www.npmjs.com/package/create-awesome-node-app to check existing implementations for this issue.

After that add it as an example at examples/compose-react

Other Information

No response

Acknowledgements

• [ ] I may be able to implement this feature request
• [ ] This feature might incur a breaking change

Version used

Environment details (OS name and version, etc.)

┆Issue is synchronized with this Clickup task by Unito

[Siddharth9890]

@ulises-jeremias can i try this

[ulises-jeremias]

@Siddharth9890 sure!

[Siddharth9890]

hey @ulises-jeremias i have a doubt i have made a docker compose file just for testing is this fine?

version: '3'


volumes:
  postgres-data:
    name: my-app-postgres-data
  
services:
  frontend:
    build:
      context: ./frontend  
    environment:
      - REACT_APP_PORT=3000  
    ports:
      - ${REACT_APP_PORT}:3000 
   

  backend:
    build:
      context: ./backend  
    environment:
      - NODE_API_PORT=8080
    ports:
      - ${NODE_API_PORT}:8000 
    depends_on:
      - database  

  database:
    image: postgres:13  # Use a specific version of PostgreSQL
    environment:
      POSTGRES_USER: user_name
      POSTGRES_PASSWORD: password
      POSTGRES_DB: db_name
    volumes:
      - postgres-data:/var/lib/postgresql/data 

[ulises-jeremias]

@Siddharth9890 hey! you can use the following command to generate a small project and use it as reference 😊 not need to include the database and backend on this PR 👌🏻

https://www.npmjs.com/package/create-awesome-node-app

it will guide you to create a Frontend Application with our React Vite boilerplate and with docker

you can create a PR using that as referece 👌🏻