Michael Curran
['Hip', 'Hip'] - A Web Dev Blog

['Hip', 'Hip'] - A Web Dev Blog

Write a simple script for creating web app components

Write a simple script for creating web app components

Michael Curran's photo
Michael Curran
·Sep 7, 2021·

4 min read

Subscribe to my newsletter and never miss my upcoming articles

Creating modern web applications often includes creating countless components and accompanying files. Even if you are terminal savvy, creating a basic React component would take a few commands.
For example, we could create a component named "Counter" like so.
(This assumes you have a "components" directory at the root level of your app).

mkdir ./components/Counter
touch ./components/Counter/Counter.js
touch ./components/Counter/Counter.module.scss

This is of course quicker than switching back and forth from mouse and keyboard to create a few new files but we can still be quicker and get some boilerplate in there while we're at it...

Lets get Bashing.

Start by creating a file for the script and opening it in your editor of choice, we'll name it createComponent.sh for simplicity's sake.

  touch createComponent.sh

Now inside that file we're gonna add some real simple code to get things rolling and get acquainted with bash scripting.

  #!/bin/sh  
mkdir ./components/Counter;
touch ./components/Counter/Counter.js;
touch ./components/Counter/Counter.module.scss;

If you have a keen eye, you'll notice this is the exact same code we typed above to create the necessary component files. But now we can make that happen with just a single command. Let's test it out!

  ./createComponent.sh

Boom

via GIPHY

Obviously, we aren't going to be creating a counter component multiple times in a project so the script as it is, is useless. In order to make this into something we can actually use we have two options while working with the command line.

  • Positional Parameters
  • Flags

Either option is a viable way to pass arguments to our script, the difference being that positional parameters are dependent on, you guessed it, their position and flags can have their order swapped when executing the script. For use in this post we will be making use of flags, but take the example scripts into consideration and decide what is best for you.

With Positional Parameters

  #!/bin/sh  
echo "first name: $1";  
echo "last name: $2";

Now run the script

./examplescript.sh john smith

and examine the output

  first name: john
  last name: smith

With Flags

#!/bin/sh  
  while getopts a:f: flag
do
    case "${flag}" in
        a) firstname=${OPTARG};;
        f) lastname=${OPTARG};;
    esac
done
echo "first name: $firstname";
echo "last Name: $lastname";

Now run the script

./examplescript.sh -f smith -a john

and examine the output

  first name: john
  last name: smith

You'll notice we get the same output even though we mixed up the order of our arguments. A matter of preference really, but I much prefer not needing to remember the specific order of things to get the output I want from my script.

Write an actually useful script

Now that we know about flags and positional parameters in bash, we can create a more useful script than we made before by passing some arguments to it like the desired filename.

createComponent.sh

#!/bin/sh  
  while getopts a: flag
do
    case "${flag}" in
        a) filename=${OPTARG};;
    esac
done
echo "creating a component named $filename";
mkdir ./components/$filename;
touch ./components/$filename/$filename.js;
touch ./components/$filename/$filename.module.scss;

Now run the script

./createComponent.sh -a Counter

You should see the terminal print out "creating a component named Counter" as well as the new directory and files inside the component folder. Pretty nifty eh?

via GIPHY

We can take it one step further!

Before calling it quits on this post we are going to add in just a little bit of boilerplate code to the javascript file. That way it is ready to render as soon as the script finishes running. We can do this by using the command echo and the operator ">" or ">>" followed by the file we wish to output to. The difference between the two is that ">" will write directly to the first line of the file and ">>" will write to the file from a new line at the bottom file. In our case we want the filename is being passed to the script at run time + .js, so we will create a new variable by saying "jsfile=$filename.js" above our new echo lines.

createComponent.sh

#!/bin/sh  
  while getopts a: flag
do
    case "${flag}" in
        a) filename=${OPTARG};;
    esac
done
echo "creating a component named $filename";
mkdir ./components/$filename;
touch ./components/$filename/$filename.js;
touch ./components/$filename/$filename.module.scss;  

jsfile=./components/$filename/$filename.js
echo "import { useState } from 'react';" > $jsfile
echo "import classes from './$filename.module.scss';" >> $jsfile
echo ' ' >> $jsfile
echo "export const $filename = (props) => {" >> $jsfile
echo "    return (" >> $jsfile
echo "        <p>I'm the new $filename component look at meeeeee</p>" >> $jsfile
echo "    );" >> $jsfile
echo '};' >> $jsfile
echo >> $jsfile

echo "Created a component named: $filename";

And again to run the script we'll type the command.

./createComponent.sh -a Counter

There you have it

We just created a really simple shell script to help us make new components in a flash. Of course, this could still be expanded upon in many ways, but it lays a really good foundation for what we can accomplish with some simple scripting to make our front end development lives easier.

You can download the script from here github.com/MiCurran/createComponent.sh.

Thanks for reading, hope you learned something!

 
Share this