Make a Project Directory

  1. Create a folder named "hangman" on your desktop.

Open the "Hangman" Folder with Code

  1. Open the Code app
  2. Open the menu File->Open Folder to select the "hangman" folder you created

Setup the Project with Code's Integrated Terminal

Open the View->Integrated Terminal. A terminal will pop open at the bottom of your Code app. Type the following to start the initial setup.

yarn init -y

:warning:

Explain what "bash" and Errors around installing yarn on OSX :/ have them pwd to make sure it's in the right directory Look through all the wording/warnings/errors. Ugh.

The -y accepts all the default settings. If you don't like the defaults, yarn init will prompt you for input to configure your project.

You should now see a package.json file appear in the explorer on the left. Open package.json to see the generated output.

Install next and ramda

With the integrated terminal still open, type the following to install next

yarn add next

This will take a few seconds explain ramda

With package.json open, you'll see the following was added:

"dependencies": {
    "next": "^1.2.3"
  }

"next" is the name of the library, "^1.2.3" is the version number. The version number will change over time, so don't be surprised if it doesn't match the one above.

Now install ramda:

yarn add ramda

The package.json will update the dependencies to look like this:

  "dependencies": {
    "next": "^1.2.3",
    "ramda": "^0.23.0"
  }

This means that next and ramda have both been downloaded and installed into your project.

You'll notice a folder named node_modules and a file named yarn.lock:

  • node_modules is where your libraries, next and ramda, were installed
  • yarn.lock is a generated file that keeps track of all of the dependencies of your project

Add a dev Script

Open package.json, directly under the line with "license":"MIT", add the following:

  "scripts": {
    "dev": "next"
  },

Remember the ,!

"dev":"next" is a script that we'll run with a yarn command at the end of this page.

Your package.json should now look like:

{
  "name": "hangman",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "next"
  },
  "dependencies": {
    "next": "^1.2.3",
    "ramda": "^0.23.0"
  }
}

:warning: Explain everything about how to save files. :warning: Save the File!

Create a JavaScript File

In Code, create a folder called pages

Right-click directly under the yarn.lock file, select "New Folder", name it "pages"

Then create an index.js file in the pages folder.

Right-click on the "pages" folder, "New File, name it "index.js"

:warning: Save the File!

Write the Main Function

In the pages/index.js file, copy and paste the following code:

export default () => <div>It's working!</div>

Don't worry about what the code above does yet, you will learn about it in the next section.

Run the Project

In Code's integrated terminal, type the following command:

yarn run dev

This runs the "dev" script we created in add a dev script. This script starts a server on your computer that's running your project at http://localhost:3000

Open the Browser

Open your browser, such as "Chrome", to http://localhost:3000 to see your main function in action.

Notes

:warning:

Stopping the Server

This script will continue to run until you cancel it:

  • Hit control+c,
  • Type Y
  • Hit Enter

If You See a 404

Did you put the index.js in the pages folder?

results matching ""

    No results matching ""