# Contentstack Quick Start ### About this export | Field | Value | | --- | --- | | **content_type** | course | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/contentstack-quick-start | | **language** | en | | **product_area** | cms | | **learning_path** | standalone | | **course_id** | contentstack-quick-start | | **slug** | contentstack-quick-start | | **version** | 2026-03-01 | | **last_updated** | 2026-05-04 | | **status** | published | | **keywords** | ["cms","headless cms","contentstack"] | | **summary_one_line** | Contentstack Quick Start This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and imp… | | **total_duration_minutes** | 20 | | **lessons_count** | 6 | | **video_lessons_count** | 6 | | **text_lessons_count** | 0 | | **linked_learning_path** | standalone | | **linked_assessment_ref** | LMS_UNCONFIGURED_COURSE_ASSESSMENT | | **markdown_file_url** | /academy/md/courses/contentstack-quick-start.md | | **generated_at** | 2026-05-04T05:36:50.568Z | | **intended_audience** | [] | | **prerequisites** | [] | | **related_courses** | [] | > **Academy MD v3** — companion `.md` for Ask AI. Quizzes and graded assessments are **LMS-only**; this file never contains answer keys. ## Course Overview | Metadata | Value | | --- | --- | | Catalog duration | 20m 29s | | Released (if known) | 2026-03-01 | | Product area | cms | ### Description ### Contentstack Quick Start This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and import content models that were already built. Then you'll setup a new environment and the correct delivery tokens so you can access published content. When you're done with that you will create entries within the application, and then fork a GitHub repository of an existing React App. Finally, you'll see how to install require dependencies and configure Contentstack so you can ultimately publish to a local development server and deploy your app using Contentstack Launch. #### What you'll need: [Contentstack Account](https://www.contentstack.com/login) [Node.js version 18 or later](https://nodejs.org/en/download/) [Git](https://github.com/git-guides/install-git) [Github account](https://github.com/) [VS code](https://code.visualstudio.com/) Access to this [GitHub Repository](https://github.com/contentstack/contentstack-getting-started-react-app). ### Learning objectives 1. Follow each lesson in order. 2. Practice in a training stack using placeholders **YOUR_STACK_API_KEY** and **YOUR_DELIVERY_TOKEN** in local `.env` files only. 3. Validate API responses against the official documentation. ### Topics covered cms; headless cms; contentstack ## Course structure ```text contentstack-quick-start/ ├── 01-about-contentstack-quick-start · video · 186s ├── 02-create-a-new-stack-and-import-content-models · video · 216s ├── 03-setup-an-environment-and-a-delivery-token · video · 174s ├── 04-create-entries · video · 323s ├── 05-fork-the-starter-app-repository · video · 148s ├── 06-install-dependencies-and-configure-contentstack · video · 182s ``` ## Lessons ### Lesson 01 — About Contentstack Quick Start #### Video details #### At a glance - **Title:** Introduction - **Duration:** 3m 6s - **Media link:** https://cdn.jwplayer.com/previews/2RXwQtOJ - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - video/mp4 · 180p · 180p · 149308 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/2RXwQtOJ-120.vtt` #### Video transcript ```transcript [00:00] Transcript not attached in source entry. ``` #### Key takeaways - Connect **About Contentstack Quick Start** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 02 — Create a New Stack and Import Content Models #### Video details #### At a glance - **Title:** Create A New Stack And Import Content Models - **Duration:** 3m 36s - **Media link:** https://cdn.jwplayer.com/previews/0ELpUwGV - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113759 kbps - video/mp4 · 180p · 180p · 149977 kbps - video/mp4 · 270p · 270p · 171755 kbps - video/mp4 · 360p · 360p · 182274 kbps - video/mp4 · 406p · 406p · 193934 kbps - video/mp4 · 540p · 540p · 228859 kbps - video/mp4 · 720p · 720p · 284993 kbps - video/mp4 · 1080p · 1080p · 417490 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/0ELpUwGV-120.vtt` #### Video transcript ```transcript [00:00] Transcript not attached in source entry. ``` #### Key takeaways - Connect **Create a New Stack and Import Content Models** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 03 — Setup an Environment and a Delivery Token #### Video details #### At a glance - **Title:** Setup An Environment And Delivery Token - **Duration:** 2m 54s - **Media link:** https://cdn.jwplayer.com/previews/D7FcXrpe - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113998 kbps - video/mp4 · 180p · 180p · 138522 kbps - video/mp4 · 270p · 270p · 152104 kbps - video/mp4 · 360p · 360p · 164104 kbps - video/mp4 · 406p · 406p · 172591 kbps - video/mp4 · 540p · 540p · 195150 kbps - video/mp4 · 720p · 720p · 232996 kbps - video/mp4 · 1080p · 1080p · 303158 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/D7FcXrpe-120.vtt` #### Video transcript ```transcript [00:00] Transcript not attached in source entry. ``` #### Key takeaways - Connect **Setup an Environment and a Delivery Token** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 04 — Create Entries #### Video details #### At a glance - **Title:** Create Entries - **Duration:** 5m 23s - **Media link:** https://cdn.jwplayer.com/previews/vj7ByMGy - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113534 kbps - video/mp4 · 180p · 180p · 135722 kbps - video/mp4 · 270p · 270p · 146562 kbps - video/mp4 · 360p · 360p · 157845 kbps - video/mp4 · 406p · 406p · 164045 kbps - video/mp4 · 540p · 540p · 182273 kbps - video/mp4 · 720p · 720p · 213874 kbps - video/mp4 · 1080p · 1080p · 277927 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/vj7ByMGy-120.vtt` #### Transcript Now, we need to create our entries, specifically for the Footer, Header, and Home page. To do this, navigate to the Entry section by either clicking the button on the left side or pressing the E key on your keyboard. To create an entry, click the New Entry button on the right corner. This will open a dialog box where you can choose the content type. In this case, we'll select Header, and then we'll click Proceed. In the next screen, we need to title the header, so we can call it Header. I know, creative. In the next section, we want to add a logo to the header. We have that asset in the folder we downloaded from the Academy site, so we'll click the Upload File link, which opens up a new dialog box where we can specify where we want this asset to be uploaded to. I could create a subfolder to stay organized, but since this is such a simple application, I'll just upload it to the main directory. So to do that, I'll just click this Choose Files button. Now I'll have to navigate to the Assets folder inside our Stack Data folder. In there is a Header folder, and in there is the RestaurantMenuLogo.png file that we want to use. So I'll go ahead and select it, and then I'll click Open. You'll see a preview of the logo in the Logo section of the entry form. Now we'll add a website title of Spicy Hub Restaurant. The next thing we need to do is add navigation links. In this first instance, the title will be Home with a URL of forward slash. To add another link, we need to add another instance by clicking this little plus sign. In the second instance, we'll title it Menu with a URL of forward slash menu. Again, we'll click the plus sign in the Menu instance to add another new instance under it, which we'll title About Us with a URL of slash about hyphen us. And finally, we'll add one last link for Contact with a URL of forward slash contact. I'm happy with our work here, so I'll save it by clicking the Save button. Now before we move on to the next entry, I know that I'll want to view this on our server when we're ready. So in order for us to do that, we have to publish it. So let's go ahead and do that by clicking the Publish button, which will open up the Publish Entry dialog box. I'm happy with the defaults here of our development environment and publishing it now, so I'll click Send. When I do, I'm asked if I'd also like to publish any references. In this case, our logo file is a reference, so we do want that uploaded. So in this case, we will click Send with References. Now let's add our entries for the footer and for the home page. Click the back arrow up here towards the top left to get back to the Entry screen, where you'll see our header entry. To create a new footer entry, I'll come over to the Footer Content Type, and then I'll click the New Entry button in the top right. This will open the Select Content Type dialog box, but you'll notice that Footer is already selected because we have that highlighted on the left-hand side. So go ahead and click Proceed. We need to add a title, which I'll call Footer. Then in the Copyright field, I'll simply type Copyright 2024 Spicy Hub Restaurant. And really, that's about it. I'll save it, and of course, I'll also publish it. Again, I'm happy with the settings in the Publish Entry dialog box, so I'll click Send. Now let's create a page entry for our home page. I'll use the back arrow to return to the Entry screen. I'll navigate to the Page Content Type and select it, and you'll notice on the rail there's a small little button where I can create a new entry. Go ahead and click it. In the entry form, I need to provide a title. I'll call it Home with a URL of a forward slash. In the Sections area, I'll click Home Banner, and I'll upload a new file. Again, the main directory is fine, so I'll click the Choose Files button. In the dialog box, I'll navigate to the Page Home directory, and I'll select the Banner.jpg file. This will act as the main banner for our home page. Go ahead and click Open. And that's all we really have to worry about for now, so let's go ahead and save it, and we can also publish it. Again, here in the Publish Entry dialog box, we can click Send, and we do want to send with references because of that banner file. So with that, we're all set with creating entries. Now we can move on to setting up the Starter app. #### Subtitles (WebVTT) ```webvtt WEBVTT 1 00:00:00.000 --> 00:00:07.320 Now, we need to create our entries, specifically for the Footer, Header, and Home page. 2 00:00:07.320 --> 00:00:12.000 To do this, navigate to the Entry section by either clicking the button on the left 3 00:00:12.000 --> 00:00:16.160 side or pressing the E key on your keyboard. 4 00:00:16.160 --> 00:00:20.800 To create an entry, click the New Entry button on the right corner. 5 00:00:20.800 --> 00:00:24.480 This will open a dialog box where you can choose the content type. 6 00:00:24.480 --> 00:00:29.200 In this case, we'll select Header, and then we'll click Proceed. 7 00:00:29.200 --> 00:00:34.400 In the next screen, we need to title the header, so we can call it Header. 8 00:00:34.400 --> 00:00:36.200 I know, creative. 9 00:00:36.200 --> 00:00:40.720 In the next section, we want to add a logo to the header. 10 00:00:40.720 --> 00:00:46.240 We have that asset in the folder we downloaded from the Academy site, so we'll click the 11 00:00:46.240 --> 00:00:52.840 Upload File link, which opens up a new dialog box where we can specify where we want this 12 00:00:52.840 --> 00:00:55.160 asset to be uploaded to. 13 00:00:55.160 --> 00:00:59.960 I could create a subfolder to stay organized, but since this is such a simple application, 14 00:00:59.960 --> 00:01:02.680 I'll just upload it to the main directory. 15 00:01:02.680 --> 00:01:07.640 So to do that, I'll just click this Choose Files button. 16 00:01:07.640 --> 00:01:13.320 Now I'll have to navigate to the Assets folder inside our Stack Data folder. 17 00:01:13.320 --> 00:01:19.840 In there is a Header folder, and in there is the RestaurantMenuLogo.png file that we 18 00:01:19.840 --> 00:01:21.080 want to use. 19 00:01:21.080 --> 00:01:25.560 So I'll go ahead and select it, and then I'll click Open. 20 00:01:25.560 --> 00:01:30.640 You'll see a preview of the logo in the Logo section of the entry form. 21 00:01:30.640 --> 00:01:36.640 Now we'll add a website title of Spicy Hub Restaurant. 22 00:01:36.640 --> 00:01:40.740 The next thing we need to do is add navigation links. 23 00:01:40.740 --> 00:01:47.560 In this first instance, the title will be Home with a URL of forward slash. 24 00:01:47.560 --> 00:01:53.640 To add another link, we need to add another instance by clicking this little plus sign. 25 00:01:53.640 --> 00:02:00.320 In the second instance, we'll title it Menu with a URL of forward slash menu. 26 00:02:00.320 --> 00:02:06.440 Again, we'll click the plus sign in the Menu instance to add another new instance 27 00:02:06.440 --> 00:02:15.120 under it, which we'll title About Us with a URL of slash about hyphen us. 28 00:02:15.120 --> 00:02:23.840 And finally, we'll add one last link for Contact with a URL of forward slash contact. 29 00:02:23.840 --> 00:02:28.400 I'm happy with our work here, so I'll save it by clicking the Save button. 30 00:02:28.400 --> 00:02:32.920 Now before we move on to the next entry, I know that I'll want to view this on our 31 00:02:32.920 --> 00:02:35.520 server when we're ready. 32 00:02:35.520 --> 00:02:38.960 So in order for us to do that, we have to publish it. 33 00:02:38.960 --> 00:02:43.680 So let's go ahead and do that by clicking the Publish button, which will open up the 34 00:02:43.680 --> 00:02:45.960 Publish Entry dialog box. 35 00:02:45.960 --> 00:02:50.240 I'm happy with the defaults here of our development environment and publishing it 36 00:02:50.240 --> 00:02:52.920 now, so I'll click Send. 37 00:02:52.920 --> 00:02:58.040 When I do, I'm asked if I'd also like to publish any references. 38 00:02:58.040 --> 00:03:03.680 In this case, our logo file is a reference, so we do want that uploaded. 39 00:03:03.680 --> 00:03:07.920 So in this case, we will click Send with References. 40 00:03:07.920 --> 00:03:13.000 Now let's add our entries for the footer and for the home page. 41 00:03:13.000 --> 00:03:18.440 Click the back arrow up here towards the top left to get back to the Entry screen, 42 00:03:18.440 --> 00:03:21.000 where you'll see our header entry. 43 00:03:21.000 --> 00:03:26.000 To create a new footer entry, I'll come over to the Footer Content Type, and then 44 00:03:26.000 --> 00:03:29.880 I'll click the New Entry button in the top right. 45 00:03:29.880 --> 00:03:35.240 This will open the Select Content Type dialog box, but you'll notice that Footer is already 46 00:03:35.240 --> 00:03:39.400 selected because we have that highlighted on the left-hand side. 47 00:03:39.400 --> 00:03:41.940 So go ahead and click Proceed. 48 00:03:41.940 --> 00:03:45.720 We need to add a title, which I'll call Footer. 49 00:03:45.720 --> 00:03:53.740 Then in the Copyright field, I'll simply type Copyright 2024 Spicy Hub Restaurant. 50 00:03:53.740 --> 00:03:55.900 And really, that's about it. 51 00:03:55.900 --> 00:04:00.020 I'll save it, and of course, I'll also publish it. 52 00:04:00.020 --> 00:04:04.660 Again, I'm happy with the settings in the Publish Entry dialog box, so I'll click 53 00:04:04.660 --> 00:04:06.580 Send. 54 00:04:06.580 --> 00:04:10.780 Now let's create a page entry for our home page. 55 00:04:10.780 --> 00:04:14.540 I'll use the back arrow to return to the Entry screen. 56 00:04:14.540 --> 00:04:19.660 I'll navigate to the Page Content Type and select it, and you'll notice on the rail 57 00:04:19.660 --> 00:04:24.140 there's a small little button where I can create a new entry. 58 00:04:24.140 --> 00:04:25.860 Go ahead and click it. 59 00:04:25.860 --> 00:04:29.060 In the entry form, I need to provide a title. 60 00:04:29.060 --> 00:04:34.580 I'll call it Home with a URL of a forward slash. 61 00:04:34.580 --> 00:04:40.060 In the Sections area, I'll click Home Banner, and I'll upload a new file. 62 00:04:40.180 --> 00:04:45.620 Again, the main directory is fine, so I'll click the Choose Files button. 63 00:04:45.620 --> 00:04:50.660 In the dialog box, I'll navigate to the Page Home directory, and I'll select the 64 00:04:50.660 --> 00:04:53.220 Banner.jpg file. 65 00:04:53.220 --> 00:04:56.660 This will act as the main banner for our home page. 66 00:04:56.660 --> 00:04:58.540 Go ahead and click Open. 67 00:04:58.540 --> 00:05:03.200 And that's all we really have to worry about for now, so let's go ahead and save it, 68 00:05:03.200 --> 00:05:05.220 and we can also publish it. 69 00:05:05.380 --> 00:05:11.100 Again, here in the Publish Entry dialog box, we can click Send, and we do want to send 70 00:05:11.100 --> 00:05:15.300 with references because of that banner file. 71 00:05:15.300 --> 00:05:18.500 So with that, we're all set with creating entries. 72 00:05:18.500 --> 00:05:21.780 Now we can move on to setting up the Starter app. ``` ```transcript [00:00] Now, we need to create our entries, specifically for the Footer, Header, and Home page. [00:07] To do this, navigate to the Entry section by either clicking the button on the left [00:12] side or pressing the E key on your keyboard. [00:16] To create an entry, click the New Entry button on the right corner. [00:20] This will open a dialog box where you can choose the content type. [00:24] In this case, we'll select Header, and then we'll click Proceed. [00:29] In the next screen, we need to title the header, so we can call it Header. [00:34] I know, creative. [00:36] In the next section, we want to add a logo to the header. [00:40] We have that asset in the folder we downloaded from the Academy site, so we'll click the [00:46] Upload File link, which opens up a new dialog box where we can specify where we want this [00:52] asset to be uploaded to. [00:55] I could create a subfolder to stay organized, but since this is such a simple application, [00:59] I'll just upload it to the main directory. [01:02] So to do that, I'll just click this Choose Files button. [01:07] Now I'll have to navigate to the Assets folder inside our Stack Data folder. [01:13] In there is a Header folder, and in there is the RestaurantMenuLogo.png file that we [01:19] want to use. [01:21] So I'll go ahead and select it, and then I'll click Open. [01:25] You'll see a preview of the logo in the Logo section of the entry form. [01:30] Now we'll add a website title of Spicy Hub Restaurant. [01:36] The next thing we need to do is add navigation links. [01:40] In this first instance, the title will be Home with a URL of forward slash. [01:47] To add another link, we need to add another instance by clicking this little plus sign. [01:53] In the second instance, we'll title it Menu with a URL of forward slash menu. [02:00] Again, we'll click the plus sign in the Menu instance to add another new instance [02:06] under it, which we'll title About Us with a URL of slash about hyphen us. [02:15] And finally, we'll add one last link for Contact with a URL of forward slash contact. [02:23] I'm happy with our work here, so I'll save it by clicking the Save button. [02:28] Now before we move on to the next entry, I know that I'll want to view this on our [02:32] server when we're ready. [02:35] So in order for us to do that, we have to publish it. [02:38] So let's go ahead and do that by clicking the Publish button, which will open up the [02:43] Publish Entry dialog box. [02:45] I'm happy with the defaults here of our development environment and publishing it [02:50] now, so I'll click Send. [02:52] When I do, I'm asked if I'd also like to publish any references. [02:58] In this case, our logo file is a reference, so we do want that uploaded. [03:03] So in this case, we will click Send with References. [03:07] Now let's add our entries for the footer and for the home page. [03:13] Click the back arrow up here towards the top left to get back to the Entry screen, [03:18] where you'll see our header entry. [03:21] To create a new footer entry, I'll come over to the Footer Content Type, and then [03:26] I'll click the New Entry button in the top right. [03:29] This will open the Select Content Type dialog box, but you'll notice that Footer is already [03:35] selected because we have that highlighted on the left-hand side. [03:39] So go ahead and click Proceed. [03:41] We need to add a title, which I'll call Footer. [03:45] Then in the Copyright field, I'll simply type Copyright 2024 Spicy Hub Restaurant. [03:53] And really, that's about it. [03:55] I'll save it, and of course, I'll also publish it. [04:00] Again, I'm happy with the settings in the Publish Entry dialog box, so I'll click [04:04] Send. [04:06] Now let's create a page entry for our home page. [04:10] I'll use the back arrow to return to the Entry screen. [04:14] I'll navigate to the Page Content Type and select it, and you'll notice on the rail [04:19] there's a small little button where I can create a new entry. [04:24] Go ahead and click it. [04:25] In the entry form, I need to provide a title. [04:29] I'll call it Home with a URL of a forward slash. ``` #### Key takeaways - Connect **Create Entries** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 05 — Fork the Starter App Repository #### Video details #### At a glance - **Title:** Fork The Starter App Repository - **Duration:** 2m 28s - **Media link:** https://cdn.jwplayer.com/previews/StuPI42J - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113586 kbps - video/mp4 · 180p · 180p · 136303 kbps - video/mp4 · 270p · 270p · 148683 kbps - video/mp4 · 360p · 360p · 162903 kbps - video/mp4 · 406p · 406p · 169965 kbps - video/mp4 · 540p · 540p · 193247 kbps - video/mp4 · 720p · 720p · 231128 kbps - video/mp4 · 1080p · 1080p · 315115 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/StuPI42J-120.vtt` #### Transcript To fork the Starter App Repository, you need to make sure that you're logged in to GitHub like I am here. Once you are, you can visit the URL of the Starter App, which is in the description of the course on the Academy site. Once you're there, click the Fork button up towards the top. Now this next screen may vary a little bit depending if you've authorized ContentStack in the past. If you haven't, you'll have one additional step to do that. In my case, I have, so all I need to do is make sure that the owner is correct, and then select Copy the Main Branch Only checkbox. Then I can click Fork. Now this may take a few seconds, but eventually you should see the repository for the Restaurant Menu React app. Now to work with these files, we need to move over to VS Code. My Explorer is collapsed, so I'll go ahead and expand it, and then I'll click Open Folder. We need to create a directory to house the files that we bring over from our repository. You really can name it whatever you want and put it wherever you want. To keep it simple, I'll create a new folder on my desktop and I'll call it Getting Started. Once you create the folder, click Open. Next we need to get the files from the repository, so I'll open the Terminal by coming up to the Terminal menu and choosing New Terminal. In the Terminal, you'll see that I'm currently in the Getting Started directory on my desktop, which is where I want to be. If you're not, you'll have to change your directory, but for now all I have to do is type git clone and then type in the repository address, which is https://github.com slash your username, which in my case is pz-cs, forward slash the name of the forked repository, which is restaurant-menu-react-app.git. Once you have that typed in, press Enter. In the Explorer, you should see it populated with the files and directories in the forked repo. #### Subtitles (WebVTT) ```webvtt WEBVTT 1 00:00:00.000 --> 00:00:06.880 To fork the Starter App Repository, you need to make sure that you're logged in to GitHub 2 00:00:06.880 --> 00:00:08.920 like I am here. 3 00:00:08.920 --> 00:00:14.320 Once you are, you can visit the URL of the Starter App, which is in the description of 4 00:00:14.320 --> 00:00:17.680 the course on the Academy site. 5 00:00:17.680 --> 00:00:21.680 Once you're there, click the Fork button up towards the top. 6 00:00:21.680 --> 00:00:26.960 Now this next screen may vary a little bit depending if you've authorized ContentStack 7 00:00:26.960 --> 00:00:28.240 in the past. 8 00:00:28.240 --> 00:00:31.960 If you haven't, you'll have one additional step to do that. 9 00:00:31.960 --> 00:00:38.960 In my case, I have, so all I need to do is make sure that the owner is correct, and then 10 00:00:38.960 --> 00:00:43.360 select Copy the Main Branch Only checkbox. 11 00:00:43.360 --> 00:00:45.440 Then I can click Fork. 12 00:00:45.440 --> 00:00:51.280 Now this may take a few seconds, but eventually you should see the repository for the Restaurant 13 00:00:51.280 --> 00:00:53.740 Menu React app. 14 00:00:53.740 --> 00:00:58.720 Now to work with these files, we need to move over to VS Code. 15 00:00:58.720 --> 00:01:04.940 My Explorer is collapsed, so I'll go ahead and expand it, and then I'll click Open 16 00:01:04.940 --> 00:01:05.940 Folder. 17 00:01:05.940 --> 00:01:11.900 We need to create a directory to house the files that we bring over from our repository. 18 00:01:11.900 --> 00:01:16.800 You really can name it whatever you want and put it wherever you want. 19 00:01:16.800 --> 00:01:22.780 To keep it simple, I'll create a new folder on my desktop and I'll call it Getting Started. 20 00:01:22.820 --> 00:01:27.380 Once you create the folder, click Open. 21 00:01:27.380 --> 00:01:33.180 Next we need to get the files from the repository, so I'll open the Terminal by coming up to 22 00:01:33.180 --> 00:01:36.580 the Terminal menu and choosing New Terminal. 23 00:01:36.580 --> 00:01:42.060 In the Terminal, you'll see that I'm currently in the Getting Started directory on my desktop, 24 00:01:42.060 --> 00:01:44.140 which is where I want to be. 25 00:01:44.140 --> 00:01:49.920 If you're not, you'll have to change your directory, but for now all I have to do is 26 00:01:49.920 --> 00:02:01.680 type git clone and then type in the repository address, which is https://github.com slash 27 00:02:01.680 --> 00:02:10.320 your username, which in my case is pz-cs, forward slash the name of the forked repository, 28 00:02:10.320 --> 00:02:17.120 which is restaurant-menu-react-app.git. 29 00:02:17.120 --> 00:02:20.160 Once you have that typed in, press Enter. 30 00:02:20.160 --> 00:02:26.720 In the Explorer, you should see it populated with the files and directories in the forked repo. ``` ```transcript [00:00] To fork the Starter App Repository, you need to make sure that you're logged in to GitHub [00:06] like I am here. [00:08] Once you are, you can visit the URL of the Starter App, which is in the description of [00:14] the course on the Academy site. [00:17] Once you're there, click the Fork button up towards the top. [00:21] Now this next screen may vary a little bit depending if you've authorized ContentStack [00:26] in the past. [00:28] If you haven't, you'll have one additional step to do that. [00:31] In my case, I have, so all I need to do is make sure that the owner is correct, and then [00:38] select Copy the Main Branch Only checkbox. [00:43] Then I can click Fork. [00:45] Now this may take a few seconds, but eventually you should see the repository for the Restaurant [00:51] Menu React app. [00:53] Now to work with these files, we need to move over to VS Code. [00:58] My Explorer is collapsed, so I'll go ahead and expand it, and then I'll click Open [01:04] Folder. [01:05] We need to create a directory to house the files that we bring over from our repository. [01:11] You really can name it whatever you want and put it wherever you want. [01:16] To keep it simple, I'll create a new folder on my desktop and I'll call it Getting Started. [01:22] Once you create the folder, click Open. [01:27] Next we need to get the files from the repository, so I'll open the Terminal by coming up to [01:33] the Terminal menu and choosing New Terminal. [01:36] In the Terminal, you'll see that I'm currently in the Getting Started directory on my desktop, [01:42] which is where I want to be. [01:44] If you're not, you'll have to change your directory, but for now all I have to do is [01:49] type git clone and then type in the repository address, which is https://github.com slash [02:01] your username, which in my case is pz-cs, forward slash the name of the forked repository, [02:10] which is restaurant-menu-react-app.git. [02:17] Once you have that typed in, press Enter. [02:20] In the Explorer, you should see it populated with the files and directories in the forked repo. ``` #### Key takeaways - Connect **Fork the Starter App Repository** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ### Lesson 06 — Install Dependencies and Configure Contentstack #### Video details #### At a glance - **Title:** Install Dependencies And Configure Contentstack - **Duration:** 3m 2s - **Media link:** https://cdn.jwplayer.com/previews/8mWAHVVZ - **Publish date (unix):** 1716925471 #### Streaming renditions - application/vnd.apple.mpegurl - audio/mp4 · AAC Audio · 113747 kbps - video/mp4 · 180p · 180p · 145831 kbps - video/mp4 · 270p · 270p · 168830 kbps - video/mp4 · 360p · 360p · 190069 kbps - video/mp4 · 406p · 406p · 203807 kbps - video/mp4 · 540p · 540p · 247489 kbps - video/mp4 · 720p · 720p · 316525 kbps - video/mp4 · 1080p · 1080p · 489477 kbps #### Timed text tracks (delivery) - **thumbnails:** `https://cdn.jwplayer.com/strips/8mWAHVVZ-120.vtt` #### Transcript So, moving along, what we need to do now is install the dependencies for our repository. The first thing that we need to do in the terminal is change directories to the root of the cloned repository. To do this, type cd restaurant-menu-react-app/. Then we're ready to install the dependencies using the Node Package Manager, by typing npm install, then press enter. You can see that there's a minor update available, and that really shouldn't matter in our case. The next step is changing the credential file from .env.sample to just .env. Notice in the editor it's looking for our stack API key, as well as our delivery token, environment, and region. Now before, when we created our token, I showed you that you could easily copy that info. So let's return back to that screen to do just that. I'll jump back to my browser, and in Content Stack we can navigate to Settings. From there we can choose Tokens, then select our restaurant menu token, and if you scroll down you can click the Copy to Clipboard button to copy your stack API key. Then move back to VS Code and paste that value where it currently reads your stack API key. Now you'll need to repeat that process for the delivery token as well, but with the magic of editing, mine is already updated. Next we need to update the name of our environment, which, if you remember, we called Development. So I'll type that in. Finally, my region is AWS North America, so based on the comments here, I need to set my region to US. Now let's see this app render on our local host. To do this, I'll create a new terminal window to avoid clutter. I have to make sure I'm in the correct directory, so for my purposes, I need to type CD and then I'll reference our restaurant menu React app. To run this on our local server, all you have to do is type npm start. It might take a few seconds, but as it starts the development server, your browser will open. Here, I have to allow VS Code to open Chrome, so I'll do that, and when I do, sure enough, after a few seconds, the app will load. Now that we have it running locally, the next step is to deploy our app using Launch. #### Subtitles (WebVTT) ```webvtt WEBVTT 1 00:00:00.000 --> 00:00:08.180 So, moving along, what we need to do now is install the dependencies for our repository. 2 00:00:08.180 --> 00:00:13.200 The first thing that we need to do in the terminal is change directories to the root 3 00:00:13.200 --> 00:00:15.660 of the cloned repository. 4 00:00:15.660 --> 00:00:24.800 To do this, type cd restaurant-menu-react-app/. 5 00:00:24.800 --> 00:00:29.960 Then we're ready to install the dependencies using the Node Package Manager, by typing 6 00:00:29.960 --> 00:00:37.440 npm install, then press enter. 7 00:00:37.440 --> 00:00:41.380 You can see that there's a minor update available, and that really shouldn't matter 8 00:00:41.380 --> 00:00:42.880 in our case. 9 00:00:42.880 --> 00:00:51.640 The next step is changing the credential file from .env.sample to just .env. 10 00:00:51.640 --> 00:00:57.480 Notice in the editor it's looking for our stack API key, as well as our delivery token, 11 00:00:57.480 --> 00:00:59.920 environment, and region. 12 00:00:59.920 --> 00:01:06.320 Now before, when we created our token, I showed you that you could easily copy that info. 13 00:01:06.320 --> 00:01:10.520 So let's return back to that screen to do just that. 14 00:01:10.520 --> 00:01:16.560 I'll jump back to my browser, and in Content Stack we can navigate to Settings. 15 00:01:16.560 --> 00:01:23.280 From there we can choose Tokens, then select our restaurant menu token, and if you scroll 16 00:01:23.280 --> 00:01:30.720 down you can click the Copy to Clipboard button to copy your stack API key. 17 00:01:30.720 --> 00:01:39.200 Then move back to VS Code and paste that value where it currently reads your stack API key. 18 00:01:39.200 --> 00:01:44.880 Now you'll need to repeat that process for the delivery token as well, but with the magic 19 00:01:44.920 --> 00:01:49.000 of editing, mine is already updated. 20 00:01:49.000 --> 00:01:55.520 Next we need to update the name of our environment, which, if you remember, we called Development. 21 00:01:55.520 --> 00:01:57.320 So I'll type that in. 22 00:01:57.320 --> 00:02:03.480 Finally, my region is AWS North America, so based on the comments here, I need to set 23 00:02:03.480 --> 00:02:07.900 my region to US. 24 00:02:07.900 --> 00:02:12.320 Now let's see this app render on our local host. 25 00:02:12.320 --> 00:02:17.360 To do this, I'll create a new terminal window to avoid clutter. 26 00:02:17.360 --> 00:02:24.920 I have to make sure I'm in the correct directory, so for my purposes, I need to type CD and 27 00:02:24.920 --> 00:02:30.920 then I'll reference our restaurant menu React app. 28 00:02:30.920 --> 00:02:37.320 To run this on our local server, all you have to do is type npm start. 29 00:02:38.320 --> 00:02:43.040 It might take a few seconds, but as it starts the development server, your browser will 30 00:02:43.040 --> 00:02:44.040 open. 31 00:02:44.040 --> 00:02:51.880 Here, I have to allow VS Code to open Chrome, so I'll do that, and when I do, sure enough, 32 00:02:51.880 --> 00:02:55.640 after a few seconds, the app will load. 33 00:02:55.640 --> 00:03:00.960 Now that we have it running locally, the next step is to deploy our app using Launch. ``` ```transcript [00:00] So, moving along, what we need to do now is install the dependencies for our repository. [00:08] The first thing that we need to do in the terminal is change directories to the root [00:13] of the cloned repository. [00:15] To do this, type cd restaurant-menu-react-app/. [00:24] Then we're ready to install the dependencies using the Node Package Manager, by typing [00:29] npm install, then press enter. [00:37] You can see that there's a minor update available, and that really shouldn't matter [00:41] in our case. [00:42] The next step is changing the credential file from .env.sample to just .env. [00:51] Notice in the editor it's looking for our stack API key, as well as our delivery token, [00:57] environment, and region. [00:59] Now before, when we created our token, I showed you that you could easily copy that info. [01:06] So let's return back to that screen to do just that. [01:10] I'll jump back to my browser, and in Content Stack we can navigate to Settings. [01:16] From there we can choose Tokens, then select our restaurant menu token, and if you scroll [01:23] down you can click the Copy to Clipboard button to copy your stack API key. [01:30] Then move back to VS Code and paste that value where it currently reads your stack API key. [01:39] Now you'll need to repeat that process for the delivery token as well, but with the magic [01:44] of editing, mine is already updated. [01:49] Next we need to update the name of our environment, which, if you remember, we called Development. [01:55] So I'll type that in. [01:57] Finally, my region is AWS North America, so based on the comments here, I need to set [02:03] my region to US. [02:07] Now let's see this app render on our local host. [02:12] To do this, I'll create a new terminal window to avoid clutter. [02:17] I have to make sure I'm in the correct directory, so for my purposes, I need to type CD and [02:24] then I'll reference our restaurant menu React app. [02:30] To run this on our local server, all you have to do is type npm start. [02:38] It might take a few seconds, but as it starts the development server, your browser will [02:43] open. [02:44] Here, I have to allow VS Code to open Chrome, so I'll do that, and when I do, sure enough, [02:51] after a few seconds, the app will load. [02:55] Now that we have it running locally, the next step is to deploy our app using Launch. ``` #### Key takeaways - Connect **Install Dependencies and Configure Contentstack** back to your stack configuration before moving to the next module. - Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment. - Re-read the delivery versus management boundary for anything you changed in the entry model. ## Resources & references | Page | Companion Markdown | | --- | --- | | /courses/contentstack-quick-start/about-contentstack-quick-start | /academy/md/courses/contentstack-quick-start/about-contentstack-quick-start.md | | /courses/contentstack-quick-start/create-a-new-stack-and-import-content-models | /academy/md/courses/contentstack-quick-start/create-a-new-stack-and-import-content-models.md | | /courses/contentstack-quick-start/setup-an-environment-and-a-delivery-token | /academy/md/courses/contentstack-quick-start/setup-an-environment-and-a-delivery-token.md | | /courses/contentstack-quick-start/create-entries | /academy/md/courses/contentstack-quick-start/create-entries.md | | /courses/contentstack-quick-start/fork-the-starter-app-repository | /academy/md/courses/contentstack-quick-start/fork-the-starter-app-repository.md | | /courses/contentstack-quick-start/install-dependencies-and-configure-contentstack | /academy/md/courses/contentstack-quick-start/install-dependencies-and-configure-contentstack.md | ## Supplement for indexing ### Content summary Contentstack Quick Start This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and imp… Contentstack Quick Start This is designed to get you up and running quickly. Learn the necessary steps to get an application up and running with Contentstack. In this course you'll learn how to create a new stack and import content models that were already built. Then you'll setup a new environment and the correct delivery tokens so you can access published content. When you're done with that you will create entries within the application, and then fork a GitHub repository of an existing React App. Finally, you'll see how to install require dependencies and configure Contentstack so you can ul ### Retrieval tags - cms - headless cms - contentstack - contentstack-quick-start - About - Quick - Start - Create - New - Stack - and - Import - Content - Setup ### Indexing notes Chunk at each "### Lesson NN — Title" heading; copy lesson_id and topics from the preceding HTML comment into chunk metadata for RAG filters. Course slug: contentstack-quick-start. Union of lesson topic tokens: About, Contentstack, Quick, Start, Create, New, Stack, and, Import, Content, Setup, Environment, Delivery, Token, Entries, Fork, the, Starter, App, Repository, Install, Dependencies, Configure. Do not embed or retrieve LMS-only quiz items or mastery exam answer keys from this export. ### Asset references | Label | URL | | --- | --- | | Video thumbnail: About Contentstack Quick Start | `https://cdn.jwplayer.com/v2/media/2RXwQtOJ/poster.jpg?width=720` | | Video thumbnail: Create a New Stack and Import Content Models | `https://cdn.jwplayer.com/v2/media/0ELpUwGV/poster.jpg?width=720` | | Video thumbnail: Setup an Environment and a Delivery Token | `https://cdn.jwplayer.com/v2/media/D7FcXrpe/poster.jpg?width=720` | | Video thumbnail: Create Entries | `https://cdn.jwplayer.com/v2/media/vj7ByMGy/poster.jpg?width=720` | | Video thumbnail: Fork the Starter App Repository | `https://cdn.jwplayer.com/v2/media/StuPI42J/poster.jpg?width=720` | | Video thumbnail: Install Dependencies and Configure Contentstack | `https://cdn.jwplayer.com/v2/media/8mWAHVVZ/poster.jpg?width=720` | ### External links | Label | URL | | --- | --- | | Contentstack Academy home | `https://www.contentstack.com/academy/` | | Training instance setup | `https://www.contentstack.com/academy/training-instance` | | Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` | | Contentstack documentation | `https://www.contentstack.com/docs/` | | Contentstack Account | `https://www.contentstack.com/login` | | Node.js version 18 or later | `https://nodejs.org/en/download/` | | Git | `https://github.com/git-guides/install-git` | | Github account | `https://github.com/` | | VS code | `https://code.visualstudio.com/` | | GitHub Repository | `https://github.com/contentstack/contentstack-getting-started-react-app` |