app-generator/sample-docker-django-react

Docker Sample - Django & React (open-source) | AppSeed

Dockerized React & Django sample

Full-Stack Seed project generated by React App Generator top of Horizon Ui design. The backend logic is provided by a simple, easy-to-extend API Server that manages the Authentication flow (login, registration, logout) using JSON Web Tokens (JWT).

• 👉 React Horizon UI - LIVE Demo (from a similar product)
• 🚀 Built with React App Generator, timestamp 2022-11-18 16:28

✨ Start the app in Docker

👉 Step 1 - Download the code from the GH repository (using GIT)

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

👉 Step 2 - Start the APP in Docker

$ docker-compose up --build 

👉 Step 3 - Migrate DB

$ docker-compose run --rm appseed-app python manage.py makemigrations
$ docker-compose run --rm appseed-app python manage.py migrate

👉 Step 4 - Access the APP

Visit http://127.0.0.1:3000 in your browser. The App should be up & running.

✨ React Horizon UI

• Design crafted by Simmmple
• Styled with Chakra UI
• Dark-Mode, RTL Support
• UI Kit: 70+ components, 8 Sample Pages, 3 Customized Plugins

Tests (compatibility matrix)

NodeJS	NPM	YARN
v14.0.0	✅	✅
v16.0.0	✅	✅
v18.0.0	✅	✅

✨ Django API Features

• Stack: : Django / DRF / SQLite
• Up-to-date dependencies
• DB Layer: Django Native ORM, SQLite persistence
• Auth: JWT tokens managed via PyJWT
• API Definition - the unified API structure implemented by this server

✨ How to use it

Being a full-stack product, the backend and the frontend should be compiled and started separately. Before starting to compile the product, make sure you have the following tools installed in the environment:

• NodeJS - version 14.x or higher
• GIT - used to clone tjhe sources from Github
• Python3 - used in many tools

👉 Start the Frontend

Step 1 - Once the project is downloaded, change the directory to react-ui.

$ cd react-ui

Step 2 - Install dependencies via NPM or yarn

$ npm i
// OR
$ yarn

Step 3 - Start in development mode

$ npm run start 
// OR
$ yarn start

At this point, the app is available in the browser localhost:3000 (the default address).

👉 Start the Backend Server

Step 1 - Change the directory to api-server-django

$ cd api-server-django

Step 2 - Install dependencies using a virtual environment

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ pip install -r requirements.txt

Step 3 - Setup the database

$ python manage.py makemigrations
$ python manage.py migrate

Step 4 - Start the API server (development mode)

$ python manage.py runserver 5000

Use the API via POSTMAN or Swagger Dashboard at localhost:5000.

---

Dockerized React & Django - Sample Project generated by App Generator.

sample-docker-django-react's Issues

Backend API - DB Not Migrated

registration & signIN actions bump errors:

appseed_app          | [2022-11-18 16:37:32 +0000] [8] [DEBUG] POST /api/users/login
appseed_app          | Internal Server Error: /api/users/login
appseed_app          | Traceback (most recent call last):
appseed_app          |   File "/usr/local/lib/python3.9/site-packages/django/db/backends/utils.py", line 84, in _execute
appseed_app          |     return self.cursor.execute(sql, params)
appseed_app          |   File "/usr/local/lib/python3.9/site-packages/django/db/backends/sqlite3/base.py", line 423, in execute
appseed_app          |     return Database.Cursor.execute(self, query, params)
appseed_app          | sqlite3.OperationalError: no such table: api_user_user
appseed_app          |
appseed_app          | The above exception was the direct cause of the following exception:
appseed_app          |
appseed_app          | Traceback (most recent call last):