advfe-unified-workspace

Advanced Front End: Running your application in your development environment

Your application is all good to go, so let's show you how to run it.

  1. Open two terminals, side by side

    an arrow showing an icon that allows a split terminal view

  2. Terminal 1 should be in the root directory where the Django API will run. From here, type the command to run the Django API

    python3 manage.py runserver

    Running the server may take some time, the terminal may appear to freeze for a minute or so before the preview runs.

    a terminal showing a runserver command

    During development, in order for your React project to access your development API, the Django server must be running, so ensure to run this first before terminal 2.

  3. Terminal 2 should be in the frontend directory. To enter that directory from the root, type the following command

    cd frontend

    Then run the React server with the following command:

    npm start

    a terminal in the frontend directory showing the npm start command

    Whenever you want to run your React code, ensure that you have cd'd into the frontend directory before running the npm start command, and that the Django server is already running the API.

  4. Wait for the npm build to complete, this can take a few minutes when running it for the first time in a recently opened workspace

    a successful npm build message

  5. The Django API will run on Port 8000, and the React application will run on Port 8080, or Port 3000 depending on which IDE you are using

    two terminals showing separate apps running in each

  6. Open port 3000 or 8080 to see your React app and check that the functionality all works

    an arrow pointing to the ports section in the bottom right of a terminal

    an example of a website in operation

  7. Ensure you have saved, committed and pushed all of your code to GitHub

Up Next

Congratulations! Your combined projects are now working within the same workspace! 🎉

Deployment

When you are ready to deploy your unified project, you will need these steps.