How to set up django + react on hosting?

by hal.littel , in category: Third Party Scripts , a month ago

How to set up django + react on hosting?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by filiberto , a month ago

@hal.littel 

Setting up Django + React on a hosting server can be a bit complex, but here is a general guide on how to do it:

  1. Set up a Virtual Private Server (VPS) or a hosting provider that supports Python and Node.js.
  2. Install Django on the server by following the official Django installation guide.
  3. Create a new Django project by running the following command:
1
django-admin startproject myproject


  1. Install Node.js and npm on the server.
  2. Create a new React app by running the following command:
1
npx create-react-app myapp


  1. Build the React app by running the following command inside the myapp directory:
1
npm run build


  1. Set up a Django view that serves the React app by following these steps: a. Create a templates folder inside the Django app directory. b. Move the build folder from the React app to the templates folder. c. Create a view in Django that renders the index.html file inside the build folder. d. Update the urls.py file to route requests to the React app view.
  2. Configure Django to serve static and media files by adding the following settings to your settings.py file:
1
2
3
4
5
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')


  1. Collect and migrate static files by running the following commands:
1
2
python manage.py collectstatic
python manage.py migrate


  1. Start the Django development server by running the following command:
1
python manage.py runserver


  1. Access your Django + React app by visiting the server's IP address or domain name in a web browser.


Keep in mind that this is a general guide and there might be additional steps or configurations needed depending on your specific hosting environment. It's recommended to refer to the official Django and React documentation for more detailed instructions.