COMM 429 CLI Script

The Assignment

For my COMM 429 course, I was asked to create a shell script that will partially automate my boilerplate for my projects and then create a blog post about it. I will start this post with the full code then a breakdown of what each part does.

Full Code

#!/bin/bash
# Jake D'Esposito 2023

if [ -z $1 ]
then
echo Enter project name as first argument no spaces.
exit
fi

# This step makes the react project using Create React App using the TypeScript Template.
# Requires NPM to be installed
echo Creating React Project
npx create-react-app $1 --template typescript
cd $1

echo Creating autodeploy GitHub Workflow
mkdir .github
cd .github
mkdir workflows
cd workflows
touch main.yml
set echo off
(
echo 'name: React App Deployement'
echo 'on:'
echo '  push:'
echo '      branches: [ master ]'
echo 'jobs:'
echo '  build:'
echo '      runs-on: ubuntu-latest'
echo '      steps:'
echo '      - uses: actions/checkout@v2'
echo '      - name: Deploy react app to github pages'
echo '          uses: tanwanimohit/deploy-react-to-ghpages@v1.0.1'
) >> main.yml
set echo on
cd ..
cd ..
npm config set homepage https://jakedesposito.github.io/$1

echo Make some starting changes or make an initial commit.
echo Also make sure to activate GitHub Pages on the gh-pages branch.

Breakdown

There are four different tasks that get run by this script.

Task 1: Project name check

The project name check checks to see if a project name has been provided to the script. It does this by checking to see if the first argument of the script has a value. If it doesn't the script prints a message and exits.

if [ -z $1 ] # Checks if the first argument has a value.
then
echo Enter project name as first argument no spaces. # Print an error message.
exit # Exit out of the script early.
fi

Task 2: Run Create-React-App

Next the script runs create-react-app with the TypeScript template. Here is where the project name is used. create-react-app requires a name for the project passed as the first argument.

npx create-react-app $1 --template typescript # Runs create-react-app with the TypeScript template.
cd $1 # Move into the newly created directory.

Task 3: Create GitHub Workflow

In my projects I use a special GitHub Workflow to build my React projects so I can host them on GitHub Pages. This part of the script takes care of the process of setting up the Workflow and setting the homepage for the app.

# Creates the directory that the workflow needs to be in.
mkdir .github
cd .github
mkdir workflows
cd workflows

# Creates and modifies the file with needed code.
touch main.yml
set echo off
(
echo 'name: React App Deployement'
echo 'on:'
echo '  push:'
echo '      branches: [ master ]'
echo 'jobs:'
echo '  build:'
echo '      runs-on: ubuntu-latest'
echo '      steps:'
echo '      - uses: actions/checkout@v2'
echo '      - name: Deploy react app to github pages'
echo '          uses: tanwanimohit/deploy-react-to-ghpages@v1.0.1'
) >> main.yml
set echo on

# Moves back to the root directory of the project.
cd ..
cd ..
npm config set homepage https://jakedesposito.github.io/$1

Task 4: Self Reminders

Task four is very simple. It is just two echo statements with reminders on what I need to do next.

Conclusion

This has been my template shell script that will create a react app project and set up auto-deployment to GitHub Pages.