DEV Community

Cover image for Custom Build folder for React
Arjun Santhosh
Arjun Santhosh

Posted on

Custom Build folder for React

In this article, we will learn how to change the Build path of a React application. Here I'm using a shell script for moving the contents inside the build folder to another location.

  1. Create a {file-name}.sh file inside the root directory of your react app.

  2. Open to your package.json file.

  3. Just beneath the build script, add a new one called "postbuild" with a value "./{file-name}.sh".

if you are using Windows, use bash before executing the script.

Image description

This shell script is executed right after the build process, and the actual magic happens inside the shell script.

#If the folder exists, remove it first, then copy the files
if [ -d "./../server/public/${APP_NAME}/" ]; then

    rm -rv ./../server/public/${APP_NAME}/*
    mv -v build/* ./../server/public/${APP_NAME}/

#Else make a new folder and then move the files.
else
    mkdir -p ./../server/public/${APP_NAME}
    mv -v build/* ./../server/public/${APP_NAME}/
fi

Enter fullscreen mode Exit fullscreen mode

In my case, I just wanted to move the build folder contents to my server folder.
Before moving the content inside the build folder, I checked whether the output folder was already exiting. If there is a folder, I want to clean it first and move the contents.

This script can be customized to your need. Just go through some simple shell-script tutorials. Here what is helping us is the 'postbuild' script that will be automatically executed after the build command.

Happy Coding 🥳

Top comments (0)