Skip to content

Latest commit

 

History

History
131 lines (76 loc) · 5.8 KB

README.md

File metadata and controls

131 lines (76 loc) · 5.8 KB
Raw

Exercise 1 - Getting Started

In this exercise you will set up the local development environment required for the next exercises.

You will learn to:

  • Install required software
  • Fork and clone our Git repository and get it running on your computer.
  • Get the local development environment up and running
  • Take a quick tour of the repository and the app (even though the app is not the focus of this workshop - deploying it is).

1.1 Installing required software

1.1.1 Node.js

📖 To see if you already have Node.js installed, open up your terminal application.

  • If you're on a Mac, look for a command prompt application called "Terminal".
  • If you're on a Windows machine, open the Windows command prompt or "Git Bash".

📖 Once you´ve opened your terminal application, type node -v. The output will either tell you which version of Node.js is installed, or it will alert you that Node.js is an unknown command.

✏️ If it's an unknown command, download and install the latest LTS (long-term support) release from nodejs.org.

❗ Note: If you have Node installed with a version less than the latest LTS version, please upgrade to the latest LTS version before continuing.

1.1.2 Installing Chrome

✏️ Install Google Chrome if you don't have it.

1.2 GitHub account setup

✏️ If you don't already have a GitHub account, follow the Sign up for a new GitHub account guide on GitHub.com. It's free!

✏️ Make a note of your GitHub username.

1.3 Installing git

Checking for Git

✏️ To see if you already have Git installed, open up your terminal application.

  • If you're on a Mac, look for a command prompt application called "Terminal".
  • If you're on a Windows machine, open the Windows command prompt or "Git Bash".

Once you've opened your terminal application, type git version. The output will either tell you which version of Git is installed, or it will alert you that git is an unknown command. If it's an unknown command, follow the Install Git guide.

1.2.2 Optional - Install GitHub Desktop

If you are new to git, GitHub Desktop is recommended to simplify working with git. GitHub Desktop also installs git automatically.

1.2 Getting started

💡 The exercises assume that you have prior experience using git. If you are new to git, consider reading the following guides before continuing:

For more in depth learning, Git-it is recommended.

📖 Feel free to always ask the instructors for help, as git can be overwhelming for beginners.

Forking the git repository

📖 A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.

✏️ Open the nerdschoolbergen/build-and-deploy repository page and select Fork:

✏️ Set your GitHub user as owner and then select Create fork:

📖 After forking, you should now have a copy of the repository on your GitHub account.

Cloning the git repository

📖 Repositories on GitHub are remote repositories. To create a local copy on your computer, you clone the remote repository you just created on your account.

Cloning using GitHub Desktop

📖 If you have GitHub Desktop installed, you can use it to clone the repository.

✏️ Follow these instructions.

Cloning using a web browser and terminal

📖 If you don't have GitHub Desktop installed, you can clone the repository using the browser and a terminal.

✏️ Follow these instructions.

Setting up the local app development environment

📖 To make things easier, we have provided a simple example web app for you.

✏️ Navigate to the code directory in the repository in your terminal and run the following command to install all project dependencies:

npm install

✏️ Once everything is installed, open the repository directory in Visual Studio Code.

📖 Let's take a look at the structure of the code directory:

code
├── index.html
├── package-lock.json
├── package.json
├── src
  • index.html is the main entrypoint of the app
  • The package-lock.json file is just for NPM to keep track of our dependencies.
  • The package.json file is where we keep some metatdata about our app, some scripts like building the app and running tests, and listing our dependencies.
  • src - contains the web app JavaScript code

✏️ Run npm start in your terminal.

✏️ Open http://localhost:5173 in Chrome.

📖 1.3 The app

Today is about deploying the app and not how it works or building more features, but it's worth having a quick tour nontheless.

As the name implies, the app simply displays the current time and number of seconds left of the year:

Go to exercise 2 ➡️