Skip to content

Latest commit

 

History

History
71 lines (44 loc) · 3.02 KB

01-Step01.md

File metadata and controls

71 lines (44 loc) · 3.02 KB
Raw

Getting Started with Node, Express & Next.js using Copilot chat

In this lab, we will be using GitHub Copilot's chat feature and inline suggestions in Visual Studio Code to get answers to our questions.

Here's how you can use it:

  1. Create a folder which will store the project source code we create.
  2. Open Visual Studio Code and open the project folder.
  3. Click on the Copilot icon in the activity bar on the side.
  4. Click on the "Chat in new tab" button to start a new chat.
  5. Now you can start asking questions.
  6. Try and use Copilot chat to create a new Express API project as well as a Next.js Web App.
  7. Below are some questions you can ask to get started.

In addition to using the chat feature, you can also use the CTRL + I command to get inline suggestions from GitHub Copilot while you're writing code. This can be especially useful when you're not sure how to write a certain piece of code. Simply start typing and then press CTRL + I to see a suggestion from GitHub Copilot.

Create a Node Express API Project

Start by creating a folder in your project folder to store the Express API code, then use Copilot chat to create the Express API.

I'm new to Node & the Express framework - can you give me some high level areas I should learn?

Ask Copilot: "What are some high level areas I should learn for Node and Express?"

How do I create a new Express API using TypeScript?

Ask Copilot: "How do I create a new Express API using TypeScript?"

What's a good Express project structure?

Ask Copilot: "What's a good Express project structure?"

How do I add a controller & routes in Express?

Ask Copilot: "How do I add a controller and routes in Express?"

How can I add a git ignore file?

Ask Copilot: "How can I add a git ignore file to my Express project?"

Create a Next.js Web App

Next we will use Copilot chat to create a new Next.js Web App.

I'm new to Next.js - can you give me some high level areas I should learn?

Ask Copilot: "What are some high level areas I should learn for Next.js?"

How do I create a new Next.js App?

Ask Copilot: "How do I create a new Next.js App?"

Notice that their are some options asked when creating the Next.js App, if you're unsure of what to select ask Copilot! I chose No to using the App Router, instead opting for the Page Router.

Would you like to use TypeScript? No / [Yes]
Would you like to use ESLint? No / [Yes]
Would you like to use Tailwind CSS? No / [Yes]
Would you like to use `src/` directory? No / [Yes]
Would you like to use App Router? (recommended) [No] / Yes
Would you like to customize the default import alias (@/*)? [No] / Yes

What's a good project structure for Next.js?

Ask Copilot: "What's a good project structure for Next.js?"

How do I add a new Page to a Next.js project and fetch data from an API to display?

Ask Copilot: "How do I add a new Page to a Next.js project and fetch data from an API to display?"

Previous - Home | Next - Extending the Node.js Express TypeScript API