React Django Boilerplate

screenshot of React Django Boilerplate

react redux redis postgresql django boilerplate

Overview:

The Django React/Redux Base Project is a boilerplate project that combines Django as the backend and React as the frontend. It provides a base structure and setup for building web applications using these technologies.

Features:

  • Frontend: Uses React, React Router, Babel, Webpack, Redux, Redux Thunk, and fetch API.
  • Backend: Built on Django and Django REST framework.
  • Database: Uses PostgreSQL as the database.
  • Styling: Includes style loaders for CSS, SASS, and LESS, and integrates with Font Awesome and Bootstrap.
  • Testing: Includes testing frameworks like Mocha, Enzyme, and pytest for frontend and backend tests.
  • Development environment: Provides Docker scripts for easy setup and deployment.

Running without Docker:

  1. Set up the environment variable on your machine, preferably in a .env file.
  2. Install Node.js and Yarn.
  3. Compile and run the project by running the following commands:
$ yarn
$ yarn run dev
$ virtualenv -p /usr/bin/python3 virtualenv
$ source virtualenv/bin/activate
$ pip install -r py-requirements/dev.txt
$ cd src
$ python manage.py migrate
$ python manage.py loaddata fixtures/admin_fixtures.json #optional
$ python manage.py runserver
  1. Open your browser and visit http://localhost:8000/ to see the React single page app.

Running with Docker:

  1. Create a file with the environment variable ( .env.temp).
  2. Install Docker and Docker Compose.
  3. Build and run the project using the following commands:
$ docker-compose build
$ docker-compose up
  1. To stop the development server, use:
$ docker-compose stop
  1. To stop and remove all Docker containers, networks, volumes, and images, use:
$ docker-compose down
  1. To access the shell in a container, use:
$ docker ps  # get the name from the list of running containers
$ docker exec -it yourContainerName_frontend_1 bash
  1. The database can be accessed at localhost:5433.

Summary:

The Django React/Redux Base Project is a boilerplate project that combines the Django backend with the React frontend. It provides a set of pre-configured tools and features to simplify the process of building web applications using these technologies. The project includes features such as React, Redux, React Router, Django REST Framework, and Docker for easy deployment.