DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Dockerized React & Django - Free Sample Project
Sm0ke
Sm0ke

Posted on • Originally published at blog.appseed.us

Dockerized React & Django - Free Sample Project

Hello Coders!

This article presents an open-source full-stack app built with React & Django bundled together under the same Docker setup. Once the sources are downloaded locally, if Docker is present, the product can be started with minimal effort, and all changes made on the sources for both components (React & Django) are pushed to the Docker container instantly. Thanks for reading!

Being released the MIT License, the Docker scripts provided in this sample can be used or incorporated into other projects or simply used for eLearning activities.

Django & React - Open-Source Dockerized Sample


✨ How to use the project

Before using the project, we need to have Docker properly installed and usable. If we're not sure about this fact, we can easily check by typing docker --version in the terminal. In my case, the output is this:

$ docker --version
>>> Docker version 20.10.14, build a224086
Enter fullscreen mode Exit fullscreen mode

If the output looks good, we can move on and start the mentioned project using Docker.

πŸ‘‰ Step 1 - Download the code

$ git clone https://github.com/app-generator/sample-docker-django-react.git
$ cd sample-docker-django-react
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Step 2 - Start the APP in Docker

$ docker-compose up --build 
Enter fullscreen mode Exit fullscreen mode

At this point, the app runs, but the database is not migrated yet.


πŸ‘‰ Step 3 - Migrate DB

$ docker-compose run --rm appseed-app python manage.py makemigrations
$ docker-compose run --rm appseed-app python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Step 4 - Access the APP

Here, the app is fully usable, we can register new users, authenticate and access the private pages just like in this LIVE Demo.

Dokerized Django & React - Dashboard Page.


Thanks for reading! For more resources, please access:

  • πŸš€ Free support provided by AppSeed (email & Discord)
  • πŸ‘‰ More free apps crafted in Flask, Django, and React

Top comments (7)

Collapse
 
crearesite profile image
WebsiteMarket

Would be useful to provide mode information regarding the implementation.
Thank you!

Collapse
 
raibtoffoletto profile image
RaΓ­ B. Toffoletto

Yes! I'd love to read how the app is structured and why! Just presenting it doesn't make much for engagement. πŸ˜‰

Collapse
 
sm0ke profile image
Sm0ke

Noted, ty

Collapse
 
sm0ke profile image
Sm0ke

Noted. Ty for reading.

Collapse
 
uithemes profile image
ui-themes

I see the used persistence is SQLite.
An update for PostgreSQL might be useful.
Thank you for this project.

Collapse
 
sm0ke profile image
Sm0ke

Noted. Ty!

Collapse
 
arifpateldubaiprestonuk profile image
Arif Patel Dubai Preston UK

Thank You For The Information!

Hey 😍

Want to help the DEV Community feel more like a community?

Head over to the Welcome Thread and greet some new community members!

It only takes a minute of your time, and goes a long way!