3

I have enough knowledge about Django and recently learned react and i like to combine both.

I have gone through a couple of video tutorials and i am successful in integrating them.

but the problem is i should either build a rest API and a react app in two different projects and them combine them or i need to run npm run build every time i make any changes on my front end.

so if anybody have an alternative for this(Running React on Django server continuously without running build again and again) please tell me.

E_net4
  • 27,810
  • 13
  • 101
  • 139
maneesh sandra
  • 116
  • 8
  • If you used create-react-app for the front end, then no. Code is live. You ONLY run npm build when you are ready to "deploy", say, to heroku or netlify or one of the app hosts. – Kasey Chang Jun 25 '20 at 14:29
  • You can use django-webpack-loader, but you will have to modify/override the create-react-app webpack config. I only recommend it if you are fairly familiar with how webpack works and can be configured. https://github.com/owais/django-webpack-loader – Håken Lid Jun 25 '20 at 14:48

2 Answers2

1

In your package.json file there will be script tag as below,

 "scripts": {
    "dev": "webpack  --mode development ./src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
  },

add --watch tag with dev script as below,

 "scripts": {
    "dev": "webpack --watch --mode development ./src/index.js --output ./static/frontend/main.js",
    "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
  },

Then do npm run dev

So the JS will run without breaking.Even if you change the files inside React, it will update and run automatically.

The file structure may vary according to your project but logic is same

Anoop K George
  • 1,605
  • 12
  • 40
0

I have just Found a simplest way to keep using django apis while working with react

step 1 -> just npm run your react project inside your react directory using

npm run start

you will see the development server starts at Local: at http://localhost:3000 by default

step 2 -> move to your django project directory and start your django server in another terminal

python manage.py runserver

this will start your django at http://127.0.0.1:8000/ by default

now whereever you are using axios or other bundles to fetch apis from django at the same port just add http://127.0.0.1:8000/ to the starting of their url

**you may now see an error that says cors header is not allowed from 3000 port but don't worry just few more steps **

step 3 -> go to your django directory and write

pip install django-cors-header

step 4 -> now go the setting files of the django project and make following changes as below :

INSTALLED_APPS = [
...
'corsheaders',
...
]
MIDDLEWARE=[
...
'corsheaders.middleware.CorsMiddleware',
...
]

CORS_ALLOWED_ORIGINS = [
'http://localhost:3000',
]

for thanks mark this answer useful! and for any query comment

Shreyansh Gupta
  • 382
  • 1
  • 10