advfe-unified-workspace

Advanced Front End: Removing unnecessary files

Just a little housekeeping to keep things well organised.

As the repository for the Django DRF code will now house the entire application, including the React project. We must remove the React git folder, .gitignore file and README from the frontend folder. If you want to copy any contents of your README file from the React project to your DRF README, you can do this now. Alternatively, you can access it from the original repository later to update your unified workspace documentation.

Removing git and README files from the frontend folder

  1. In the terminal window, change directory to the frontend folder with the following command

    cd frontend

    a terminal showing 'cd frontend' and the resulting working directory

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, package-lock.json and README.md from the frontend folder

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

    rm ".git", ".gitignore", "package-lock.json", "README.md" -Recurse -Force

    Otherwise:

    rm -rf .git .gitignore package-lock.json README.md

    a terminal showing the command rm -rf .git .gitignore package-lock.json README.md

  2. 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.

  3. Install the npm packages required for developing with React using the following command

    npm install

    This install 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.

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

    cd ..

    a terminal showing the cd .. command the resulting working directory

    Ensure that your git commits are always made in the root folder, and not from the frontend folder when working in the terminal running the React server.

Adding node_modules to root .gitignore

In the previous section, you deleted the .gitignore file from the frontend folder because you don’t need the file - the .gitignore file in the root of your project will manage all files to be ignored by Git from now on. However, that inner gitignore file contained the node_modules folder, which contains all the React dependencies that you had installed in your frontend folder. You don’t want those dependencies pushed to GitHub, so you need to tell Git to continue ignoring the folder.

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 need to make some changes to our React project for the development environment.