Edit: I've since created my own create-react-app template and have updated my bash script.
Intro
So, I made a react-boilerplate project 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. 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.
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!
Top comments (1)
Thanks for sharing, have a nice day! :)