Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

It's fairly trivial to create a React project, but there's always a big hurdle between creating it locally and making it shareable so that someone else can run it. This lesson walks you through the process of automating creating a React project locally, creating the repository where it's going to be hosted, and creating shareable links where it can be run so that you can quickly and easily create single one-off demos and shoot them over to your friends and coworkers for sharing your code ideas in a working environment.


share-react-project() {
  if [[ -z "$1" ]]; then
    echo "Usage: share-react-project <project_name>"
    return 1
  fi

  local project_name="$1"
  local github_username=$(gh api /user --jq '.login')

  echo "Creating Vite project: $project_name"
  pnpm create vite "$project_name" --template react

  cd "$project_name"

  echo "Initializing Git repository"
  git init

  echo "Adding all files to Git"
  git add .

  echo "Creating initial commit"
  git commit -m "Initial commit"

  local codesandbox_link="https://codesandbox.io/p/github/${github_username}/${project_name}"

  echo "Adding CodeSandbox link to README.md"
  echo "" >> README.md
  echo "## CodeSandbox" >> README.md
  echo "[![Open in CodeSandbox](https://assets.codesandbox.io/github/button-edit-blue.svg)](${codesandbox_link})" >> README.md

  echo "Adding README.md to Git"
  git add README.md

  echo "Committing README.md changes"
  git commit -m "Add CodeSandbox link"

  echo "Creating GitHub repository: $github_username/$project_name"
  gh repo create "$github_username/$project_name" --public

  echo "Pushing to remote 'origin'"
  git push -u origin main

  echo "Project '$project_name' created successfully!"
  echo "GitHub repository: https://github.com/$github_username/$project_name"
  echo "CodeSandbox link: $codesandbox_link"
}

Transcript

[00:00] Combining the GitHub CLI as well as npm create to launch the Vite template scaffolder, we can create a project locally and push it to GitHub, including a code sandbox link, all in a single command. To walk through this, when we run the GitHub CLI with githubapi user, We'll get back an object that can grab our login. The jq flag will allow us to pluck off the login from that object. So .login and we'll get our username back. From there we can fire off pnpm create-beat, pnpm create-beat, egghead-demo with a template of react And you'll see that created a project.

[00:37] We have to change directories into that and then run all the commands. And then going into this directory, if we git init, git add everything, and git commit with a message of init or whatever. Then we can use github repo create and we'll make this public and just base it on the current directory. You can see we now have a repository called egghead-demo and once we go ahead and git push to the origin of main, we'll bring this back over, refresh, and our local project is now on GitHub. So let's take this one step further to finish out the script.

[01:11] We can github repo delete. I'm going to delete JohnLinquist slash egghead demo, confirm it, then remove this locally, and show our script in action. So share react project, we'll name this egghead demo, and you can see it walks through all of the steps that we walked through, but it grabs the project name as a variable, it grabs the GitHub username as a variable, and then it creates a code sandbox link with the username and project name, and it appends that link to our readme. So now once we bring this back over, This was deleted, I just hadn't refreshed yet, so I'll reload. Now we have this project and it has an edit in code sandbox link at the bottom where we can click this, it takes us to code sandbox, and we'll launch our project to share with anyone.

[01:59] So now we can get back to work on our project and anything we push will also be available in Code Sandbox.

This lesson is for members only

Ready to take your career to the next level?

Automate Creating a Local React Project, GitHub Repository, and Live Hosted Demo in a Single Command

John Lindquist

Transcript