{"data":{"content":{"fields":{"slug":"/labs/setup-and-install-dependencies","type":"lab"},"frontmatter":{"title":"Setup and Install Dependencies"},"html":"<h1>Lab One - Setup and install dependencies</h1>\n<h2>Git</h2>\n<p>Atlassian has a great tutorial for <a href=\"https://www.atlassian.com/git/tutorials/install-git\">installing git</a>\nin various environments. Below are the quick and easy ways.</p>\n<h4>Windows</h4>\n<p>Install GitBash using the installer <a href=\"http://git-scm.com/downloads\">http://git-scm.com/downloads</a>\nor for more full fledged solution, <a href=\"https://git-for-windows.github.io/\">git for Windows</a> comes with a GUI\nand Windows Explorer integration.</p>\n<h4>Mac</h4>\n<p>It’s probably already installed.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ git --version\ngit version 2.9.1</code></pre></div>\n<h2>Node</h2>\n<p>Check if you have node installed. <code class=\"language-text\">$ node --version</code></p>\n<h4>Windows</h4>\n<ul>\n<li>Install Node using the installer <a href=\"https://nodejs.org/download/\">https://nodejs.org/download/</a></li>\n<li>\n<p>You may need to install Python 2.7.x+ and Microsoft Visual Studio to build node native libraries.</p>\n<ul>\n<li><a href=\"https://www.python.org/downloads/\">https://www.python.org/downloads/</a></li>\n<li><a href=\"https://www.visualstudio.com/downloads/\">https://www.visualstudio.com/downloads/</a></li>\n</ul>\n</li>\n<li>Restart</li>\n</ul>\n<h4>Mac</h4>\n<ul>\n<li>You can download an installer <a href=\"https://nodejs.org/download/\">https://nodejs.org/download/</a> OR</li>\n<li>\n<p>Install via Homebrew</p>\n<ul>\n<li>Check for existing install. <code class=\"language-text\">$ brew --version</code></li>\n<li>Install Hombrew as needed <a href=\"http://brew.sh\">http://brew.sh</a></li>\n<li>Install Node w/ Homebrew. <code class=\"language-text\">$ brew install node</code></li>\n</ul>\n</li>\n</ul>\n<h2>Yarn</h2>\n<ul>\n<li>Check if you have yarn installed. <code class=\"language-text\">$ yarn --version</code></li>\n<li>If Yarn isn’t installed, then add it as a global NPM module: <code class=\"language-text\">$ npm install -g yarn</code></li>\n</ul>\n<h2>Checkout the Github repository</h2>\n<p>Fork project from Github: <a href=\"https://github.com/objectpartners/react-redux-timesheet\">https://github.com/objectpartners/react-redux-timesheet</a></p>\n<p><span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 11.082251082251082%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsSAAALEgHS3X78AAAAlElEQVQI1xWH3Q6BYABAvSH3ficSoUytpo3NPJUr96668gRYtKRS6wvHZ2dnZ6fWHWj0RzrueoftbbFXGwzLQ1+4jE0H3bQxlg5T02K2sDEtF3Uyp9Ub0lE06Qil2UFt1GXb1D7fL3/CMOQSRNzinCAuuEYFZ2leCqqqohQCISuqN2n24hE/KeWnSULmH7kf9mQnnx+9Snl+iPI5iQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"Fork repo\"\n        title=\"\"\n        src=\"/static/398f959bdcb3b8e8412229f77af9ab64/83a8b/fork.png\"\n        srcset=\"/static/398f959bdcb3b8e8412229f77af9ab64/8992e/fork.png 163w,\n/static/398f959bdcb3b8e8412229f77af9ab64/ae0a7/fork.png 325w,\n/static/398f959bdcb3b8e8412229f77af9ab64/83a8b/fork.png 650w,\n/static/398f959bdcb3b8e8412229f77af9ab64/50453/fork.png 975w,\n/static/398f959bdcb3b8e8412229f77af9ab64/5ae00/fork.png 1155w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n      />\n  </span></p>\n<p>then clone the new fork!</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ git clone https://github.com/yourusername/react-redux-timesheet.git</code></pre></div>\n<p>You should get output similar to below:</p>\n<div class=\"gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">Cloning into <span class=\"token string\">'react-redux-timesheet'</span><span class=\"token operator\">...</span>\nremote<span class=\"token punctuation\">:</span> Counting objects<span class=\"token punctuation\">:</span> <span class=\"token number\">3003</span><span class=\"token punctuation\">,</span> done<span class=\"token punctuation\">.</span>\nremote<span class=\"token punctuation\">:</span> Compressing objects<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token operator\">%</span> <span class=\"token punctuation\">(</span><span class=\"token number\">1458</span><span class=\"token operator\">/</span><span class=\"token number\">1458</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> done<span class=\"token punctuation\">.</span>\nremote<span class=\"token punctuation\">:</span> Total <span class=\"token number\">3003</span> <span class=\"token punctuation\">(</span>delta <span class=\"token number\">1413</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> reused <span class=\"token number\">2684</span> <span class=\"token punctuation\">(</span>delta <span class=\"token number\">1256</span><span class=\"token punctuation\">)</span>\nReceiving objects<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token operator\">%</span> <span class=\"token punctuation\">(</span><span class=\"token number\">3003</span><span class=\"token operator\">/</span><span class=\"token number\">3003</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1.44</span> MiB <span class=\"token operator\">|</span> <span class=\"token number\">1.15</span> MiB<span class=\"token operator\">/</span>s<span class=\"token punctuation\">,</span> done<span class=\"token punctuation\">.</span>\nResolving deltas<span class=\"token punctuation\">:</span> <span class=\"token number\">100</span><span class=\"token operator\">%</span> <span class=\"token punctuation\">(</span><span class=\"token number\">1413</span><span class=\"token operator\">/</span><span class=\"token number\">1413</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> done<span class=\"token punctuation\">.</span>\nChecking connectivity<span class=\"token operator\">...</span> done<span class=\"token punctuation\">.</span></code></pre></div>\n<p>Change directories to the lab main directory.</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">cd react-redux-timesheet</code></pre></div>\n<p>Next we need to make sure our dependencies are installed:</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ yarn</code></pre></div>\n<p>The <code class=\"language-text\">final</code> directory represents the finished state of the application (what we’ll have once we’ve done all of the labs). For each lab, you’ll switch to the corresponding directory which will give you a view of the application at the start of that lab. Go ahead and navigate to the <code class=\"language-text\">lab-01</code> directory:</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ <span class=\"token function\">cd</span> lab-01</code></pre></div>\n<hr>\n<p>Note: these labs technically don’t require <code class=\"language-text\">yarn</code> - if you would prefer to use NPM you absolutely can, just replace any references to <code class=\"language-text\">yarn</code> or <code class=\"language-text\">yarn install</code> with <code class=\"language-text\">npm install</code>.\nYou’ll need to install dependencies for each lab individually.</p>\n<div class=\"gatsby-code-title\">If yarn is not installed...</div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\"><span class=\"token function\">cd</span> lab-01\n\n<span class=\"token function\">npm</span> <span class=\"token function\">install</span></code></pre></div>\n<h2>Start the local development server</h2>\n<p>Run the start script</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">$ yarn start</code></pre></div>\n<p><span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 61.08742004264393%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsSAAALEgHS3X78AAABb0lEQVQoz62S2VLCMBSGcwuIRYd7h03W7qULTVOKLILone//IprfkwgMqOCM48U3J2lOv/5nGlYxarJSq6FiGLJcM2DU67i6vkGpXEW5co1SqYpq9RatjoNuP8R9L0CnG8ALcoyshJ6N0RuEklDnb8zkApYQ0s5yOMVUYwUclp3CclLYbkYvTmjNMTTjw7o/UHIt01KSaSnz/VzG0Ryel0vXFVBrLh4x4Utk+RrFbAtBNZ4s4HgC42imz2yX79MdJ5TMpBTF/BnjeIYwfoBpT0i0QZIuMJu/aPlm+wqerWhsV4/c7vq67tPtpBqmJCk1qzRiutFVoYRxMkdIxOkSoniihNmJ4KtMC4Ow0KKEXlKjTGlElUrtI/pYwFfwszV8GvnoJ5yFqeh7VPP3/fhkfy7ZQXjpaz/xa8L/lGkhNcnPe3Sof+HgYMf36DwR+sPLUI9UfazdsWWzbYLYVzRbu7qj0RrhrjG4hGw0R6rv/QNKNHL3jpv/gwAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"yarn start\"\n        title=\"\"\n        src=\"/static/8bca5d6dc1ffcafabf518131dd6b3b8c/83a8b/yarn.start.png\"\n        srcset=\"/static/8bca5d6dc1ffcafabf518131dd6b3b8c/8992e/yarn.start.png 163w,\n/static/8bca5d6dc1ffcafabf518131dd6b3b8c/ae0a7/yarn.start.png 325w,\n/static/8bca5d6dc1ffcafabf518131dd6b3b8c/83a8b/yarn.start.png 650w,\n/static/8bca5d6dc1ffcafabf518131dd6b3b8c/50453/yarn.start.png 975w,\n/static/8bca5d6dc1ffcafabf518131dd6b3b8c/af9d4/yarn.start.png 1300w,\n/static/8bca5d6dc1ffcafabf518131dd6b3b8c/b3739/yarn.start.png 1876w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n      />\n  </span></p>\n<ul>\n<li>\n<p>This kicks off a Node server and serves up our <code class=\"language-text\">index.html</code> page.</p>\n</li>\n<li>\n<p>This is a long running process..it only ends on an error—or killing of the server with Ctrl + C</p>\n</li>\n<li>\n<p>Open your browser and navigate to <a href=\"http://localhost:3000\">http://localhost:3000</a></p>\n</li>\n<li>\n<p>Verify that you see the welcome page.</p>\n</li>\n</ul>\n<p><span\n    class=\"gatsby-resp-image-wrapper\"\n    style=\"position: relative; display: block;  max-width: 650px; margin-left: auto; margin-right: auto;\"\n  >\n    <span\n      class=\"gatsby-resp-image-background-image\"\n      style=\"padding-bottom: 55.36363636363636%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsSAAALEgHS3X78AAAA50lEQVQoz+2OW0+DQBhE+f+/TIFquLQg4K3gsltblUSuFo6UlqYS60tfneRkNtmZyacFrsm1dcPVrY9hByxjwTIRhNEj0cMT4f3eR8LBnwe8IGLuBT13eH6I5SzQqrqhLGvkW476KPlqQa7Ww6h63bDevCNSRSpXiJ7kJd0jJJ9FRd0XqnpL3WzJywaNX6SkxPMW2LbF3HV7tzENA13Xmc1MHMfG9z2KIj80umNX67qOKaOyLEOIFKXUgBCCOE6oquqYmXZ/XDiO7bxtW/7S7v80f7xwGjwNjcODH97nhs4OXqr/wcv1DXVBWT8Qhb/bAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n    ></span>\n    <img\n        class=\"gatsby-resp-image-image\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;\"\n        alt=\"welcome\"\n        title=\"\"\n        src=\"/static/aa63b2eb71775f773c4028b96ccd2ef1/83a8b/welcome.png\"\n        srcset=\"/static/aa63b2eb71775f773c4028b96ccd2ef1/8992e/welcome.png 163w,\n/static/aa63b2eb71775f773c4028b96ccd2ef1/ae0a7/welcome.png 325w,\n/static/aa63b2eb71775f773c4028b96ccd2ef1/83a8b/welcome.png 650w,\n/static/aa63b2eb71775f773c4028b96ccd2ef1/50453/welcome.png 975w,\n/static/aa63b2eb71775f773c4028b96ccd2ef1/dd967/welcome.png 1100w\"\n        sizes=\"(max-width: 650px) 100vw, 650px\"\n      />\n  </span></p>\n<h3>Troubleshooting</h3>\n<h4>Port Conflicts</h4>\n<p>The labs assume that you don’t already have apps running on ports 3000 and 3001. If you do we can override the ports in the following way:</p>\n<p><strong>react-redux-timesheet</strong></p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ PORT<span class=\"token operator\">=</span>4000 yarn start</code></pre></div>\n<p><strong>react-redux-api</strong> (used in later labs)</p>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre class=\"language-bash\"><code class=\"language-bash\">$ PORT<span class=\"token operator\">=</span>4001 yarn start</code></pre></div>\n<p>Then update the timesheet app to point to that new port and re-launch:</p>\n<div class=\"gatsby-highlight\" data-language=\"title=react-redux-timesheet/package.json\"><pre class=\"language-title=react-redux-timesheet/package.json\"><code class=\"language-title=react-redux-timesheet/package.json\">&quot;proxy&quot;: &quot;http://localhost:4001&quot;,</code></pre></div>\n<h4>The CLI apps won’t stop with Ctrl-C</h4>\n<p>Some Windows systems (esp. Windows 10) don’t properly pass Ctrl-C to the command line. Some people report that <code class=\"language-text\">CTRL-fn-b</code> works in these situations.</p>"}},"pageContext":{"next":{"node":{"fields":{"slug":"/labs/your-first-react-component"},"frontmatter":{"title":"Your First React Component","index":2}}},"slug":"/labs/setup-and-install-dependencies"}}