Skip to content
Related Articles

Related Articles

Django+React Full Stack Development Setup using Dact
  • Difficulty Level : Medium
  • Last Updated : 01 Feb, 2021

When we work on a project having Django as our Back-end and having a powerful front-end using React, the development setup takes a significant amount of time to setup – configuring Babel, Webpack, URLs, views, etc.  We used to set up this earlier to get started with ReactJS before npx create-react-app came.

The npx create-react-app command enables us to work on react without thinking about all the Babel, Webpack, etc. It becomes a problem when we try to use npx create-react-app in our Django app. So in this article, we are going to use a Python CLI App or Package- Dact. Dact enables us to set up a React-Django Development setup in just a single command. It’s open-sourced and its code is available on GitHub

Note: Make sure you have Python, pip and npm installed in your system.

Follow the below steps to successfully set up a React-Django project in your system:

Step 1: First we need to install dact using pip as shown below:

pip install dact



Step 2: Check if dact is successfully installed by typing “dact” in your terminal.

dact 

Step 3: To start a Django-React Full stack development project, just type- 

dact {your_project_name}

It creates a Django project with the name you provided and a frontend app named- “reactfrontend”. You may also set up the project using your custom front-end app name using

dact {your_project_name} {react_front_end_app_name}

Step 4: Enter the Project 

cd my_project

Step 5: Run Django Server 

python manage.py runserver

Your Welcome Page serves at localhost:8000



Step 6: Watch the changes in React file. 

Open a different terminal and type 

dact-watch

Note: Make sure you are in the same directory as manage.py.

Let dact-watch run in the background while you work on your Front-end.

Step 7: Edit your React Front-end. To edit the React file, you need to go to : 

reactfrontend > static > src > App.js

Let’s write Hello GeeksForGeeks. 

Make the changes. Make sure dact-watch is running in the background. Refresh your Welcome Page. 

Now you may create your own Django app for the back-end and develop your dream project using React and Django with the help of Dact..

 Attention geek! Strengthen your foundations with the Python Programming Foundation Course and learn the basics.  

To begin with, your interview preparations Enhance your Data Structures concepts with the Python DS Course. And to begin with your Machine Learning Journey, join the Machine Learning – Basic Level Course

My Personal Notes arrow_drop_up
Recommended Articles
Page :