Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove $ prefix because it was copied when copying the command #150

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Remove $ prefix because it was copied when copying the command #150

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,18 +17,18 @@ If you follow along with this tutorial, you'll end up with a new React app—hos
1. [Node and npm](https://nodejs.org/en/download/) are installed. Here are the versions I'll be using while making this tutorial:

```shell
$ node --version
node --version
v16.13.2

$ npm --version
npm --version
8.1.2
```
> Installing npm adds two commands to the system—`npm` and `npx`—both of which I'll be using while making this tutorial.

2. [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) is installed. Here's the version I'll be using while making this tutorial:

```shell
$ git --version
git --version
git version 2.29.1.windows.1
```

Expand Down Expand Up @@ -71,12 +71,12 @@ At this point, your GitHub account contains an empty repository, having the name
> In case you want to use a different name from `my-app` (e.g. `web-ui`), you can accomplish that by replacing all occurrences of `my-app` in this tutorial, with that other name (i.e. `my-app` --> `web-ui`).

```shell
$ npx create-react-app my-app
npx create-react-app my-app
```

> That command will create a React app written in JavaScript. To create one written in [TypeScript](https://create-react-app.dev/docs/adding-typescript/#installation), you can issue this command instead:
> ```shell
> $ npx create-react-app my-app --template typescript
> npx create-react-app my-app --template typescript
> ```

That command will create a new folder named `my-app`, which will contain the source code of a React app.
Expand All @@ -85,14 +85,14 @@ At this point, your GitHub account contains an empty repository, having the name

> #### Branch names: `master` vs. `main`
>
> The Git repository will have one branch, which will be named either (a) `master`, the default for a fresh Git installation; or (b) the value of the Git configuration variable, `init.defaultBranch`, if your computer is running Git version 2.28 or later _and_ you have [set that variable](https://github.blog/2020-07-27-highlights-from-git-2-28/#introducing-init-defaultbranch) in your Git configuration (e.g. via `$ git config --global init.defaultBranch main`).
> The Git repository will have one branch, which will be named either (a) `master`, the default for a fresh Git installation; or (b) the value of the Git configuration variable, `init.defaultBranch`, if your computer is running Git version 2.28 or later _and_ you have [set that variable](https://github.blog/2020-07-27-highlights-from-git-2-28/#introducing-init-defaultbranch) in your Git configuration (e.g. via ` git config --global init.defaultBranch main`).
>
> Since I have not set that variable in my Git installation, the branch in my repository will be named `master`. In case the branch in your repository has a different name (which you can check by running `$ git branch`), such as `main`; you can **replace** all occurrences of `master` throughout the remainder of this tutorial, with that other name (e.g. `master` → `main`).
> Since I have not set that variable in my Git installation, the branch in my repository will be named `master`. In case the branch in your repository has a different name (which you can check by running ` git branch`), such as `main`; you can **replace** all occurrences of `master` throughout the remainder of this tutorial, with that other name (e.g. `master` → `main`).

2. Enter the newly-created folder:

```shell
$ cd my-app
cd my-app
```

At this point, there is a React app on your computer and you are in the folder that contains its source code. All of the remaining commands shown in this tutorial can be run from that folder.
Expand All @@ -102,7 +102,7 @@ At this point, there is a React app on your computer and you are in the folder t
1. Install the [`gh-pages`](https://github.com/tschaub/gh-pages) npm package and designate it as a [development dependency](https://docs.npmjs.com/specifying-dependencies-and-devdependencies-in-a-package-json-file):

```shell
$ npm install gh-pages --save-dev
npm install gh-pages --save-dev
```

At this point, the `gh-pages` npm package is installed on your computer and the React app's dependence upon it is documented in the React app's `package.json` file.
Expand All @@ -112,7 +112,7 @@ At this point, the `gh-pages` npm package is installed on your computer and the
1. Open the `package.json` file in a text editor.

```shell
$ vi package.json
vi package.json
```

> In this tutorial, the text editor I'll be using is [vi](https://www.vim.org/). You can use any text editor you want; for example, [Visual Studio Code](https://code.visualstudio.com/).
Expand All @@ -135,7 +135,7 @@ At this point, the React app's `package.json` file includes a property named `ho
1. Open the `package.json` file in a text editor (if it isn't already open in one).

```shell
$ vi package.json
vi package.json
```

2. Add a `predeploy` property and a `deploy` property to the `scripts` object:
Expand All @@ -157,18 +157,18 @@ At this point, the React app's `package.json` file includes deployment scripts.
You can do that by issuing a command in this format:

```shell
$ git remote add origin https://github.com/{username}/{repo-name}.git
git remote add origin https://github.com/{username}/{repo-name}.git
```

To customize that command for your situation, replace `{username}` with your GitHub username and replace `{repo-name}` with the name of the GitHub repository you created in Step 1.

In my case, I'll run:

```shell
$ git remote add origin https://github.com/gitname/react-gh-pages.git
git remote add origin https://github.com/gitname/react-gh-pages.git
```

> That command tells Git where I want it to push things whenever I—or the `gh-pages` npm package acting on my behalf—issue the `$ git push` command from within this local Git repository.
> That command tells Git where I want it to push things whenever I—or the `gh-pages` npm package acting on my behalf—issue the ` git push` command from within this local Git repository.

At this point, the local repository has a "remote" whose URL points to the GitHub repository you created in Step 1.

Expand All @@ -177,7 +177,7 @@ At this point, the local repository has a "remote" whose URL points to the GitHu
1. Push the React app to the GitHub repository

```shell
$ npm run deploy
npm run deploy
```

> That will cause the `predeploy` and `deploy` scripts defined in `package.json` to run.
Expand All @@ -186,7 +186,7 @@ At this point, the local repository has a "remote" whose URL points to the GitHu

> By default, the new commit on the `gh-pages` branch will have a commit message of "Updates". You can [specify a custom commit message](https://github.com/gitname/react-gh-pages/issues/80#issuecomment-1042449820) via the `-m` option, like this:
> ```shell
> $ npm run deploy -- -m "Deploy React app to GitHub Pages"
> npm run deploy -- -m "Deploy React app to GitHub Pages"
> ```

At this point, the GitHub repository contains a branch named `gh-pages`, which contains the files that make up the distributable version of the React app. However, we haven't configured GitHub Pages to _serve_ those files yet.
Expand Down Expand Up @@ -217,9 +217,9 @@ In this step, I'll show you how you can store the source code of the React app o
1. Commit the changes you made while you were following this tutorial, to the `master` branch of the local Git repository; then, push that branch up to the `master` branch of the GitHub repository.

```shell
$ git add .
$ git commit -m "Configure React app for deployment to GitHub Pages"
$ git push origin master
git add .
git commit -m "Configure React app for deployment to GitHub Pages"
git push origin master
```

> I recommend exploring the GitHub repository at this point. It will have two branches: `master` and `gh-pages`. The `master` branch will contain the React app's source code, while the `gh-pages` branch will contain the distributable version of the React app.
Expand Down Expand Up @@ -288,4 +288,4 @@ Note: I specified the avatars using HTML because, when I did so using Markdown,
<img src="https://github.com/jackweyhrich.png?size=40" height="40" width="40" alt="jackweyhrich" />
</a>

This list is maintained manually—for now—and includes (a) each person who submitted a pull request that was eventually merged into `master`, and (b) each person who contributed in a different way (e.g. providing constructive feedback) and who approved of me including them in this list.
This list is maintained manually—for now—and includes (a) each person who submitted a pull request that was eventually merged into `master`, and (b) each person who contributed in a different way (e.g. providing constructive feedback) and who approved of me including them in this list.