instructions.md

Requirements

• Make sure you have a terminal application on your computer. On Mac, the default "terminal" application will work. On Windows, use the command prompt, or another terminal program. If using the VS Code editor, a terminal is built in.
  • Windows Users: If you get an error when running npm deploy in the command prompt, try installing an alternative terminal application. One of the following should work:
    • Cmder: http://cmder.net (use the "git for windows" version)
    • MSGIT: https://gitforwindows.org
• Try running git --version in your terminal. If you get an error, install git from here: https://git-scm.com/downloads
• Install Node.js which includes npm. To test if you have this installed, run npm -v and if it is installed, you should see a number output with the current version. Make sure it is greater than 5.2.
• If npm is not installed, go here to install Node.js: https://nodejs.org/en/

Setup

• First, a few steps are required to get your react app deployed to Github Pages.
  • Open the package.json file and on the second line, replace "username" in "https://wustlcse204.github.io/08-todo-react-username" with your Github username. Save the file, make a commit in the Github app, and push to Github.
  • Open your repo in Github and go to the "settings" tab and scroll down to the "Github Pages" section. Instead of selecting "master" branch like usual, select "gh-pages" branch.
• In your terminal application, navigate to your repo folder.
  • Run npm install which will install the dependencies for the React application using npm.

Running Your App

• React must be compiled in order to load in the browser. The "todo-react" project was created using a tool called "create-react-app" which includes a built-in tool that will compile after any chages and reload your page. You will use this while building your page.
  • In your terminal application, navigate to your repo folder.
  • Run npm start
  • The url "http://localhost:3000" should automatically open in your browser. If not, open it. You should see a heading "ToDo App".
  • In your code editor, open your repository and find the src/App.js file. This contains the code for your React app. Add your name to the "h1" tag so that it reads "YOURNAME's ToDo App".
  • Save the file and switch back to your browser. The page should automatically reload and you should see your changes.
  • When done, you can stop the local server by opening your terminal and typing "ctrl-c"

Deploying Your App

• When ready to deploy your app to Github Pages, run npm run deploy in your project directory.
  • This will create a new branch in your repo called gh-pages that will contain the compiled version of your app.
    • Note, please do not modify this branch directly. You shouldn't ever commit to it directly, let the npm run deploy command handle it for you.
  • If there are no errors, go to the Github Pages url and see your App running!
  • If you see an error, make sure you have git installed from here: https://git-scm.com/downloads.
  • If you have installed git but are still seeing an error, and are on Windows, try installing an alternative terminal tool, one of the two listed above.