Django+React music controller

Django backend + React frontend web app

Following tutorial in https://www.youtube.com/watch?v=JD-age0BPVo&list=PLzMcBGfZo4-kCLWnGmK0jUBmGLaJxvi4j

Development

IDE setup

JetBrains Pycharm

Checkout project from GitHub
Set Python interpreter
This project was created with Python 3.10, but other versions should work.
Steps below in the terminal should be executed in the virtual environment (PyCharm activates it automatically).
pip install -r requirements-dev.txt
This will also install dependencies from requirements.txt
pre-commit install
Only needs to be done once.
PyCharm -> Preferences -> Languages & Frameworks -> Django -> Enable Django Support
Requires PyCharm Professional.
Project can be worked on with the Community edition as well, but some limitations will come up.

VS Code and others

Not going into the setup of other IDEs.

Install

Python / Django

Note: Best to work on a virtual environment. This page doesn't go into how to do that.

Install the development packages:

python -m pip install -r dev-requirements.txt

This project uses pyinvoke to facilitate common tasks. For a list of tasks:

inv --list

Javascript / React

cd music_controller/frontend
npm install

Run

In separate terminal/tabs, execute the following:

Backend:

cd music_controller
python manage.py runserver

Note: Use inv sys.alias to set the alias dm = python manage.py or have it set in the terminal's start scripts.

Frontend:

cd music_controller/frontend
npm run dev

Notes

Installed React 18, whereas the tutorial uses 17 (see package.json ). Other npm packages are also newer.

There's a new version for the Material UI for React 18+ and the name of the npm package is different and may result in different code.

Also, the tutorial uses class based React components, but this project is implemented using functional components.

NPM Package

package.json explained here.

Some versions in this repo are different, these are the most significant ones:

React 18 vs 17
Material UI 5 vs 4.
- Package names are different.
- @emotion/react and @emotion/styled need to be installed separately
```
cd music_controller/frontend
npm i @emotion/react @emotion/styled
```
React Router 6 vs 5.
Difference in imports and usage. See documentation.

Babel

babel.config.json explained here.

Webpack bundling

webpack.config.js explained here.

index.html

templates/frontend/index.html explained here, going over each of the imports here.

Overall installation

The installation steps in this tutorial went step by step, explaining along the way. This shows everything that's going. There are more straightforward ways to do these steps but it's a bit more black box.

npm init -y
npm i webpack webpack-cli --save-dev
Pack/Bundle JS code (transpile into a single JS file)
npm i @babel/core bable-loader @babel/preset-env @babel/preset-react --save-dev
Transpiler
npm i react react-dom --save-dev
React
npm i @material-ui/core (React <18)
npm i @mui/material (React >=18)
Material UI theme
npm i @babel/plugin-proposal-class-properties
Use async/await in JS
npm i react-router-dom
Routing in react
npm i @material-ui/icons (React <18)
npm i @mui/icons-material (React >= 18)
Icons for Material UI theme
npm i @emotion/react @emotion/styled Material UI dependencies (v6+)

joaonc/django-react-music-controller