advfe-unified-workspace

Advanced Front End: Starting a React Project inside the DRF project

Prerequisites:
These steps assume you have an active VS Code workspace for your DRF project, including a .venv with the required dependencies installed.

These steps will show you how to set up a new React application inside the workspace and repository for your DRF project.

  1. Open the workspace for your DRF project

  2. Open the terminal window and create a new folder called frontend in the root directory

    mkdir frontend

    a new directory is shown in the file structure

  3. Change directory to be inside the frontend folder with the following command

    cd frontend

    a terminal with the result of the cd frontend command

  4. Make sure that Node.js v16 is installed and selected on your machine. If you need a reminder on how to do this, please revisit the Node.js installation guide for Windows or for MacOS.

  5. From inside the frontend directory, run the following command to create a new React app and install all the working dependencies used in the Moments application

    npx create-react-app . --template git+https://github.com/Code-Institute-Org/cra-template-moments.git --use-npm

    a terminal with a command to create a React app

  6. Enter y to confirm and then click enter

    a terminal with an input expecting a y to proceed

  7. Wait for all dependencies to be installed. This installation will take some time, the terminal may appear to freeze for a few minutes. Once it does start to show activity you can ignore any deprecated warnings, these are extremely common and expected with npm installs. When the installs have been completed, your terminal will look like this

    a terminal showing a couple of suggested commands

Before you proceed with the next step, verify that you are in the frontend directory by using the pwd command. Running the next step from your workspace in the wrong working directory is dangerous.

  1. Enter the following command to remove the .git folder, .gitignore file and README.md from the frontend folder as these already exist within the root directory of your DRF project

    If you are using PowerShell as your VS Code terminal shell:

    rm ".git", ".gitignore", "README.md" -Recurse -Force

    Otherwise:

    rm -rf .git .gitignore README.md

    a terminal showing a file removal command

  2. When you have completed these steps, your file structure should look like this

    a file structure with edits to the frontend directory

  3. From inside the frontend directory, run the following command to check that the basic React app is running

    npm start

    a terminal showing the npm start command

  4. Once the npm build finishes successfully, the React app should open automatically in the browser. If the app doesn’t open automatically, you can open it by pressing and holding CTRL (Windows) or CMD (MacOS) and clicking on the localhost URL displayed in the terminal.

    an arrow pointing to the running React app localhost URL in the terminal

    a react app with no content

  5. Stop the running application with CTRL-C in the terminal for a Windows machine, or CMD-C on a Mac

    a terminal showing that an app has been stopped with a keyboard interrupt

  6. Move back to the root directory of your project with the following command

    cd ..

    a terminal showing the cd upward command

  7. Inside the frontend folder, the node_modules folder will contain all the React dependencies that you will install during the development of your React app. By the end of your project, the folder will contain a huge number of dependencies and sub-dependencies, so you don’t want it tracked by Git nor pushed to GitHub.

    Open the .gitignore file in the root of your project, and add the node_modules folder to it, prepended by ** to make sure the folder is ignored regardless of which folder or subfolder it is located in.

    **node_modules/

    gitignore file in root of the project, opened in code editor, with node_modules folder listed inside the file

    Remember to save the file.

This would be a good point to commit your changes so far.

Up Next

We show you how to prepare the Django API for development.