{"id":206,"date":"2021-01-30T05:20:38","date_gmt":"2021-01-30T10:20:38","guid":{"rendered":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring-21\/?page_id=206"},"modified":"2023-01-31T17:53:57","modified_gmt":"2023-01-31T22:53:57","slug":"dev-environment-setup","status":"publish","type":"page","link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/dev-environment-setup\/","title":{"rendered":"Dev Environment Setup"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Intro<\/h2>\n\n\n\n<p>You will need a computer at home in order to complete this class (sorry, iPads or other tablets won&#8217;t work). If you do not have a computer, please contact Prof Stein as soon as possible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Online Develoment<\/h2>\n\n\n\n<p>You will actually be able to do all of the HTML\/CSS\/JS work in this class through your browser with GitHub Codespaces and other online tools like CodePen. This will be the simplest way to do most of our work.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Computer Development<\/h2>\n\n\n\n<p>The other option is to install the tools on your home computer. This will allow you to work without access to the internet.<\/p>\n\n\n\n<p>Below are basic instructions on how to set up the development environment we will be using depending on the operating system of your computer. If you do not know which operating system your computer is using, also contact Prof Stein.<\/p>\n\n\n\n<p>The main things we are installing are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a rel=\"noreferrer noopener\" href=\"https:\/\/code.visualstudio.com\/download\" target=\"_blank\">Visual Studio Code<\/a> (VS Code) which is our code editor<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/www.freecodecamp.org\/news\/node-version-manager-nvm-install-guide\/\" target=\"_blank\">NVM<\/a> (Node Version Manager)<\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/docs.npmjs.com\/downloading-and-installing-node-js-and-npm\" target=\"_blank\">Node<\/a><\/li><li><a rel=\"noreferrer noopener\" href=\"https:\/\/git-scm.com\/downloads\" target=\"_blank\">Git<\/a><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Overall Process<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">How to Set up You Home Dev Environment<\/h3>\n\n\n\n<p>This is an overview of the process for setting up a dev environment on your personal computer. Above are versions of this that you should use depending on your operating system. This is a generic version we can talk about in class.<\/p>\n\n\n\n<div class=\"wp-block-uagb-info-box uagb-block-d04045bf uagb-infobox__content-wrap  uagb-infobox-icon-left uagb-infobox-left uagb-infobox-stacked-tablet uagb-infobox-image-valign-top\"><div class=\"uagb-ifb-content\"><div class=\"uagb-ifb-title-wrap\"><h4 class=\"uagb-ifb-title\">Step 1: Install VS Code<\/h4><\/div><div class=\"uagb-ifb-separator\"><\/div><p class=\"uagb-ifb-desc\">VS Code is the code editor we will use in class. It\u2019s made by Microsoft but it\u2019s free, cross platform and integrates well with what we are doing.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-info-box uagb-block-d763084b uagb-infobox__content-wrap  uagb-infobox-icon-left uagb-infobox-left uagb-infobox-stacked-tablet uagb-infobox-image-valign-top\"><div class=\"uagb-ifb-content\"><div class=\"uagb-ifb-title-wrap\"><h4 class=\"uagb-ifb-title\">Step 2: Install Git<\/h4><\/div><div class=\"uagb-ifb-separator\"><\/div><p class=\"uagb-ifb-desc\">Git is the version control system we will use and the most popular one in the industry.<br><br>At first this is a far as you need to go. Once we get to working with Eleventy, then you will need the other steps.<\/p><\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Step 3: Command Line<\/h4>\n\n\n\n<p>The command line is an important part of the web developers toolkit and is the interface for a number of tools we will use to help make our sites. It&#8217;s built in to Linux and macOS but it will require a few steps to set up on Windows or Chrome OS. At first you will be able to skip this process on Windows. <\/p>\n\n\n\n<div class=\"wp-block-uagb-info-box uagb-block-6fe5db65 uagb-infobox__content-wrap  uagb-infobox-icon-left uagb-infobox-left uagb-infobox-stacked-tablet uagb-infobox-image-valign-top\"><div class=\"uagb-ifb-content\"><div class=\"uagb-ifb-title-wrap\"><h4 class=\"uagb-ifb-title\">Step 4: Integrate Command Line with VS Code<\/h4><\/div><div class=\"uagb-ifb-separator\"><\/div><p class=\"uagb-ifb-desc\">On Windows and macOS, you may need to take an extra step to make sure VS Code uses the same command line you updated or installed earlier.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-info-box uagb-block-aba7e544 uagb-infobox__content-wrap  uagb-infobox-icon-left uagb-infobox-left uagb-infobox-stacked-tablet uagb-infobox-image-valign-top\"><div class=\"uagb-ifb-content\"><div class=\"uagb-ifb-title-wrap\"><h4 class=\"uagb-ifb-title\">Step 5: Install NVM<\/h4><\/div><div class=\"uagb-ifb-separator\"><\/div><p class=\"uagb-ifb-desc\">This is the Node Version Manager and will be used to install Node (next step).<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-uagb-info-box uagb-block-566b48b1 uagb-infobox__content-wrap  uagb-infobox_cta-type-all uagb-infobox-icon-left uagb-infobox-left uagb-infobox-stacked-tablet uagb-infobox-image-valign-top\"><a href=\"#\" class=\"uagb-infobox-link-wrap uagb-infbox__link-to-all\" target=\"_self\" aria-label=\"Infobox Link\" rel=\"noopener noreferrer\"><\/a><div class=\"uagb-ifb-content\"><div class=\"uagb-ifb-title-wrap\"><h4 class=\"uagb-ifb-title\">Step 6: Install Node<\/h4><\/div><div class=\"uagb-ifb-separator\"><\/div><p class=\"uagb-ifb-desc\">Node is a handy tool that gives you access to a lock of command line developer tools. If you have ever seen a tutorial that started &#8220;It&#8217;s easy just npm install myThingy&#8221; and had no idea what that really meant, this will let you do that.<\/p><div class=\"uagb-ifb-button-wrapper wp-block-button\"><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Intro You will need a computer at home in order to complete this class (sorry, iPads or other tablets won&#8217;t work). If you do not have a computer, please contact Prof Stein as soon as possible. Online Develoment You will actually be able to do all of the HTML\/CSS\/JS work in this class through your&hellip; <a class=\"more-link\" href=\"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/dev-environment-setup\/\">Continue reading <span class=\"screen-reader-text\">Dev Environment Setup<\/span><\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","portfolio_post_id":0,"portfolio_citation":"","portfolio_annotation":"","openlab_post_visibility":"","footnotes":""},"coauthors":[87],"class_list":["post-206","page","type-page","status-publish","hentry","entry"],"featured_image_urls_v2":{"full":"","thumbnail":"","medium":"","medium_large":"","large":"","1536x1536":"","2048x2048":"","post-thumbnail":"","gform-image-choice-sm":"","gform-image-choice-md":"","gform-image-choice-lg":""},"post_excerpt_stackable_v2":"<p>Intro You will need a computer at home in order to complete this class (sorry, iPads or other tablets won&#8217;t work). If you do not have a computer, please contact Prof Stein as soon as possible. Online Develoment You will actually be able to do all of the HTML\/CSS\/JS work in this class through your browser with GitHub Codespaces and other online tools like CodePen. This will be the simplest way to do most of our work. Computer Development The other option is to install the tools on your home computer. This will allow you to work without access to&hellip;<\/p>\n","category_list_v2":"","author_info_v2":{"name":"Christopher Stein","url":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"comments_num_v2":"0 comments","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"post-thumbnail":false,"gform-image-choice-sm":false,"gform-image-choice-md":false,"gform-image-choice-lg":false},"uagb_author_info":{"display_name":"Christopher Stein","author_link":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/author\/cstein\/"},"uagb_comment_info":0,"uagb_excerpt":"Intro You will need a computer at home in order to complete this class (sorry, iPads or other tablets won&#8217;t work). If you do not have a computer, please contact Prof Stein as soon as possible. Online Develoment You will actually be able to do all of the HTML\/CSS\/JS work in this class through your&hellip;&hellip;","_links":{"self":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/pages\/206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":29,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/pages\/206\/revisions"}],"predecessor-version":[{"id":2530,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/pages\/206\/revisions\/2530"}],"wp:attachment":[{"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/media?parent=206"}],"wp:term":[{"taxonomy":"author","embeddable":true,"href":"https:\/\/openlab.bmcc.cuny.edu\/mmp-350-spring23\/wp-json\/wp\/v2\/coauthors?post=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}