From f1e8b79497068050e3d8a35cae0ef23188e4f024 Mon Sep 17 00:00:00 2001 From: Aakarshan Raj <32811006+aakarshan-raj@users.noreply.github.com> Date: Sat, 8 Jul 2023 20:09:12 +0530 Subject: [PATCH] removed $ from readme.md as it was copied when copying the command --- README.md | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 94201e36..3857aedc 100644 --- a/README.md +++ b/README.md @@ -17,10 +17,10 @@ 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. @@ -28,7 +28,7 @@ If you follow along with this tutorial, you'll end up with a new React app—hos 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 ``` @@ -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. @@ -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. @@ -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. @@ -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/). @@ -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: @@ -157,7 +157,7 @@ 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. @@ -165,10 +165,10 @@ At this point, the React app's `package.json` file includes deployment scripts. 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. @@ -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. @@ -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. @@ -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. @@ -288,4 +288,4 @@ Note: I specified the avatars using HTML because, when I did so using Markdown, jackweyhrich -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. \ No newline at end of file +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.