var Component=(()=>{var h=Object.create;var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,m=Object.prototype.hasOwnProperty;var y=(i,e)=>()=>(e||i((e={exports:{}}).exports,e),e.exports),f=(i,e)=>{for(var t in e)a(i,t,{get:e[t],enumerable:!0})},l=(i,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of u(e))!m.call(i,o)&&o!==t&&a(i,o,{get:()=>e[o],enumerable:!(r=p(e,o))||r.enumerable});return i};var b=(i,e,t)=>(t=i!=null?h(g(i)):{},l(e||!i||!i.__esModule?a(t,"default",{value:i,enumerable:!0}):t,i)),w=i=>l(a({},"__esModule",{value:!0}),i);var c=y((I,s)=>{s.exports=_jsx_runtime});var j={};f(j,{default:()=>E,frontmatter:()=>v});var n=b(c()),v={title:"From Zero to Code Hero: A Newbie's Guide to Web Development Setup",date:"2023-12-07",locale:"en",ordering:1,published:!0};function d(i){let e=Object.assign({p:"p",a:"a",h2:"h2",span:"span",h3:"h3",div:"div",pre:"pre",code:"code",strong:"strong",ol:"ol",li:"li",em:"em",ul:"ul"},i.components),{Image:t}=e;return t||C("Image",!0),(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(e.p,{children:"Welcome to this comprehensive guide crafted specifically for coding newbies!"}),` `,(0,n.jsx)(e.p,{children:`Here, I'll walk you through setting up a development environment on macOS to kickstart your journey with CodebaseUp - your express lane to web development success.`}),` `,(0,n.jsxs)(e.p,{children:["Whether you're using ",(0,n.jsx)(e.a,{href:"/pricing",children:"CodebaseUp Free"}),` with its limited features or unlocking the full potential with `,(0,n.jsx)(e.a,{href:"/pricing",children:"CodebaseUp Pro"}),`, this guide has got you covered.`]}),` `,(0,n.jsx)(e.p,{children:`Powered by the versatility of JavaScript and TypeScript, CodebaseUp has your back, offering a streamlined codebase that wipes away setup hassles. It empowers you to transform your creative ideas into production-ready applications within minutes.`}),` `,(0,n.jsx)(e.p,{children:`Whether you're flying solo or part of a team, CodebaseUp simplifies the path to innovation. It covers major use cases and integrates development best practices to ensure a stable and efficient codebase.`}),` `,(0,n.jsx)(e.p,{children:`Contrary to popular no-code tools, CodebaseUp invites you to a low-code journey, granting you the freedom to build anything you envision while sidestepping the limitations often found in popular no-code tools.`}),` `,(0,n.jsx)(e.p,{children:`By following these steps, you'll effortlessly overcome the initial coding barrier, allowing you to dive into building your dream projects with confidence.`}),` `,(0,n.jsx)(e.p,{children:"Let's embark on this coding adventure together!"}),` `,(0,n.jsxs)(e.h2,{id:"1-getting-started-with-the-terminal",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#1-getting-started-with-the-terminal",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"1. Getting Started with the Terminal"]}),` `,(0,n.jsx)(e.p,{children:`The terminal is like a secret passage to the heart of your Mac's brain. It's a place where you communicate with your computer using simple text commands. Getting cozy with the terminal is a vital step in getting comfy with the whole coding thing.`}),` `,(0,n.jsxs)(e.h3,{id:"11-introduction-to-the-terminal",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#11-introduction-to-the-terminal",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"1.1 Introduction to the Terminal"]}),` `,(0,n.jsx)(e.p,{children:`The terminal might seem intimidating at first, but it's a powerful tool that provides direct access to your computer's file system and allows you to execute commands efficiently.`}),` `,(0,n.jsx)(e.p,{children:`Don't worry; you'll soon find that using the terminal is an essential skill for any coder.`}),` `,(0,n.jsxs)(e.h3,{id:"12-launching-the-terminal",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#12-launching-the-terminal",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"1.2 Launching the Terminal"]}),` `,(0,n.jsx)(e.p,{children:`To open the Terminal on your Mac, you can use Spotlight Search. Press Cmd + Space to open Spotlight, then type "Terminal" and hit Enter.`}),` `,(0,n.jsx)(e.p,{children:"Alternatively, you can find it in the Applications > Utilities folder."}),` `,(0,n.jsx)(t,{src:"/content/guides/from-zero-to-code/terminal.png",width:"697",height:"483",alt:"macOS Terminal"}),` `,(0,n.jsxs)(e.h3,{id:"13-installing-homebrew",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#13-installing-homebrew",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"1.3 Installing Homebrew"]}),` `,(0,n.jsx)(e.p,{children:`Now, let's bring in Homebrew - your coding genie for installing and managing software on your Mac. To install Homebrew, paste the following command into your Terminal and press Enter:`}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"/bin/bash"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"-c"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"$('}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"curl"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"-fsSL"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:' https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"'})]})})})}),` `,(0,n.jsx)(e.p,{children:`Just follow the on-screen instructions; you might need to sprinkle some password magic during the installation. It's like giving your computer a magic wand for installing cool stuff!`}),` `,(0,n.jsxs)(e.p,{children:["Resources: ",(0,n.jsx)(e.a,{href:"https://brew.sh/",children:"https://brew.sh/"})]}),` `,(0,n.jsxs)(e.h3,{id:"14-installing-git",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#14-installing-git",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"1.4 Installing Git"]}),` `,(0,n.jsx)(e.p,{children:`Version control is like a superpower for developers, and Git is the tool that grants you this power.`}),` `,(0,n.jsx)(e.p,{children:`It allows you to track changes in your codebase over time, collaborate with others seamlessly, and, most importantly, undo mistakes easily.`}),` `,(0,n.jsx)(e.p,{children:`Imagine you're working on a document, and you want to make some changes. You start editing, but then realize you've made a significant error. Without version control, you might have to manually save multiple copies of the document, like "Document_V1," "Document_V2," and so on.`}),` `,(0,n.jsx)(e.p,{children:"This quickly becomes messy and confusing."}),` `,(0,n.jsx)(e.p,{children:"Now, picture Git as an advanced version of this."}),` `,(0,n.jsx)(e.p,{children:`Instead of creating manual copies, Git automatically tracks every change you make. It's like having a magic wand that allows you to revisit any point in the document's history. If something goes wrong or if you want to see how the document looked a week ago, you can do it in a snap.`}),` `,(0,n.jsx)(e.p,{children:"It's like having an unlimited undo button for your code."}),` `,(0,n.jsx)(e.p,{children:`While I heavily use Git as a solo maker (and you should too), Git is particularly crucial when working on a project with others. It helps avoid conflicts when multiple people are making changes simultaneously.`}),` `,(0,n.jsx)(e.p,{children:`Each person can work on their part independently, and Git intelligently merges the changes when necessary.`}),` `,(0,n.jsx)(e.p,{children:"To install Git using Homebrew, run the following command in the Terminal:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"brew"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"install"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"git"})]})})})}),` `,(0,n.jsx)(e.p,{children:`Here are some of the most commonly used Git commands that form the core set of tools for day-to-day Git usage.`}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git init"}),` Initializes a new Git repository. Run this command in the root directory of your project to start version control.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git clone "}),` Creates a copy of a remote repository on your local machine. Use this command with the URL of the repository you want to clone.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git add "}),` Adds changes in a specific file to the staging area, preparing them to be committed. You can also use `,(0,n.jsx)(e.code,{children:"git add ."})," to add all changes."]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:'git commit -m "Your commit message"'}),` Records changes to the repository with a descriptive commit message. The -m flag allows you to add the message directly in the command.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git status"}),` Shows the status of changes as untracked, modified, or staged. Useful for understanding what changes are ready for a commit.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git pull"}),` Fetches changes from a remote repository and merges them into the current branch. Helpful to sync your local repository with the remote.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git push"}),` Pushes your committed changes to a remote repository. Use this to share your work with others or to update a shared repository.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git branch"}),` Lists all local branches in your repository. The current branch is highlighted with an asterisk.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git checkout "}),` Switches to the specified branch. Useful for moving between different branches in your repository.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git merge "}),` Combines changes from the specified branch into the current branch. It helps integrate changes made in different branches.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"git log"}),` Displays a log of all commits in reverse chronological order. It provides a detailed history of changes made in the repository.`]}),` `,(0,n.jsx)(e.p,{children:`With Git on your side, you're equipped to handle solo projects or team collaborations. It's your coding time-travel companion!`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://www.youtube.com/watch?v=USjZcfj8yxE",children:"Learn Git In 15 Minutes"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://www.atlassian.com/git/tutorials",children:"https://www.atlassian.com/git/tutorials"})}),` `,(0,n.jsxs)(e.h3,{id:"15-installing-nodejs",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#15-installing-nodejs",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"1.5 Installing Node.js"]}),` `,(0,n.jsx)(e.p,{children:"Now, let's bring in a tool called Node.js."}),` `,(0,n.jsx)(e.p,{children:`Think of Node.js as a friendly assistant that helps your computer understand and run JavaScript outside of a web browser.`}),` `,(0,n.jsx)(e.p,{children:"It's an essential tool for many web development tasks."}),` `,(0,n.jsx)(e.p,{children:`Node.js has different versions, and each version may introduce new features, improvements, or changes. Projects might specify a particular Node.js version to ensure compatibility.`}),` `,(0,n.jsx)(e.p,{children:`For example, CodebaseUp may work optimally with version 18.17.0. It's crucial to use the right version for your project to avoid potential compatibility issues and leverage the latest enhancements.`}),` `,(0,n.jsxs)(e.p,{children:["To install Node.js with version management using a tool called ",(0,n.jsx)(e.code,{children:"nvm"}),` (Node Version Manager), follow these steps:`]}),` `,(0,n.jsx)(e.p,{children:"First, let's install nvm. Open your Terminal and run this command:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"curl"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"-o-"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"|"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"bash"})]})})})}),` `,(0,n.jsx)(e.p,{children:"Close and reopen your Terminal or run the following to apply the changes:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"source"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"~/.bashrc"})]})})})}),` `,(0,n.jsx)(e.p,{children:`Now, you can install a specific version of Node.js. For example, if you need version 18.17.0 (that powers CodebaseUp), run:`}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"nvm"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"install"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"18.17"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:".0"})]})})})}),` `,(0,n.jsx)(e.p,{children:"To use the installed version, set it as the default:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"nvm"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"use"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"18.17"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:".0"})]})})})}),` `,(0,n.jsx)(e.p,{children:`Note: If you ever need to work on a project with a different Node.js version, you can easily switch. Just navigate to your project's directory and create a file named .nvmrc. Inside this file, write the version number (e.g., 20.10.0). The next time you enter the project directory, nvm will automatically switch to the specified version. Great job! This method allows you to manage Node.js versions effortlessly based on your project's requirements.`}),` `,(0,n.jsx)(e.p,{children:`Great job! You've just added a powerful ally to your coding arsenal. Onward to more coding wonders!`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://nodejs.org",children:"https://nodejs.org"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://github.com/nvm-sh/nvm#installing-and-updating",children:"https://github.com/nvm-sh/nvm#installing-and-updating"})}),` `,(0,n.jsxs)(e.h3,{id:"16-installing-pnpm",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#16-installing-pnpm",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"1.6 Installing pnpm"]}),` `,(0,n.jsxs)(e.p,{children:["When you install Node.js, it comes bundled with ",(0,n.jsx)(e.code,{children:"npm"}),`, which stands for Node Package Manager.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"npm"}),` allows you to easily install and manage libraries (also known as packages or modules) created by other developers. These libraries can add functionality to your projects without you having to reinvent the wheel.`]}),` `,(0,n.jsxs)(e.p,{children:[`For example, if you need a date formatting tool or a powerful image processing library, you can find and install them using npm with simple commands like `,(0,n.jsx)(e.code,{children:"npm install <package-name>"}),`. This way, you can leverage the work of the broader developer community to enhance your own projects. Developers often refer to these packages as project dependencies.`]}),` `,(0,n.jsxs)(e.p,{children:["Now, let's talk abou ",(0,n.jsx)(e.code,{children:"pnpm"})," - a more nimble alternative to ",(0,n.jsx)(e.code,{children:"npm"}),". While ",(0,n.jsx)(e.code,{children:"npm"}),` is the go-to package manager, CodebaseUp prefers the swifter performance of `,(0,n.jsx)(e.code,{children:"pnpm"}),`. Think of it as a speedier version of `,(0,n.jsx)(e.code,{children:"npm"}),` with a knack for efficient installations.`]}),` `,(0,n.jsxs)(e.p,{children:["CodebaseUp has a specific requirement for the version of ",(0,n.jsx)(e.code,{children:"pnpm"}),` it works best with. To ensure compatibility, run this command:`]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"npm"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"install"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"-g"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"pnpm@"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"<"}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"desired_versio"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"n"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:">"})]})})})}),` `,(0,n.jsxs)(e.p,{children:["This command installs the preferred version of ",(0,n.jsx)(e.code,{children:"pnpm"})," globally on your machine."]}),` `,(0,n.jsxs)(e.p,{children:["Once installed, you can use ",(0,n.jsx)(e.code,{children:"pnpm"})," just like ",(0,n.jsx)(e.code,{children:"npm"}),`. For example, to install dependencies for a project, you can use `,(0,n.jsx)(e.code,{children:"pnpm install"})," (more about this later)."]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://www.npmjs.com",children:"https://www.npmjs.com"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://pnpm.io",children:"https://pnpm.io"})}),` `,(0,n.jsxs)(e.h2,{id:"2-setting-up-visual-studio-code",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#2-setting-up-visual-studio-code",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"2. Setting Up Visual Studio Code"]}),` `,(0,n.jsx)(e.p,{children:`Visual Studio Code (VS Code) is a powerful and user-friendly code editor that will be your companion throughout your coding journey. It comes equipped with features that enhance your productivity and make coding a breeze.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://code.visualstudio.com",children:"https://code.visualstudio.com"})}),` `,(0,n.jsxs)(e.h3,{id:"21-introduction-to-visual-studio-code",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#21-introduction-to-visual-studio-code",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"2.1 Introduction to Visual Studio Code"]}),` `,(0,n.jsx)(e.p,{children:`Visual Studio Code is like your digital workspace, providing a comfortable environment to write, edit, and manage your code. It's designed to be intuitive for both beginners and experienced developers. Let's set it up to work seamlessly with CodebaseUp.`}),` `,(0,n.jsxs)(e.h3,{id:"22-installing-visual-studio-code",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#22-installing-visual-studio-code",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"2.2 Installing Visual Studio Code"]}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:[`Visit the VS Code website - `,(0,n.jsx)(e.a,{href:"https://code.visualstudio.com",children:"https://code.visualstudio.com"})]}),` `,(0,n.jsx)(e.li,{children:'Click on the "Download Mac Universal" button.'}),` `,(0,n.jsx)(e.li,{children:"Once the download is complete, open the downloaded file."}),` `,(0,n.jsx)(e.li,{children:"Drag the VS Code icon to the Applications folder to install it."}),` `]}),` `,(0,n.jsxs)(e.h3,{id:"23-installing-recommended-extensions",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#23-installing-recommended-extensions",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"2.3 Installing Recommended Extensions"]}),` `,(0,n.jsx)(e.p,{children:`Extensions are like plugins that enhance the functionality of VS Code. Install the recommended extensions to make your coding experience with CodebaseUp even better.`}),` `,(0,n.jsx)(e.p,{children:"Open VS Code."}),` `,(0,n.jsx)(e.p,{children:`Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or press Cmd + Shift + X.`}),` `,(0,n.jsx)(t,{src:"/content/guides/from-zero-to-code/extensions.png",width:"1600",height:"919",alt:"VS Code Extensions"}),` `,(0,n.jsx)(e.p,{children:"Search for and install the following recommended extensions:"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"ESLint:"})}),` `,(0,n.jsx)(e.p,{children:`ESLint is a tool that helps you find and fix problems in your JavaScript code. It ensures your code follows coding standards and catches common errors, making your code more reliable and maintainable.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Prettier - Code formatter:"})}),` `,(0,n.jsx)(e.p,{children:`Prettier is like an automated code stylist. It helps you maintain consistent code formatting across your project, automatically fixing indentation, line breaks, and other style-related issues. This ensures a clean and uniform appearance for your code.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Prisma:"})}),` `,(0,n.jsx)(e.p,{children:`Prisma is a database toolkit for Node.js and TypeScript. It simplifies database interactions by providing a type-safe and auto-completing query builder. With Prisma, you can interact with databases more intuitively, reducing the chances of errors in your data queries.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Tailwind CSS IntelliSense:"})}),` `,(0,n.jsx)(e.p,{children:`Tailwind CSS is a utility-first CSS framework, and this extension provides intelligent autocompletion for Tailwind CSS classes in your HTML, CSS, and JavaScript files. It speeds up your development process by helping you remember and use Tailwind CSS classes more efficiently.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"DotENV:"})}),` `,(0,n.jsx)(e.p,{children:`It provides syntax highlighting and autocompletion for environment variable files (more to this topic later).`}),` `,(0,n.jsx)(e.p,{children:"When the extensions are installed, restart VS Code to apply the changes."}),` `,(0,n.jsx)(e.p,{children:`You've successfully set up Visual Studio Code, your coding hub for building projects with CodebaseUp.In the next chapter, we'll explore the world of GitHub, helping you manage your code efficiently.`}),` `,(0,n.jsxs)(e.h2,{id:"3-github-basics-getting-started-with-version-control-in-the-cloud",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#3-github-basics-getting-started-with-version-control-in-the-cloud",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"3. GitHub Basics: Getting Started with Version Control in the Cloud"]}),` `,(0,n.jsx)(e.p,{children:`GitHub is where your Git repositories come to life on the web. It's a platform that allows you to store, manage, and collaborate on your projects, providing a central hub for your code.`}),` `,(0,n.jsx)(e.p,{children:`In this chapter, we'll cover the basics of GitHub, how it relates to Git, and how to set up your account and first repository.`}),` `,(0,n.jsxs)(e.h3,{id:"31-understanding-git-vs-github",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#31-understanding-git-vs-github",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"3.1 Understanding Git vs. GitHub"]}),` `,(0,n.jsx)(e.p,{children:`Git is a distributed version control system that allows you to track changes in your code and collaborate with others. It works locally on your machine.`}),` `,(0,n.jsx)(e.p,{children:`GitHub is a web-based platform built around Git. It provides a centralized space for hosting and managing your Git repositories. GitHub facilitates collaboration, allowing multiple developers to work on the same project and track changes in a shared environment.`}),` `,(0,n.jsxs)(e.h3,{id:"32-creating-your-first-repository",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#32-creating-your-first-repository",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"3.2 Creating Your First Repository"]}),` `,(0,n.jsxs)(e.p,{children:["Open your web browser, go to GitHub - ",(0,n.jsx)(e.a,{href:"https://github.com",children:"https://github.com"}),` - and create an account.`]}),` `,(0,n.jsx)(e.p,{children:`A repository, or "repo" for short, is where your project lives on GitHub. Let's create your first repository.`}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:"Log in to your GitHub account."}),` `,(0,n.jsx)(e.li,{children:`On the GitHub homepage, click the "+" sign in the top right corner and select "New repository."`}),` `,(0,n.jsx)(e.li,{children:'Give your repository a name, like "MyFirstRepo."'}),` `,(0,n.jsx)(e.li,{children:"Optionally, add a description for your repository."}),` `,(0,n.jsx)(e.li,{children:`Choose between public (visible to everyone) and private (visible only to you and collaborators) repository settings.`}),` `,(0,n.jsx)(e.li,{children:`You can initialize this repository with a README file. While it's a good practice to include a README file when starting a new project, you won't need it when launching based on CodebaseUp shortly as it contains it own README file.`}),` `,(0,n.jsx)(e.li,{children:'Click "Create repository."'}),` `]}),` `,(0,n.jsx)(t,{src:"/content/guides/from-zero-to-code/create-repository.png",width:"763",height:"851",alt:"GitHub - Create Repository"}),` `,(0,n.jsx)(e.p,{children:"Congratulations! You've just created your first GitHub repository."}),` `,(0,n.jsx)(e.p,{children:`In the next chapter, we'll explore how to connect your local development environment with GitHub, allowing you to push and pull code changes between your machine and the cloud.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://docs.github.com/en/get-started/quickstart/creating-an-account-on-github",children:"https://docs.github.com/en/get-started/quickstart/creating-an-account-on-github"})}),` `,(0,n.jsxs)(e.h2,{id:"4-cloning-codebaseup-and-linking-to-your-repository",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#4-cloning-codebaseup-and-linking-to-your-repository",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"4. Cloning CodebaseUp and Linking to Your Repository"]}),` `,(0,n.jsx)(e.p,{children:`In this step, we'll explore how to leverage CodebaseUp as the foundation for your own project.`}),` `,(0,n.jsx)(e.p,{children:`CodebaseUp is stored in an existing GitHub repository, which is maintained by me.`}),` `,(0,n.jsxs)(e.h3,{id:"41-creating-and-navigating-to-the-desired-location",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#41-creating-and-navigating-to-the-desired-location",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"4.1 Creating and Navigating to the Desired Location"]}),` `,(0,n.jsx)(e.p,{children:`Before we start, let's ensure you're in a location of your choice on your computer. If you'd like to create a new directory, here's how:`}),` `,(0,n.jsx)(e.p,{children:"Open the terminal on your computer."}),` `,(0,n.jsx)(e.p,{children:`Type the following command to create a new directory named "Projects" in your home folder:`}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"mkdir"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"~/Projects"})]})})})}),` `,(0,n.jsx)(e.p,{children:`This command stands for "make directory" (mkdir) and creates a folder named "Projects". The tilde (~) represents the home directory of the user.`}),` `,(0,n.jsx)(e.p,{children:"Now, navigate to the newly created directory using the following command:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"bash","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"bash","data-theme":"default",style:{display:"grid"},children:(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"cd"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:"~/Projects"})]})})})}),` `,(0,n.jsx)(e.p,{children:`This command tells your computer to change the directory (cd) to the "Projects" directory within your home folder.`}),` `,(0,n.jsxs)(e.h3,{id:"42-cloning-codebaseup",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#42-cloning-codebaseup",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"4.2 Cloning CodebaseUp"]}),` `,(0,n.jsx)(e.p,{children:`Now that you're in the right place, let's bring CodebaseUp to your local environment:`}),` `,(0,n.jsx)(e.p,{children:`Type the following command to clone CodebaseUp to your machine, replacing "YOUR-PROJECT-NAME" with the name you want for your project:`}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"git clone https://github.com/jhavej/codebaseup YOUR-PROJECT-NAME"})})})})}),` `,(0,n.jsx)(e.p,{children:`Press Enter and watch as your terminal fetches CodebaseUp to your current location within the "Projects" directory.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://github.com/jhavej/codebaseup",children:"https://github.com/jhavej/codebaseup"})}),` `,(0,n.jsxs)(e.h3,{id:"43-changing-the-remote-origin-why-and-how",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#43-changing-the-remote-origin-why-and-how",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"4.3 Changing the Remote Origin: Why and How"]}),` `,(0,n.jsx)(e.p,{children:`When you clone a repository, Git automatically sets up a remote connection known as the "origin."`}),` `,(0,n.jsx)(e.p,{children:`Initially, this points to the repository from which you cloned (in this case, CodebaseUp).`}),` `,(0,n.jsx)(e.p,{children:`However, since you're building your unique project, you'll want to redirect the "origin" to your own GitHub repository that you created in one of the previous steps.`}),` `,(0,n.jsx)(e.p,{children:"Let's understand why and how to make this crucial change."}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Why Change the Remote Origin:"})}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.em,{children:"Ownership:"}),` By redirecting the remote origin, you assert ownership of your project on GitHub. Pushing changes to CodebaseUp's repository wouldn't make sense - you want your updates to reflect in your repository.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.em,{children:"Collaboration:"}),` If you intend to collaborate with others or deploy your project online, having a repository under your GitHub account is essential.`]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"How to Change the Remote Origin:"})}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Navigate to Your Project:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"cd YOUR-PROJECT-NAME"})})})})}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Check Current Remotes:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"git remote -v"})})})})}),` `,(0,n.jsx)(e.p,{children:`This command shows the current remote connections. Initially, you'll see something like:`}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"origin https://github.com/jhavej/codebaseup.git (fetch)"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"origin https://github.com/jhavej/codebaseup.git (push)"})})]})})}),` `,(0,n.jsx)(e.p,{children:'This indicates that "origin" points to CodebaseUp.'}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Change Remote Origin:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"git remote set-url origin git@github.com:YOUR-USERNAME/YOUR-REPOSITORY.git"})})})})}),` `,(0,n.jsx)(e.p,{children:`Replace "YOUR-USERNAME" with your GitHub username and "YOUR-REPOSITORY" with the name of the GitHub repository you created.`}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Verify Changes:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"git remote -v"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"}})})]})})}),` `]}),` `]}),` `,(0,n.jsx)(e.p,{children:"After changing the remote origin, you should see:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:" origin git@github.com:YOUR-USERNAME/YOUR-REPOSITORY.git (fetch)"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:" origin git@github.com:YOUR-USERNAME/YOUR-REPOSITORY.git (push)"})})]})})}),` `,(0,n.jsx)(e.p,{children:'Now, "origin" points to your GitHub repository.'}),` `,(0,n.jsx)(e.p,{children:`Congratulations! You've successfully redirected the remote origin to your GitHub repository.`}),` `,(0,n.jsx)(e.p,{children:`This ensures that your changes are tracked and stored in your project's repository. You're now ready to make changes, committing them, and syncing with GitHub. Keep coding!`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url",children:"https://docs.github.com/en/get-started/getting-started-with-git/managing-remote-repositories#changing-a-remote-repositorys-url"})}),` `,(0,n.jsxs)(e.h2,{id:"5-opening-your-project-in-vs-code-and-adding-environment-variables",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#5-opening-your-project-in-vs-code-and-adding-environment-variables",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"5. Opening Your Project in VS Code and Adding Environment Variables"]}),` `,(0,n.jsx)(e.p,{children:`Now that you have CodebaseUp cloned and linked to your own repository, let's open it in VS Code, configure some essential environment variables, and understand the project structure.`}),` `,(0,n.jsxs)(e.h3,{id:"51-opening-your-project-in-vs-code",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#51-opening-your-project-in-vs-code",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"5.1 Opening Your Project in VS Code"]}),` `,(0,n.jsx)(e.p,{children:`Visual Studio Code is where the magic happens. Let's open your project and explore the code:`}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:"Open VS Code on your computer."}),` `,(0,n.jsx)(e.li,{children:'Click on "File" in the top-left corner.'}),` `,(0,n.jsx)(e.li,{children:'Select "Open folder..." from the dropdown menu.'}),` `,(0,n.jsx)(e.li,{children:`Navigate to the location of your CodebaseUp project (e.g. ~/Code/YOUR-PROJECT-NAME) and click "Open."`}),` `]}),` `,(0,n.jsx)(e.p,{children:`VS Code will now load your project, and you'll see the project structure on the left side.`}),` `,(0,n.jsxs)(e.h3,{id:"52-project-structure-codebase-modularity-with-monorepo",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#52-project-structure-codebase-modularity-with-monorepo",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"5.2 Project Structure: Codebase Modularity with Monorepo"]}),` `,(0,n.jsx)(e.p,{children:`The CodebaseUp project adopts a so-called monorepo project structure, designed for both solo makers and tech teams.`}),` `,(0,n.jsx)(e.p,{children:`This structure emphasizes code modularity, allowing you to create reusable components and packages.`}),` `,(0,n.jsx)(e.p,{children:`For example, consider a scenario where you want to develop a reusable design system package applicable to multiple apps (e.g., web, documentation, or a browser extension).`}),` `,(0,n.jsx)(e.p,{children:`This approach ensures that you avoid writing repetitive code and promotes efficiency.`}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://turbo.build/repo",children:"https://turbo.build/repo"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Apps and Packages:"})}),` `,(0,n.jsx)(e.p,{children:"There are two main folders in the root of the codebase:"}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"apps"})," folder:"]}),` `,(0,n.jsx)(e.p,{children:`Understand apps as a standalone and independent web application. It can be your main website with landing pages, browser extensions, or blogs. Each can be deployed online independently on its own domain (e.g. yourdomain.com) or subdomain (blog.yourdomain.com).`}),` `,(0,n.jsxs)(e.p,{children:["Th ",(0,n.jsx)(e.code,{children:"apps/web"}),` folder houses a Next.js app, serving as the primary app used for demo purposes that we will spin up shortly.`]}),` `,(0,n.jsxs)(e.p,{children:[`While the codebase provides the Next.js app as a starting point, you can use other React-based frameworks and still benefit from the codebase. Consider the `,(0,n.jsx)(e.code,{children:"web"})," app as a guide when creating your own apps."]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"packages"})," folder:"]}),` `,(0,n.jsx)(e.p,{children:`The packages folder contains a collection of reusable and ready-to-use packages that are employed throughout the monorepo.`}),` `,(0,n.jsx)(e.p,{children:`They are either JavaScript/TypeScript libraries (e.g., database, emailing, or payments) or React components (e.g. ui).`}),` `,(0,n.jsxs)(e.ul,{children:[` `,(0,n.jsx)(e.li,{children:"database: powered by Prisma, the Node.js and Typescript ORM."}),` `,(0,n.jsx)(e.li,{children:"emailing: powered by react email and Sendgrid."}),` `,(0,n.jsx)(e.li,{children:"eslint-config-custom: ESLint configurations."}),` `,(0,n.jsx)(e.li,{children:"tailwind-config: Tailwind CSS configurations."}),` `,(0,n.jsx)(e.li,{children:"tsconfig: Typescript configurations."}),` `,(0,n.jsx)(e.li,{children:`ui: Beautifully designed components by shadcn/ui. Based on Radix & Tailwind CSS & Lucide Icons. Fully customizable.`}),` `]}),` `,(0,n.jsx)(e.p,{children:`Understanding this project structure enables you to leverage the benefits of code modularity and efficiently build your applications.`}),` `,(0,n.jsx)(e.p,{children:`In the next steps, we'll configure environment variables and explore how to run your project locally.`}),` `,(0,n.jsx)(e.p,{children:"Keep coding!"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Resources:"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://nextjs.org",children:"https://nextjs.org"})}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.a,{href:"https://react.dev",children:"https://react.dev"})}),` `,(0,n.jsxs)(e.h3,{id:"53-setting-up-environment-variables",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#53-setting-up-environment-variables",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"5.3 Setting Up Environment Variables"]}),` `,(0,n.jsx)(e.p,{children:`Environment variables are like secret codes that your project uses to adapt to different situations.`}),` `,(0,n.jsx)(e.p,{children:`It's important to note that setting up environment variables is optional in CodebaseUp.`}),` `,(0,n.jsx)(e.p,{children:`While these variables enable the built-in modules for features like authentication, database access, analytics, payments, and more, the core functionality of the application remains fully functional even if they are left empty.`}),` `,(0,n.jsx)(e.p,{children:`This means you can still build landing pages, write blog posts, and leverage the fundamental capabilities of CodebaseUp without configuring these optional variables.`}),` `,(0,n.jsx)(e.p,{children:`Once you get familiar with the codebase, you can tailor your project according to your immediate needs and gradually incorporate additional configurations as your project evolves.`}),` `,(0,n.jsx)(e.p,{children:"Now let's dive into setting them up in VS Code."}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsxs)(e.li,{children:["In the root of the project, create a new file named ",(0,n.jsx)(e.code,{children:".env.local"}),"."]}),` `,(0,n.jsxs)(e.li,{children:[`Also in the root of the project, you'll find a file named `,(0,n.jsx)(e.code,{children:".env.local.example"}),`. It contains a list of example environment variables with empty values.`]}),` `,(0,n.jsx)(e.li,{children:"Copy the content of this file."}),` `,(0,n.jsxs)(e.li,{children:["Open ",(0,n.jsx)(e.code,{children:".env.local"})," and paste the copied content."]}),` `,(0,n.jsx)(e.li,{children:`Replace the placeholder values with your actual configuration (only where needed according to your project needs, the remaining values can remain empty).`}),` `]}),` `,(0,n.jsx)(e.p,{children:`You've successfully opened your CodebaseUp project in VS Code and added essential environment variables.`}),` `,(0,n.jsx)(e.p,{children:`In the next steps, we'll explore how to run your project locally and see it come to life.`}),` `,(0,n.jsx)(e.p,{children:"Keep coding!"}),` `,(0,n.jsxs)(e.h2,{id:"6-installing-project-dependencies",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#6-installing-project-dependencies",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"6. Installing Project Dependencies"]}),` `,(0,n.jsx)(e.p,{children:`Before we jump into the coding extravaganza, let's talk about project dependencies.`}),` `,(0,n.jsx)(e.p,{children:`These are like the building blocks that make your project work seamlessly. Think of them as tools and resources your project needs to bring your ideas to life.`}),` `,(0,n.jsx)(e.p,{children:`In our CodebaseUp monorepo world, our project is like a city with a big master plan, and every app and package is a unique building.`}),` `,(0,n.jsxs)(e.p,{children:["To manage this, we have special files called ",(0,n.jsx)(e.code,{children:"package.json"}),` in the city's main blueprint (the root) and in each building.`]}),` `,(0,n.jsxs)(e.p,{children:["Root ",(0,n.jsx)(e.code,{children:"package.json"}),`: This file at the project's heart lists things that everyone in the city needs, like utilities shared across buildings.`]}),` `,(0,n.jsxs)(e.p,{children:["Building ",(0,n.jsx)(e.code,{children:"package.json"}),": Each building has its own ",(0,n.jsx)(e.code,{children:"package.json"}),` that lists what's specific to that place\u2014like unique furniture or tools.`]}),` `,(0,n.jsxs)(e.p,{children:[`Now, let's talk about dependencies. These are like tools or resources your city and its buildings need. When you run `,(0,n.jsx)(e.code,{children:"pnpm install"}),` in the main city center (root), it's like ordering supplies for the entire project. It checks the main blueprint and gets what's needed for everyone.`]}),` `,(0,n.jsxs)(e.p,{children:[`But, if you're focusing on a specific building, you go to that building's location in the city and run `,(0,n.jsx)(e.code,{children:"pnpm install"}),`. This gets only the supplies needed for that building.`]}),` `,(0,n.jsx)(e.p,{children:"In your terminal, if you're in the city center (root), just say:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"pnpm install"})})})})}),` `,(0,n.jsx)(e.p,{children:`And that's it! Your city is equipped, and each building has what it needs to shine.`}),` `,(0,n.jsx)(e.p,{children:"On to the next chapter of your coding adventure!"}),` `,(0,n.jsxs)(e.h2,{id:"7-spinning-up-the-development-server",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#7-spinning-up-the-development-server",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"7. Spinning Up the Development Server:"]}),` `,(0,n.jsx)(e.p,{children:`Now that your CodebaseUp project is configured, environment variables are optionally set, and project dependencies are installed, it's time to bring your application to life by spinning up the development server.`}),` `,(0,n.jsxs)(e.h3,{id:"71-launching-the-whole-monorepo",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#71-launching-the-whole-monorepo",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"7.1 Launching the Whole Monorepo"]}),` `,(0,n.jsx)(e.p,{children:`To run all the apps and packages included in the monorepo, use the following command in the Terminal:`}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"pnpm run dev"})})})})}),` `,(0,n.jsx)(e.p,{children:`This command initiates what's called a "development server" right on your local machine. Think of it as a mini, private corner of the internet hosted on your computer where your CodebaseUp project can run and evolve.`}),` `,(0,n.jsx)(e.p,{children:`It also comes with a cool feature called "hot reload." Imagine every time you make changes to your code, those changes are immediately reflected in your browser without needing to refresh the page.`}),` `,(0,n.jsx)(e.p,{children:`It's like having a live connection between your code editor and your application!`}),` `,(0,n.jsxs)(e.h3,{id:"72-running-a-specific-app-or-package",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#72-running-a-specific-app-or-package",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"7.2 Running a Specific App or Package"]}),` `,(0,n.jsxs)(e.p,{children:[`If you want to conserve computer resources (recommended) or focus on a specific app or package within the monorepo, use the `,(0,n.jsx)(e.code,{children:"--filter"})," option."]}),` `,(0,n.jsx)(e.p,{children:"For example, to run only the web app:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"pnpm run dev --filter=web"})})})})}),` `,(0,n.jsx)(e.p,{children:`This command launches the development server exclusively for the specified app or package.`}),` `,(0,n.jsxs)(e.h3,{id:"73-accessing-the-app",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#73-accessing-the-app",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"7.3 Accessing the App"]}),` `,(0,n.jsx)(e.p,{children:`Once the development server is up and running, you can access your application in a web browser:`}),` `,(0,n.jsx)(e.p,{children:"Open your preferred web browser."}),` `,(0,n.jsxs)(e.p,{children:["Go to",(0,n.jsx)(e.code,{children:" http://localhost:3000"}),"."]}),` `,(0,n.jsxs)(e.p,{children:[`This way you're essentially telling your browser to connect to a specific location on your computer. Let's break down what `,(0,n.jsx)(e.code,{children:"http://localhost:3000"})," means:"]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"http://"}),`: This stands for Hypertext Transfer Protocol, which is the foundation of any data exchange on the web. It defines how messages are formatted and transmitted.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:"localhost"}),`: It refers to the current machine or the computer you are using. In simpler terms, it's like saying "this computer" or "my computer."`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.code,{children:":3000"}),`: This part specifies the port number. A port is like a door through which information can flow in and out of a computer. The number 3000 is just a label for a specific door. In our case, it's the door where your CodebaseUp application is waiting to communicate.`]}),` `,(0,n.jsxs)(e.p,{children:["So, when you go to ",(0,n.jsx)(e.code,{children:"http://localhost:3000"}),` in your browser, it's akin to opening a door on your computer (port 3000) and peeking inside to see your running application.`]}),` `,(0,n.jsx)(e.p,{children:`It's a way for your browser to find and interact with the application's server, all happening locally on your machine.`}),` `,(0,n.jsx)(e.p,{children:`Voil\xE0! Your CodebaseUp application is now alive and kicking right on your local machine.`}),` `,(0,n.jsx)(e.p,{children:`This means you can see and interact with the app without it being on the internet. It's like having a playground for your code, all within the comfort of your computer.`}),` `,(0,n.jsx)(t,{src:"/content/guides/from-zero-to-code/codebase-up.png",width:"1600",height:"1017",alt:"Accessing the app"}),` `,(0,n.jsxs)(e.h3,{id:"74-additional-perks",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#74-additional-perks",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"7.4 Additional Perks"]}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Logs in the Terminal:"})}),` `,(0,n.jsx)(e.p,{children:"Keep an eye on the terminal where you launched the development server."}),` `,(0,n.jsx)(e.p,{children:`It's like the command center for your application, and you'll see logs indicating what's happening behind the scenes.`}),` `,(0,n.jsx)(e.p,{children:`Don't worry if some of it looks like a secret code; those logs are there to help you understand what your app is doing and the better developer you become the more sense it starts to make.`}),` `,(0,n.jsx)(t,{src:"/content/guides/from-zero-to-code/run-dev.png",width:"697",height:"483",alt:"Terminal logs"}),` `,(0,n.jsx)(e.p,{children:(0,n.jsx)(e.strong,{children:"Chrome DevTools:"})}),` `,(0,n.jsx)(e.p,{children:"Ever heard of detective work for code?"}),` `,(0,n.jsx)(e.p,{children:"Open up the Chrome browser and right-click on your running CodebaseUp app."}),` `,(0,n.jsx)(e.p,{children:`Select "Inspect" or use the shortcut Cmd + Option + I. Here, you'll find the Chrome DevTools - another powerful tool to see logs, inspect elements, and explore the runtime details of your application. It's like having X-ray vision for your code!`}),` `,(0,n.jsx)(t,{src:"/content/guides/from-zero-to-code/chrome-dev-tools.png",width:"1600",height:"1017",alt:"Chrome Dev Tools"}),` `,(0,n.jsx)(e.p,{children:`Congratulations! You've successfully spun up the development server for your CodebaseUp project. Whether you're running the entire monorepo or a specific app, this step brings your project to life locally. In the upcoming chapters, we'll delve into exploring and customizing your application. Enjoy the journey of building with CodebaseUp!`}),` `,(0,n.jsxs)(e.h2,{id:"8-making-changes-to-the-code",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#8-making-changes-to-the-code",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"8. Making Changes to the Code"]}),` `,(0,n.jsx)(e.p,{children:`Now that your CodebaseUp application is up and running, let's make some personalized changes to the code.`}),` `,(0,n.jsx)(e.p,{children:"We'll start with a simple tweak to the hero heading on the main landing page."}),` `,(0,n.jsxs)(e.h3,{id:"81-changing-the-hero-heading",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#81-changing-the-hero-heading",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"8.1 Changing the Hero Heading"]}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:"Open Visual Studio Code (VS Code)."}),` `,(0,n.jsx)(e.li,{children:"Press Cmd + P to access the file search bar."}),` `,(0,n.jsxs)(e.li,{children:["Type ",(0,n.jsx)(e.code,{children:"Homepage.tsx"})," and press Enter."]}),` `,(0,n.jsxs)(e.li,{children:["You'll navigate to the ",(0,n.jsx)(e.code,{children:"Homepage.tsx"})," file within the web app."]}),` `]}),` `,(0,n.jsx)(t,{src:"/content/guides/from-zero-to-code/homepage-component.png",width:"1600",height:"919",alt:"Homepage Component"}),` `,(0,n.jsxs)(e.ol,{start:"5",children:[` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Locate the following code snippet representing the Homepage component:"}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"jsx","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"jsx","data-theme":"default",style:{display:"grid"},children:[(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"Homepage"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" () "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,n.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"container flex flex-col gap-20 my-20"'}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"Hero"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"CallToAction"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"ThankYou"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(e.span,{style:{color:"#79B8FF"},children:"FeatureList"}),(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,n.jsxs)(e.span,{"data-line":"",children:[(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:" );"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#E1E4E8"},children:"};"})})]})})}),` `,(0,n.jsx)(e.p,{children:`This JavaScript function is a React component containing four sub-components: Hero, CallToAction, ThankYou, and FeatureList.`}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:`Now, let's focus on the Hero component. While holding Cmd, click on to navigate to the Hero React component.`}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:["Within the Hero component, find the row containing ",(0,n.jsx)(e.code,{children:'{t("heading")}'}),`. This line involves a translation function `,(0,n.jsx)(e.code,{children:"t"})," with the argument ",(0,n.jsx)(e.code,{children:'"heading"'}),`. The function `,(0,n.jsx)(e.code,{children:"t"})," is defined above as const ",(0,n.jsx)(e.code,{children:'t = useTranslations("Homepage")'}),`, indicating text translations.`]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsxs)(e.p,{children:[`To change the text, press Cmd + P again, type en.json, and press Enter. This action directs you to the file containing English translations. Look up `,(0,n.jsx)(e.code,{children:'"Homepage"'})," and ",(0,n.jsx)(e.code,{children:'"heading"'}),`, then change the text from `,(0,n.jsx)(e.code,{children:'"Your codebase is up!"'})," to ",(0,n.jsx)(e.code,{children:'"I know how to code!"'}),`. Either wait a few seconds or press Cmd + S to save the file.`]}),` `]}),` `,(0,n.jsxs)(e.li,{children:[` `,(0,n.jsx)(e.p,{children:"Head to your browser to witness the change in action."}),` `]}),` `]}),` `,(0,n.jsx)(e.p,{children:`By following these steps, you've successfully customized the hero heading in your CodebaseUp application.`}),` `,(0,n.jsx)(e.p,{children:`This process demonstrates how to navigate through your code, locate specific components, and make targeted changes.`}),` `,(0,n.jsxs)(e.h3,{id:"82-creating-a-new-git-branch",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#82-creating-a-new-git-branch",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"8.2 Creating a New Git Branch"]}),` `,(0,n.jsx)(e.p,{children:`Now that we've made our initial changes to the CodebaseUp application, let's take a moment to set up a new Git branch.`}),` `,(0,n.jsx)(e.p,{children:`In the context of Git, a branch is like an isolated workspace within our project. It allows us to make changes, test ideas, or fix issues without directly affecting the main branch (on GitHub really named \u201Cmain\u201D).`}),` `,(0,n.jsx)(e.p,{children:`This is a best practice, ensuring that our modifications are contained and won't immediately impact the stable version of our application.`}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:`Head to the Terminal. If you're not already in the project's Git folder, navigate to it using the cd command. For example:`}),` `]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"cd ~/Code/YOUR-PROJECT-NAME"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"}})})]})})}),` `,(0,n.jsxs)(e.ol,{start:"2",children:[` `,(0,n.jsx)(e.li,{children:"In the terminal, type the following command to create a new branch:"}),` `]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"git checkout -b your-branch-name"})})})})}),` `,(0,n.jsxs)(e.p,{children:[`Replace your-branch-name with a descriptive name for your branch, such as `,(0,n.jsx)(e.code,{children:"update-hero-heading"}),"."]}),` `,(0,n.jsxs)(e.ol,{start:"3",children:[` `,(0,n.jsx)(e.li,{children:`Press Enter to create the new branch. Now you've switched to the newly created branch.`}),` `]}),` `,(0,n.jsxs)(e.h3,{id:"83-making-your-first-git-commit",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#83-making-your-first-git-commit",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"8.3 Making Your First Git Commit"]}),` `,(0,n.jsx)(e.p,{children:`Now that we've set up a new branch and made changes to your project, let's commit these changes using Git.`}),` `,(0,n.jsx)(e.p,{children:`A commit is like taking a snapshot of your code at a specific point in time. It helps you keep track of the evolution of your project.`}),` `,(0,n.jsxs)(e.ol,{children:[` `,(0,n.jsx)(e.li,{children:"In the Terminal, ensure you're still in your project's Git folder:"}),` `]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"cd ~/Code/YOUR-PROJECT-NAME"})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"}})})]})})}),` `,(0,n.jsxs)(e.ol,{start:"2",children:[` `,(0,n.jsx)(e.li,{children:"Type the following commands to stage and commit your changes:"}),` `]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsxs)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:[(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"git add ."})}),` `,(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:'git commit -m "Update hero heading text"'})})]})})}),` `,(0,n.jsx)(e.p,{children:"The first command stages the changes, and the second commits them with a descriptive message."}),` `,(0,n.jsxs)(e.ol,{start:"3",children:[` `,(0,n.jsx)(e.li,{children:"Now, it's time to push your changes to the branch on GitHub:"}),` `]}),` `,(0,n.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(e.pre,{style:{backgroundColor:"#24292e"},tabIndex:"0","data-language":"","data-theme":"default",children:(0,n.jsx)(e.code,{"data-language":"","data-theme":"default",style:{display:"grid"},children:(0,n.jsx)(e.span,{"data-line":"",children:(0,n.jsx)(e.span,{style:{color:"#e1e4e8"},children:"git push origin your-branch-name"})})})})}),` `,(0,n.jsxs)(e.p,{children:["Replace your-branch-name with the name you gave to your branch (e.g. ",(0,n.jsx)(e.code,{children:"update-hero-heading"})," from the previous step)."]}),` `,(0,n.jsxs)(e.ol,{start:"4",children:[` `,(0,n.jsx)(e.li,{children:`Head over to your GitHub repository in a web browser. You should see a prompt to compare and pull request your branch.`}),` `,(0,n.jsx)(e.li,{children:'Click on "Compare & pull request."'}),` `,(0,n.jsx)(e.li,{children:`Review your changes and, if everything looks good, click on "Create pull request."`}),` `,(0,n.jsx)(e.li,{children:"Give your pull request a meaningful title and description."}),` `,(0,n.jsx)(e.li,{children:'Click on "Create pull request" one more time.'}),` `]}),` `,(0,n.jsx)(e.p,{children:`You've successfully made your first Git commit, pushed changes to a new branch, and initiated a pull request on GitHub.`}),` `,(0,n.jsx)(e.p,{children:`This is a crucial part of collaborative coding and version control, allowing you to contribute your modifications to the main project seamlessly.`}),` `,(0,n.jsxs)(e.h2,{id:"conclusion-celebrate-your-coding-milestone",children:[(0,n.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#conclusion-celebrate-your-coding-milestone",children:(0,n.jsx)(e.span,{className:"icon icon-link"})}),"Conclusion: Celebrate Your Coding Milestone!"]}),` `,(0,n.jsx)(e.p,{children:`Congratulations! You've completed this comprehensive guide, navigating through the initial steps of setting up your development environment, exploring CodebaseUp, and making your first Git commit. \u{1F389}`}),` `,(0,n.jsx)(e.p,{children:"In this journey, you've:"}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Mastered the Terminal:"}),` Overcome the initial apprehension of the command line, gaining a powerful tool for interacting with your computer's file system.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Embraced Git and Version Control:"}),` Understand the significance of version control, making your coding journey smoother and collaborative.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Installed Node.js and pnpm:"}),` Equipped your machine with essential tools for running JavaScript outside the browser and efficiently managing packages.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Set Up Visual Studio Code:"}),` Established a digital workspace that streamlines code writing, editing, and management.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Cloned CodebaseUp and Customized Your Project:"}),` Transformed CodebaseUp into your unique project, changing the hero heading and navigating through the codebase confidently.`]}),` `,(0,n.jsxs)(e.p,{children:[(0,n.jsx)(e.strong,{children:"Made Your First Git Commit:"}),` Commited your changes, pushed them to GitHub, and initiated a pull request\u2014a key step in collaborative coding.`]}),` `,(0,n.jsx)(e.p,{children:`Now, take a moment to reflect on what you've achieved. You've laid the foundation for your coding adventure, embracing the tools and practices that will empower you to bring your ideas to life. Remember, every coder started somewhere, and you've just taken significant strides forward.`}),` `,(0,n.jsx)(e.p,{children:`As you continue this journey, explore more, build upon what you've learned, and never hesitate to dive into the exciting world of coding. Your possibilities are endless, and you've just unlocked the door to a realm of creativity and innovation.`}),` `,(0,n.jsx)(e.p,{children:"Happy coding, and may your projects flourish! \u{1F680}"})]})}function k(i={}){let{wrapper:e}=i.components||{};return e?(0,n.jsx)(e,Object.assign({},i,{children:(0,n.jsx)(d,i)})):d(i)}var E=k;function C(i,e){throw new Error("Expected "+(e?"component":"object")+" `"+i+"` to be defined: you likely forgot to import, pass, or provide it.")}return w(j);})(); ;return Component;

Design system

Solutions

Resources

Developers

Build with us

Legal