Building A Custom React Boilerplate Script
Tags: react, bash, webdev, discuss
Published: 2019-12-12 00:03:45

**Edit:** I've since created my own [create-react-app template](https://dev.to/jimmymcbride/create-your-own-react-template-49p7) and have [updated my bash script](https://dev.to/jimmymcbride/create-react-app-bash-script-update-49da).

##Intro

So, I made a [react-boilerplate project](https://github.com/JimmyMcBride/react-boilerplate) where I used create-react-app and built off their base app, deleted what I didn't want and added things that I did want, like; styled-components, react-router, redux and more. I set everything up so that it's all ready to go. I've also been building my own style library with styled components, that I keep in here for easy access. 

[There are ways to set up your own custom create-react-app boilerplate out there](https://dev.to/jimmymcbride/create-your-own-react-template-49p7). This is only one way you can do something like this, that I find to be quite robust in it's functionality, as well as fun to use (probably because it's something that I created).

I have that react-boilerplate repo in my Documents folder. The script I wrote spins a new create-react-app and replaces the src/ and package.json with the src/ and package.json from my boilerplate repo. It doesn't stop there, after that is done, it opens the project up in my code editor and starts the local server so I can immediately start coding my new project.

##Step 1: Create A New Bash Script

So in my bin directory (`~/bin`) I've created a file named `create` turned it into an executable with the command `chmod 755 create` and inside that executable file are the lines of code that make this thing happen. Since it's a script, let's go through it line by line and see what's going on here. If you want to learn the basics of creating your own bash script, [check out this blog](https://dev.to/jimmymcbride/write-a-bash-script-101-4n2p).

###Script Tip:
Once you have created a file for your script, in your bin folder, (you can type `echo $PATH` into the terminal to print your path variable out and see the location of all your bin folders) you can run the command `chmod 755 <name-of-script>` or `chmod +x <name-of-script>` to turn that file into an executable file that you can run by simply typing the name of the script file you wrote (in any directory). Since I named mine create, I can type create in any directory to run that particular script. Once we get into the code, you will see that I have to add an additional argument, after create, to have everything run properly.

##Step 2: The Code

```
#!/bin/bash
# Ever script needs to start with a shebang (#!).
# followed by the language your writing the script in (bin/bash). 
# For example python would be `#!/bin/python`.
# Node.js would be `#!/bin/env node`.

# Scripts run commands one after the other, in the order we put them in.
# Our first line of code is going to install create-react-app inside
# the directory we issue the `create` command.
yarn create react-app $1

# The $1 is the bash variable for our first argument after our command.
# So if we type `create my-app` our script will create a react app inside
# our current directory named `my-app`

# Since I already have my own react boilerplate I want to replace the 
# src/ and package.json in our current react app we just spun up.
# To do that, we are first going to delete the src/ and package.json
# inside this directory and copy over our src/ and package.json from our
# custom boilerplate to our new create-react-app project

# But first, lets move inside the directory of our current project to 
# make thing a little easier
cd $1

# Now let's delete those files we don't need
rm -rf src/
rm package.json

# Now we can copy our personalized src/ and package.json
# We will be using this command in different directories most likely
# and it's a good idea to use an absolute path here so our script knows
# exactly where to grab it from when we call it.
cp -R ~/Documents/react-boilerplate/src/ $PWD
cp ~/Documents/react-boilerplate/package.json $PWD

# $PWD is a bash variable for Present Working Directory

# Now that that is done, we need to update our node modules
yarn

# Once that is done we can have this script open our project in our 
# favorite coding text editor
code .

# And since we are already inside the project directory in the terminal
# let's just spin this up on localhost here while we're at it
yarn start

```

##Conclusion 
Bash scripts can be very powerful and robust while being pretty simple at the same time. I know writing this script has already saved me a TON of time and makes life just that much easier. I hope you enjoyed everything, thanks for reading!