Launching with Composition API with Ben Hong

Project Setup

In this stage, we will be setting up our environment so we're ready for the rest of the mission.

πŸ“š Resources

πŸ“ Transcript

00:00:03.090 --> 00:00:04.370 Hey, it's Ben here.

00:00:04.990 --> 00:00:07.970 As the sole engineer on the space station, I'll need your help in order to get

00:00:07.970 --> 00:00:11.540 these tasks fix so that we can launch other explorers into the vast unknown.

00:00:12.410 --> 00:00:15.630 Commander V has requested that we give the new Composition API a go.

00:00:15.860 --> 00:00:17.270 So that's what we'll be using together.

00:00:18.140 --> 00:00:20.990 I'll be here as your guide to assist you since I know this is your first

00:00:20.990 --> 00:00:22.700 time working with the Composition API.

00:00:23.330 --> 00:00:25.760 Before we get started, you'll need to make sure that you have the following

00:00:25.760 --> 00:00:30.065 installed on your machine: git, which you can verify in the terminal with git

00:00:30.065 --> 00:00:34.875 dash dash version, as well as the latest stable version of node, if possible,

00:00:35.055 --> 00:00:38.445 which at the time of this recording is version 14, but you can check this

00:00:38.445 --> 00:00:40.275 by running node dash dash version.

00:00:42.735 --> 00:00:46.035 You also need to clone or for this repository that we have here for you.

00:00:48.225 --> 00:00:50.655 Let's go ahead and pair on this to make sure you have everything you need.

00:00:51.315 --> 00:00:54.165 I'm in my terminal and let's start by checking the get is installed

00:00:54.255 --> 00:00:55.995 by running get desktop version.

00:00:57.135 --> 00:00:59.295 As long as you see the version here, you should be good to go.

00:00:59.655 --> 00:01:03.315 Then we'll also check the node version with no desktop version.

00:01:03.855 --> 00:01:06.045 As you can see here, I'm on version 14.

00:01:06.795 --> 00:01:09.345 Now that we have this, let's go ahead and go over to our browser

00:01:10.065 --> 00:01:15.135 and check out the repo, which is under, get up.com/netlify/explorers.

00:01:15.164 --> 00:01:16.815 That's composition dash API.

00:01:17.805 --> 00:01:22.635 We'll go ahead and clone this by clicking on the clone tab and copying the SSH URL.

00:01:23.985 --> 00:01:25.544 And jumping back into our terminal.

00:01:25.964 --> 00:01:27.945 We'll go ahead and go inside of my projects directory.

00:01:28.515 --> 00:01:30.074 And I'm going to go ahead and click it in here.

00:01:32.985 --> 00:01:33.735 Now it's closed.

00:01:33.764 --> 00:01:35.985 I'll go ahead and change the directory into our explorers

00:01:35.985 --> 00:01:37.274 composition API project.

00:01:38.475 --> 00:01:42.014 And then we'll go ahead and run npm install to install all of our dependencies

00:01:45.464 --> 00:01:46.985 Now that everything's installed correctly.

00:01:47.074 --> 00:01:50.255 Let's go ahead and start up our local server by running NPM run.

00:01:50.255 --> 00:01:50.675 Serve.

00:01:53.009 --> 00:01:59.460 Now when we visit our localhost:8080, and our browser, we should see

00:01:59.550 --> 00:02:01.169 our app running as expected.

00:02:01.889 --> 00:02:03.899 And now that you're up and running, it's time for us to

00:02:03.899 --> 00:02:05.490 talk about the composition API.

00:02:06.000 --> 00:02:07.110 See you in the next video.

Explorers

your progress

29