advfe-unified-workspace

Advanced Front End: Compiling the static files

Combining both Django and React static files and compiling them.

Now that the code for collecting and accessing the static files has been created, we can compile all of the static files from both the Django admin panel and the React files into the staticfiles folder for deployment.

  1. Collect the admin and DRF staticfiles to the empty staticfiles directory you created earlier, with the following command in the terminal

    python3 manage.py collectstatic

    a terminal with the result of the collectstatic command

  2. Next, we will compile the React application and move its files to the staticfiles folder. In another terminal, cd into the frontend directory

    cd frontend

    a terminal with the result of the cd frontend command

  3. Then run the command to compile and move the React files

    npm run build && mv build ../staticfiles/.

    the result of a terminal command that compiles and moves the React files

    You will need to re-run this command any time you want to deploy changes to the static files in your project, including the React code. To do this, you need to delete the existing build folder and rebuild it.
    This command will delete the old folder and replace it with the new one: npm run build && rm -rf ../staticfiles/build && mv build ../staticfiles/.

  4. Now your staticfiles folder should be filled with all the static files needed for deployment

    a file structure with a staticfiles directory

    Depending on your specific dependency versions, your file structure in the staticfiles folder may be slightly different from the above image. The folders we need to be sure are there are the admin and build folders.

Adding a runtime.txt file

This will ensure Heroku uses the correct version of Python to deploy your project.

  1. In the root directory of your project, create a new file named runtime.txt

  2. Inside the runtime.txt, add the following line:

    python-3.9.16

    a runtime text file with a single line of text that reads python-3.9.16

Up Next

Everything is ready to go, so let’s see if it works.