This repo contains the sample application for Building and testing Cloud applications with LocalStack and Docker guide on Docker Docs. This simple to-do List application allows developers to upload images to S3-emulated LocalStack and add task lists to the local MongoDB database.
Notice: This sample repo is intended to support the guide mentioned above. As such, the application code is purposely kept simple to keep the focus on the guide's content and should not be considered production ready.
- Frontend: React, Material UI.
- Backend: Node.js, Express
- Database: Mongo(running locally for storing tasks)
- Object Storage: LocalStack (for emulating S3 and storing images locally for testing purposes)
This project contains the following components:
- /backend - This directory contains the Node.js application that handles the server-side logic and interacts with the database. This directory contains configuration settings for uploading images to LocalStack (emulated AWS S3). The uploadConfig.js file is responsible for configuring the S3 client to connect to the LocalStack S3 endpoint. This allows the backend application to store and retrieve images associated with the Todo List items.
- /frontend - The frontend directory contains the React application that handles the user interface and interacts with the backend.
- Clone the repository
git clone https://github.com/ajeetraina/todo-list-localstack-docker
- Navigate into the project.
cd todo-list-localstack-docker
To launch this project, you have two options - run the app natively (without containers) or run everything in containers.
To run the app natively, you will need to run LocalStack and Mongo using Docker Compose while run frontend and backend locally.
docker compose up -d
docker compose up -d
[+] Running 4/4
✔ Network todo-container-supported_default Created 0.1s
✔ Volume "todo-container-supported_mongo-data" Created 0.0s
✔ Container mongo Started 0.4s
✔ Container localstack Started 0.3s
aws --endpoint-url=http://localhost:4566 s3 mb s3://mysamplebucket
It should show the following result:
make_bucket: mysamplebucket
npm install
node index.js
Server is running on port 5000
Connected to MongoDB
Open a new terminal and run the following command:
npm start
By now, you should see the following message
Compiled successfully!
You can now view frontend in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.1.3:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
It shows the image is successfully uploaded.
# mongosh
Current Mongosh Log ID: 66cb1093118d7d4cc1c76a8a
Connecting to: mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.3.0
Using MongoDB: 7.0.12
Using Mongosh: 2.3.0
For mongosh info see: https://www.mongodb.com/docs/mongodb-shell/
To help improve our products, anonymous usage data is collected and sent to MongoDB periodically (https://www.mongodb.com/legal/privacy-policy).
You can opt-out by running the disableTelemetry() command.
------
The server generated these startup warnings when booting
2024-08-25T10:58:46.918+00:00: Using the XFS filesystem is strongly recommended with the WiredTiger storage engine. See http://dochub.mongodb.org/core/prodnotes-filesystem
2024-08-25T10:58:47.668+00:00: Access control is not enabled for the database. Read and write access to data and configuration is unrestricted
2024-08-25T10:58:47.668+00:00: /sys/kernel/mm/transparent_hugepage/enabled is 'always'. We suggest setting it to 'never' in this binary version
2024-08-25T10:58:47.668+00:00: vm.max_map_count is too low
------
test> show dbs
admin 40.00 KiB
config 60.00 KiB
local 40.00 KiB
todos 8.00 KiB
test> use todos
switched to db todos
todos> db.todos.countDocuments()
2
todos> db.todos.countDocuments()
3
todos>