create-react-django-app
(Customers can be added through POST request or with the backend GUI at localhost:8000/customer/create)
What’s included?
Frontend
- TypeScript (frontend language)
- React (frontend framework)
- Create React App (support for TSX, ES6, TypeScript, no need to install bundler, …etc)
- An example fetch() GET request to the server in
client/src/App.tsx
Backend
- Python3 (backend language)
- Poetry (Python dependency management system)
- Black (formatter)
- Psycopg2 (PostgreSQL adapter for Python)
- Python-decouple (to get env file content)
- Django (backend framework)
- Django REST Framework (Django’s toolkit for building Web APIs)
- An example app in the
server/exampleApp
folder showing how to setup API models, serializers, and views
- PostgreSQL (database)
Getting Started
Clone this repository to your local machine:
git clone https://github.com/kevinshen56714/create-react-django-app.git
To run the client
In the project folder,
cd client
yarn && yarn start
To run the server
Django and PostgreSQL
You first need to have PostgreSQL installed and running, and create a user and a database. Afterwards, create a .env
file in the project root or server directory to store your database information along with some Django settings. It may look something like this:
.env
file (at project root or server directory)
SECRET_KEY = your-django-secret-key
DEBUG = True # set to False in production
DB_NAME = your-db-name
DB_USER = your-user-name
DB_PASSWORD = your-user-password
DB_HOST = localhost # set to your domain name in production
DB_PORT = 5432
Poetry
In addition to the database, you need to setup the Python environment. We use poetry for dependency management, so poetry needs to be installed first. Once installed, in the project folder,
poetry shell # this should create a virtualenv for you at .venv
poetry install
cd server
python manage.py migrate # make sure your selected Python interpreter is the one in .venv
python manage.py runserver
Once the server is running, you can go to localhost:8000/customer/, localhost:8000/customer/create to play around with the example API GET and POST requests.
If you add customers at localhost:8000/customer/create, you should see the customer information shown on the frontend at localhost:3000