Grommet/3-WKSHP-PrepareEnvironment.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Lab 3: Prepare the Environment\n",
    "\n",
    "This Jupyter notebook will drive you through the following steps :\n",
    "\n",
    "- Install nodejs, npm, and npx\n",
    "- Install yarn\n",
    "- Create a react app\n",
    "- Adding grommet\n",
    "- Add generated code from grommet designer\n",
    "- Run the application\n",
    "- Push the code to GitHub repo\n",
    "\n",
    "\n",
    "This tutorial assumes that you don't have node.js and a package manager; either npm (npm is installed with node.js) or yarn package manager. Create react app can be installed globally or locally using npx (npx comes with npm 5.2+).\n",
    "\n",
    "### Install nodejs, npm, and npx\n",
    "\n",
    "- [Node Download Page](https://nodejs.org/en/download/) - The latest LTS version will have node.js, npm, and npx.\n",
    "\n",
    "- Verify the installation\n",
    "\n",
    "```bash\n",
    "node -v\n",
    "npm -v\n",
    "```\n",
    "\n",
    "![04-nodejs-install.PNG](Pictures/04-nodejs-install.png)\n",
    "    \n",
    "### Install yarn\n",
    "    \n",
    "- [Yarn Package Manager](https://yarnpkg.com/en/docs/getting-started)\n",
    "\n",
    "- verify the installation\n",
    "\n",
    "```bash\n",
    "yarn --version\n",
    "```\n",
    "\n",
    "![05-yarn-install.PNG](Pictures/05-yarn-install.png)\n",
    "\n",
    "### Create your app\n",
    "\n",
    "We are going to leverage and install the awesome [create-react-app](https://facebook.github.io/create-react-app/). We will refer to it as CRA from now on.\n",
    "\n",
    "```bash\n",
    "npx create-react-app my-app-student$$I\n",
    "cd my-app-student$$I\n",
    "```\n",
    "\n",
    "CRA will automatically install dependencies for you. It uses [Yarn](https://yarnpkg.com/en/) as a package manager behind the scenes. If you prefer to use NPM for your package management, you can delete the `yarn.lock` file and run `npm install` manually.\n",
    "\n",
    "![06-yarn-start.PNG](Pictures/06-yarn-start.png)\n",
    "\n",
    "### Adding Grommet\n",
    "\n",
    "**NOTE**: Please follow the instructions provided on the Generate code screen\n",
    "\n",
    "```bash\n",
    "yarn add styled-components https://github.com/grommet/grommet/tarball/stable https://github.com/grommet/grommet-icons/tarball/stable https://github.com/grommet/grommet-theme-hpe/tarball/NEXT-stable\n",
    "```\n",
    "\n",
    "### Add your generated code\n",
    "\n",
    "Replace the contents of my-app-student$$I/src/App.js with your generated code from grommet designer.\n",
    "\n",
    "### Start the development server\n",
    "\n",
    "```bash\n",
    "yarn start\n",
    "```\n",
    "\n",
    "![localhost.png](Pictures/localhost.png)\n",
    "\n",
    "### Create a GitHub account\n",
    "\n",
    "You can [Sign up](https://github.com/join?source=header-home) here to create your GitHub account if you don't have one.\n",
    "\n",
    "### Create a new repository\n",
    "\n",
    "To put your project up on GitHub, you'll need to create a repository for it to live in.\n",
    "\n",
    "1) After signing in to your GitHub account, in the upper-right corner of any page, use the drop-down menu, and select a New repository.\n",
    "\n",
    "![NewRepo.png](Pictures/repo-create.png)\n",
    "\n",
    "2) Type a short, memorable name for your repository. For example, \"my-app-student$$I\".\n",
    "\n",
    "3) Optionally, add a description of your repository. For example, \"My first repository on GitHub.\"\n",
    "\n",
    "4) Choose repository visibility. For more information, see [\"About repository visibility.\"](https://help.github.com/en/github/creating-cloning-and-archiving-repositories/about-repository-visibility)\n",
    "\n",
    "5) Click Create repository.\n",
    "\n",
    "### Push an existing repository from the command line\n",
    "\n",
    "Please install git, if you don't have it already.\n",
    "\n",
    "- [Windows](https://git-scm.com/download/win)\n",
    "- [Mac](https://git-scm.com/download/mac)\n",
    "\n",
    "Navigate to your project folder in your workstation and follow the below commands to push your code to the Git repository.\n",
    "\n",
    "```bash\n",
    "cd my-app-student$$I\n",
    "git init\n",
    "git add .\n",
    "git commit -m \"first commit\"\n",
    "git remote add origin https://github.com/**<your-GitHub-name>**/my-app-student$$I.git\n",
    "git push -u origin master\n",
    "```\n",
    "\n",
    "**NOTE**: If you had any difficulty in designing your app, you can directly download the source code from [here.](https://github.com/reddypramod85/studentxx)\n",
    "\n",
    "```bash\n",
    "git clone https://github.com/reddypramod85/studentxx.git\n",
    "cd studentxx\n",
    "git remote -v\n",
    "git remote set-url origin git@github.com:<YourGitHubID>/<Your_Repo_Name.git\n",
    "git remote -v # verify the remote repo URL is changed to your new repo\n",
    "cd src\n",
    "vi App.js # modify the code to reflect your name, description and save and exit\n",
    "git add .\n",
    "git commit -m \"first commit\"\n",
    "git push -u origin master\n",
    "```\n",
    "\n",
    "## Congratulations\n",
    "\n",
    "\n",
    "You have successfully prepared your workstation and pushed code to your GitHub repository. Please proceed to the [Lab 4](4-WKSHP-DeploytoNetlify.ipynb) notebook to deploy your application to Netlify.\n",
    "\n",
    "![grommet.JPG](Pictures/grommet.jfif)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}