# Launch Foundations ### About this export | Field | Value | | --- | --- | | **content_type** | course | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/launch-foundations | | **language** | en | | **product_area** | launch | | **learning_path** | standalone | | **course_id** | launch-foundations | | **slug** | launch-foundations | | **version** | 2026-03-01 | | **last_updated** | 2026-05-04 | | **status** | published | | **keywords** | ["launch","hosting"] | | **summary_one_line** | Contentstack Launch (https://www.contentstack.com/docs/developers/launch/about-launch/) is a frontend hosting and deployment platform for websites built on the Contentstack CMS. This comprehensive course provides a step-… | | **total_duration_minutes** | 106 | | **lessons_count** | 15 | | **video_lessons_count** | 0 | | **text_lessons_count** | 15 | | **linked_learning_path** | standalone | | **linked_assessment_ref** | LMS_UNCONFIGURED_COURSE_ASSESSMENT | | **markdown_file_url** | /academy/md/courses/launch-foundations.md | | **generated_at** | 2026-05-04T05:36:52.979Z | | **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 | 1h 46m | | Released (if known) | 2026-03-01 | | Product area | launch | ### Description [Contentstack Launch](https://www.contentstack.com/docs/developers/launch/about-launch/) is a frontend hosting and deployment platform for websites built on the Contentstack CMS. This comprehensive course provides a step-by-step guide to mastering Contentstack Launch and utilizing its capabilities to streamline content management, deployment, and distribution processes. The course begins with an introduction to Contentstack Launch, exploring its key features and benefits. You will quickly get started by learning how to integrate Contentstack Launch with popular frameworks such as Gatsby and Next.js, enabling you to leverage their strengths in conjunction with Contentstack's powerful CMS capabilities. Through hands-on exercises and practical examples, you will discover how to create projects using either GitHub or file uploads, providing you with flexibility and ease of use in managing your content. The course covers various aspects of deployments, including managing environments, environment variables, and custom domains, ensuring smooth and efficient deployment processes. You will dive deep into the functionality of deploy hooks and explore how they can be utilized to automate specific actions during the deployment process. Additionally, you will learn how to harness the power of cloud functions to extend the capabilities of Contentstack Launch, allowing you to implement custom logic and execute complex tasks. The course includes comprehensive how-to guides that cover a range of topics, from adding API endpoints to a website in Contentstack Launch to deploying Gatsby and Next.js sites. You will also gain insights into deploying projects from a monorepo, disabling automatic redeployment, and hosting static sites. Furthermore, you will learn how to integrate Contentstack Launch with your CMS workflow, enabling automatic redeployment whenever new content is published, ensuring that your digital content is always up to date. Finally, the course delves into setting up production and non-production environments, providing you with the knowledge to optimize your deployment strategies for different scenarios. You will also explore how to auto-populate environment variables from a linked stack, simplifying the configuration process and enhancing your development workflow. By the end of this course, you will have a comprehensive understanding of Contentstack Launch and be equipped with the skills necessary to effectively deploy and deliver digital content across multiple platforms and channels, ensuring a seamless experience for your users. ### Overview Upon completion of this course, participants will: 1. Gain a solid understanding of Contentstack Launch and its features, including its role in simplifying the deployment and delivery of digital content across multiple platforms and channels. 2. Acquire the knowledge and skills to integrate Contentstack Launch with popular frameworks like Gatsby and Next.js, enabling them to leverage the strengths of these frameworks in conjunction with Contentstack's powerful CMS capabilities. 3. Learn how to create projects using GitHub or file uploads, providing flexibility and ease of use in managing and organizing content within Contentstack Launch. 4. Develop proficiency in deploying digital content using Contentstack Launch, including managing environments, environment variables, and custom domains to ensure smooth and efficient deployment processes. 5. Understand the concept and implementation of deploy hooks, and learn how to automate specific actions during the deployment process to streamline workflows and enhance efficiency. 6. Explore the capabilities of cloud functions and learn how to utilize them to extend the functionality of Contentstack Launch, allowing for custom logic implementation and execution of complex tasks. 7. Master various how-to guides, including adding API endpoints to a website, deploying Gatsby and Next.js sites, deploying projects from a monorepo, disabling automatic redeployment, hosting static sites, and auto-populating environment variables from a linked stack. 8. Learn how to integrate Contentstack Launch with a CMS workflow to automate redeployment whenever new content is published, ensuring that digital content remains up to date and readily available. 9. Acquire the skills to set up production and non-production environments, optimizing deployment strategies for different scenarios and ensuring smooth transitions between environments. 10. Enhance their development workflow by learning how to streamline the configuration process through auto-populating environment variables from a linked stack, saving time and effort in setting up new projects. By achieving these objectives, participants will be equipped with the knowledge and skills necessary to effectively utilize Contentstack Launch for deploying and delivering digital content, enabling them to streamline content management processes and provide a seamless experience for users across various platforms and channels. ### 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 launch; hosting ## Course structure ```text launch-foundations/ ├── 01-what-is-contentstack-launch · text · 1 min ├── 02-setting-up-launch-with-gatsby · text · 1 min ├── 03-setting-up-launch-with-nextjs · text · 1 min ├── 04-setting-up-launch-using-file-upload · text · 1 min ├── 05-deleting-a-launch-project · text · 1 min ├── 06-launch-deployments · text · 1 min ├── 07-launch-environments · text · 1 min ├── 08-setting-up-production-and-non-production-environements · text · 1 min ├── 09-environment-variables · text · 1 min ├── 10-setting-up-custom-domains · text · 1 min ├── 11-using-deploy-hooks · text · 1 min ├── 12-setting-up-cloud-functions · text · 1 min ├── 13-password-protecting-an-environment · text · 1 min ├── 14-using-launch-with-cli · text · 1 min ├── 15-additional-resources · text · 1 min ``` ## Lessons ### Lesson 01 — What is Contentstack Launch? #### Lesson text All headless web projects require hosting. Launch is a framework-agnostic hosting solution that is part of the Contentstack platform. It is a great solution for lightning-fast web experiences and is pre-integrated into Contentstack's CMS. * Launch is a platform that hosts and deploys websites developed using the Contentstack CMS. By creating a project in Launch and connecting it to your GitHub repository, you can simplify your web development workflow. Launch efficiently selects the code from your repository and promptly deploys your website, resulting in no downtime. * To enhance your projects' functionality and facilitate testing and debugging, Launch enables you to incorporate custom domains, serverless functions, and environment variables. * Moreover, Launch seamlessly integrates with Automation Hub, offering triggers and actions for various Launch operations. Additionally, Launch provides deploy hooks functionality, enabling you to initiate rebuilds by accessing a specific URL. **Note:** To create and launch a project in Contentstack, please ensure that you have the necessary permissions within the Contentstack organization. Specifically, you must be assigned either the "**Admin**" or "**Owner**" role in the organization. Launch can be found in the leftmost navigation at the organizational level in Contentstack. ![LaunchFoundations\_L1\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6f6d36e1296b3966/67dd8825efd8a9b4474c01b7/LaunchFoundations_L1_img-1.png) #### Key takeaways - Connect **What is Contentstack Launch?** 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 — Setting up Launch with Gatsby #### Lesson text [Gatsby](https://www.gatsbyjs.com/) is an open-source React-based framework that provides a hybrid static/server-side rendered model. Using Gatsby data fetching, you can render your content differently based on your application's use case and build APIs using Gatsby Functions. Launch supports the following features of Gatsby out of the box: * [Gatsby Functions](https://www.gatsbyjs.com/docs/reference/functions/getting-started/) * [DSG](https://www.gatsbyjs.com/docs/how-to/rendering-options/using-deferred-static-generation/) * [SSR](https://www.gatsbyjs.com/docs/reference/rendering-options/server-side-rendering/) The fastest way to get started with Launch is to clone and deploy a [sample Gatsby Starter project](https://github.com/dhruvparekh12/gatsby-starter-default/tree/master). Launch allows you to create a project by importing the website code from GitHub. **Prerequisites** 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization **(Note:** Only the Organization **Admin/Owner** has permissions to create Launch projects**)** 3. [GitHub account](https://github.com/login) Steps for Execution Follow the steps given below to deploy your first Launch project using GitHub: 1. Log into Contentstack and click the Launch icon from the left navigation panel, as shown below: ![LaunchFoundations\_L1\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc9bab43217231a30/67dd88725e486d166271b635/LaunchFoundations_L1_img-2.png) 2. Click the **\+ New Project** button: ![LaunchFoundations\_L2\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3a3a07a01cf107ec/67dd88ba4a89c31645a303d8/LaunchFoundations_L2_img-2.png) 3. In the **Create** **New Project** modal, click **Import from a Git Repository. (**Note: You can also choose to [upload a .zip file to create your project](https://www.contentstack.com/docs/developers/launch/import-project-using-file-upload/).) ![LaunchFoundations\_L2\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt23c2d6f0918ed6da/67dd88dac5b83e670d924c6a/LaunchFoundations_L2_img-3.png) 4. Click **GitHub:** ![LaunchFoundations\_L2\_img-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt26218f06c615abf2/67dd8908037e2b848b22dae8/LaunchFoundations_L2_img-4.png)This will open a modal window to authenticate with your GitHub account. 5. Enter your credentials and log in: ![LaunchFoundations\_L2\_img-5.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3a14a65a6a3491f1/67dd89233a0f3829f300ebbe/LaunchFoundations_L2_img-5.png) 6. In the Repository Access section, select **All repositories.** **Note**: If you want to choose specific repositories, pick the **Only select repositories** option and choose the required repository. ![LaunchFoundations\_L2\_img-6.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5bd8c477d94338e4/67dd893917f7b453b60d022f/LaunchFoundations_L2_img-6.png) 7. Click the **Save** button Note: If you are accessing GitHub through Contentstack for the first time, you must authorize Contentstack by clicking the “Install & Authorize” button after selecting All repositories. ![LaunchFoundations\_L2\_img-7.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt133667c9397e0d2f/67dd89519867252081888aca/LaunchFoundations_L2_img-7.png) Once you’ve connected your GitHub account, you’ll be redirected back to Launch. 8. In the **Create New Project** modal, add the following details: **Repository** (Mandatory): Select your Git repository. **Git Branch** (Mandatory): By default, master or main is selected as the branch. You can choose another branch from the dropdown. **Project Name** (Mandatory): This is auto-populated when you select the repository, but you can edit it as needed. **Environment Name** (Mandatory): The environment name is automatically populated as Default, but can be changed. Note that this is specific to Launch and not directly related to any environments in your stack. **Build and Output Settings** (Mandatory): The fields in this section get auto-populated based on the detected framework. (If no framework is detected, you can specify your own Build Command and Output Directory.) **Environment Variables** (Optional): Enter the key and value of one or more environment variables. You can also use the “Connect and Import Variables” option to automatically import API-related variables from a specific stack and delivery token. ![LaunchFoundations\_L2\_img-8.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc4746974629efa5c/67dd896ec5de53239dd2e30d/LaunchFoundations_L2_img-8.png) Note: Click Back to revert the changes and re-enter details. 9. Once ready, click Deploy to save and deploy the project. You’ll see the project’s status update in real time, from Queued to Deploying to Deployed. Note: depending on the size and complexity of your specific application, it may take several minutes to build and deploy your site. ![10ac4ee7-1e0c-44eb-9079-8a0c056c3ebd-Screenshot\_from\_2023-07-19\_14-57-49.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e674db55b69c92a/66549a48e4a7328428975b16/10ac4ee7-1e0c-44eb-9079-8a0c056c3ebd-Screenshot_from_2023-07-19_14-57-49.png) Upon successful deployment, you will see the following screen: ![LaunchFoundations\_L2\_img-9.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteda28b9e44b71cd1/67dd8997c566ee6bcc5e0146/LaunchFoundations_L2_img-9.png) You can preview the deployed website by copying the URL from the URL section under Deployment Information and opening it in a browser. If you want to deploy the changes from any other commits, you can click the **Redeploy** button and choose the required commit. ![e9376604-2070-4f18-bccf-f8624ff983d3-Screenshot\_from\_2023-07-24\_18-53-49.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt42980eef00145455/66549ad46933452d03c23448/e9376604-2070-4f18-bccf-f8624ff983d3-Screenshot_from_2023-07-24_18-53-49.png) Note: The log details of the current deployment can be found under the Logs section. #### Key takeaways - Connect **Setting up Launch with Gatsby** 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 — Setting up Launch with NextJS #### Lesson text [Next JS](https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs) is an open-source React-based framework that provides a hybrid static/server-side rendered model. Using Next JS data fetching, you can render your content differently based on your application's use case and build APIs using API Routes. Launch supports the following features of Next JS out of the box: * [API Routes](https://nextjs.org/docs/api-routes/introduction) * [SSR (Server Side Rendering)](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) * [ISR (Incremental Static Regeneration)](https://nextjs.org/docs/basic-features/data-fetching/incremental-static-regeneration) The fastest way to get started with Launch is to clone and deploy a [sample Contentstack NextJS Starter project](https://github.com/contentstack/contentstack-nextjs-starter-app/archive/refs/heads/master.zip). Launch allows you to create a project by importing the website code from GitHub. **Prerequisites** 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization **(Note:** Only the Organization **Admin/Owner** has permissions to create Launch projects**)** 3. [GitHub account](https://github.com/login) Steps for Execution Follow the steps given below to deploy your first Launch project using GitHub: 1. Log into Contentstack and click the Launch icon from the left navigation panel, as shown below: ![LaunchFoundations\_L3\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb7c5f1537b7dedfd/67dd8a5ac566ee66e85e0159/LaunchFoundations_L3_img-1.png) 2. Click the **\+ New Project** button: ![LaunchFoundations\_L3\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4a9d737d68f4d30d/67dd8a76a7145838ceb9b69a/LaunchFoundations_L3_img-2.png) 3. In the **Create** **New Project** modal, click **Import from a Git Repository. (**Note: You can also choose to [upload a .zip file to create your project](https://www.contentstack.com/docs/developers/launch/import-project-using-file-upload/).) ![LaunchFoundations\_L3\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf2e3fb5000f3c9fd/67dd8a90314d67fc181b70a4/LaunchFoundations_L3_img-3.png) 4. Click **GitHub:** ![LaunchFoundations\_L3\_img-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteb40b36ec25d1a8b/67dd8aa9dd73e3e0d8bf3565/LaunchFoundations_L3_img-4.png) This will open a modal window to authenticate with your GitHub account. 5. Enter your credentials and log in: ![LaunchFoundations\_L3\_img-5.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt339534025a5fcadd/67dd8ac1632b93658bd4a2ff/LaunchFoundations_L3_img-5.png) 6. In the Repository Access section, select **All repositories.** **Note**: If you want to choose specific repositories, pick the **Only select repositories** option and choose the required repository. ![LaunchFoundations\_L3\_img-6.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1a4495329cd760ea/67dd8ad76f685886effda919/LaunchFoundations_L3_img-6.png) 7. Click the **Save** button Note: If you are accessing GitHub through Contentstack for the first time, you must authorize Contentstack by clicking the “Install & Authorize” button after selecting All repositories. ![LaunchFoundations\_L3\_img-7.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt397bd7bf8f16cab2/67dd8aed037e2b157322db0e/LaunchFoundations_L3_img-7.png) Once you’ve connected your GitHub account, you’ll be redirected back to Launch. 8. In the Create New Project modal, add the following details. 1. **Repository** (Mandatory): Select your Git repository. 2. **Git Branch** (Mandatory): By default, master or main is selected as the branch. You can choose another branch from the dropdown. 3. **Project Name** (Mandatory): This is auto-populated when you select the repository, but you can edit it as needed. 4. **Environment Name** (Mandatory): The environment name is automatically populated as Default, but can be changed. Note that this is specific to Launch and not directly related to any environments in your stack. 5. **Build and Output Settings** (Mandatory): The fields in this section get auto-populated based on the detected framework. (If no framework is detected, you can specify your own Build Command and Output Directory.) 6. **Environment Variables** (Optional): Enter the key and value of one or more environment variables. You can also use the “Connect and Import Variables” option to automatically import API-related variables from a specific stack and delivery token. ![LaunchFoundations\_L3\_img-8.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt728a7cd2fe072875/67dd8b34460eb4da859478e4/LaunchFoundations_L3_img-8.png) ![LaunchFoundations\_L3\_img-9.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83401745119aa83b/67dd8b3edb243f26ff12c40d/LaunchFoundations_L3_img-9.png) Note: Click Back to revert the changes and re-enter details. 9. Once ready, click Deploy to save and deploy the project. You’ll see the project’s status update in real time, from Queued to Deploying to Deployed. Note: depending on the size and complexity of your specific application, it may take several minutes to build and deploy your site. ![LaunchFoundations\_L3\_img-10.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2506a961db71c9fc/67dd8b57c5b83e39fd924c90/LaunchFoundations_L3_img-10.png)Upon successful deployment, you will see the following screen: ![LaunchFoundations\_L3\_img-11.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9def3772d270845e/67dd8b70f7eccc434690d97f/LaunchFoundations_L3_img-11.png) You can preview the deployed website by copying the URL from the URL section under Deployment Information and opening it in a browser. If you want to deploy the changes from any other commits, you can click the **Redeploy** button and choose the required commit. ![LaunchFoundations\_L3\_img-12.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta4102e28952c61f1/67dd8b8e443bd63c57f1cc07/LaunchFoundations_L3_img-12.png) Note: The log details of the current deployment can be found under the Logs section. ![LaunchFoundations\_L3\_img-13.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b7272e3d6c6ac01/67dd8bb2339f298ac48b61c5/LaunchFoundations_L3_img-13.png) #### Key takeaways - Connect **Setting up Launch with NextJS** 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 — Setting up Launch Using File Upload #### Lesson text # **Create a Project using File Upload** Launch allows you to create a project by directly uploading a project folder or a .zip file. This document guides you through the process of creating a project in Launch by uploading a project zip file. The zip file can be a build zip or a source code zip. **Prerequisites** 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization **(Note:** Only the Organization **Admin/Owner** has permissions to create Launch projects in a stack**)** Steps for Execution Follow the steps given below to deploy your first Launch project using GitHub: 1. Log into Contentstack and click the Launch icon from the left navigation panel, as shown below: ![LaunchFoundations\_L4\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4d685a896d707624/67dd8c48a6d88e336e0535d2/LaunchFoundations_L4_img-1.png) 2. Click the **\+ New Project** button. ![LaunchFoundations\_L4\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2fff3be78ee68865/67dd8c69037e2b956022db3b/LaunchFoundations_L4_img-2.png) 3\. From the Create New Project modal, click **Upload a file**. ![LaunchFoundations\_L4\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt066c1f4fb104a35d/67dd8c82443bd62674f1cc2a/LaunchFoundations_L4_img-3.png) You can either drag and drop a .zip file or click the **browse to upload** link to upload a .zip file. ![LaunchFoundations\_L4\_img-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0dc38dda8030912d/67dd8c97a6d88e5a520535df/LaunchFoundations_L4_img-4.png) Click Next to proceed with the deployment steps. **Note**: You can re-upload a .zip file after uploading one. \- You can also Cancel an ongoing file upload and re-upload a new file. ![LaunchFoundations\_L4\_img-5.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb1b6f610e02837a7/67dd8cae314d674a8e1b70c3/LaunchFoundations_L4_img-5.png) 4\. In the **Deploy step** add the following details: * * **Project Name (Mandatory):** The project name is auto-populated with the name of the uploaded file. You can enter a new project name up to 200 characters. * **Environment Name (Mandatory):** The environment name is automatically populated as Default, but can be changed. Note that this is specific to Launch and not directly related to any environments in your stack. * **Build and Output Settings (Mandatory):** The fields in this section are automatically populated based on the frontend framework detected in your repository. * **Framework Preset:** This is set based on the framework detected. You can change this to a different preset value or select “Other” if your framework isn’t in the list. * **Build Command (Mandatory):** The command used to build the project. * **Output Directory (Mandatory):** The directory path where the project’s build output files get stored. * **Environment Variables (Optional):** * Enter the key and value of your environment variables in the Key Value Edit section. * You can also add the key-value pairs in bulk in the Bulk Edit section. * Use the “Connect and Import Variables” option to automatically import important variables (such as API key and delivery token) from a stack. * Click the + Add Environment Variable button to add more environment variables.  5\. Once all the fields are filled with appropriate values, **click the Deploy button**.  You have successfully deployed a project! The project card will be displayed on the Projects screen: ![LaunchFoundations\_L4\_img-6.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1d38b147ef53ee04/67dd8ce145b229c0db9117e9/LaunchFoundations_L4_img-6.png) #### Key takeaways - Connect **Setting up Launch Using File Upload** 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 — Deleting a Launch Project #### Lesson text Steps 1. Click the Settings icon in the left navigation menu. ![LaunchFoundations\_L5\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt28febba44d67aa3b/67dd8d3ba714586cc0b9b6ba/LaunchFoundations_L5_img-1.png) 2\. In the General section, click the Delete button under Advanced. ![LaunchFoundations\_L5\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta6426f8bbc143ee3/67dd8d50c9b8d4bdc9d142e5/LaunchFoundations_L5_img-2.png) 3\. In the modal that appears, enter DELETE and then click the Yes, Delete button. This deletes your project successfully. ![LaunchFoundations\_L5\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5a0ea31016d9d1d2/67dd8d70b1a1f321e23ef972/LaunchFoundations_L5_img-3.png) #### Key takeaways - Connect **Deleting a Launch Project** 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 — Launch Deployments #### Lesson text ## **Deployments** During the deployment phase, your project is built and, if successful, made available through a unique URL. A deployment is an environment in action. There can be multiple deployments in a single environment, out of which the active deployment uses the latest environment configuration to build the website. This module provides comprehensive information on your Deployments screen, including: **\- Deployment details** **\- Deployment statuses** **\- Logs** Let's explore the module to access these features and gain insights into your deployments. When you import a project from a Git repository, your Deployment Information panel will look like this: ![LaunchFoundations\_L6\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt177b60211c208321/67dd8db02d0b9822d3fd0767/LaunchFoundations_L6_img-1.png) When you import a project by uploading a .zip file, your Deployment Information panel will look like this: ![LaunchFoundations\_L6\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbd9d75bdcbcfd5c5/67dd8dd437e25a43121e4737/LaunchFoundations_L6_img-2.png) **Deployment Information** In the Deployment Information section, you can access essential details regarding your project's deployment. If you created your project using a Git repository, this panel provides the following information: * **URL**: Once your project is successfully built, you can access it through this public URL. * **Branch**: Indicates the specific branch and commit of the Git repository used to create the environment. * **Git Repository**: Displays the Git repository that was utilized to create your project. * **Created**: Shows the timestamp when the deployment was initiated. * **Redeploy button**: By clicking this button, you can trigger a rebuild of the project. Upon a successful rebuild, the updated version will be accessible via the deployment URL. ![LaunchFoundations\_L6\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfafe167ee4993241/67dd8dee443bd6ca61f1cc3c/LaunchFoundations_L6_img-3.png) If you created your project by uploading a file, the Deployment Information panel provides the following details about your deployment: * **URL**: Once the project has been successfully built, you can access it through this public URL. * **Created**: Indicates the timestamp when the project build was successful. * **Redeploy button**: Clicking this button triggers a rebuild of the project. Upon a successful rebuild, the updated build becomes available at the deployment URL. * **Download Code button:** This feature allows you to download the code used for creating your project in a .zip file format. Please note that the Download Code button is visible only when the deployment status is Active, Deployed, or Error. ![LaunchFoundations\_L6\_img-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8ebea1e3b82adac4/67dd8e05339f299b4f8b61f4/LaunchFoundations_L6_img-4.png) On successful deployment, Launch also generates a preview image of your site that can be viewed on the deployment information panel ![LaunchFoundations\_L6\_img-5.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt20cc76c819867425/67dd8e29314d67ea021b70de/LaunchFoundations_L6_img-5.png) **Deployment Statuses** The different project deployment statuses used in Launch are: Code Status What it means? ![LaunchFoundations\_L6\_icon-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf00a01fd82ce83d3/67dd9074632b933faad4a366/LaunchFoundations_L6_icon-1.png) Live Deployment is successful and is currently active. ![LaunchFoundations\_L6\_icon-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8d04d5b038f8dba1/67dd904fc5b83e8a7f924ce4/LaunchFoundations_L6_icon-2.png) Deployed Previous deployment which was successful. ![LaunchFoundations\_L6\_icon-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteafa5f5838af6107/67dd902edb243f2f5a12c470/LaunchFoundations_L6_icon-3.png) Failed Deployment is unsuccessful. ![LaunchFoundations\_L6\_icon-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4ec4971be3647c04/67dd9008c5b83ec83b924cdc/LaunchFoundations_L6_icon-4.png) Deploying Deployment is in progress. ![LaunchFoundations\_L6\_icon-5.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1386b3930df17024/67dd8fca37e25ac4f61e4771/LaunchFoundations_L6_icon-5.png) Canceled Deployment is canceled due to deployment build hours limits. ![LaunchFoundations\_L6\_icon-6.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1c88a99896860180/67dd8faef7eccc502090d9d6/LaunchFoundations_L6_icon-6.png) Queued Deployment is queued due to an ongoing deployment in the environment, waiting for it to finish. ![LaunchFoundations\_L6\_icon-7.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt02a98307fc621b46/67dd8f7a1bae685ef84c7727/LaunchFoundations_L6_icon-7.png) Skipped Already queued deployment is skipped to queue a new deployment. ## Redeploys You have the flexibility to redeploy your site multiple times, generating new deployments. There are several methods to initiate a redeployment: 1. **Automatic Redeployment:**    - If auto-deploy is enabled for your environment, you can trigger a redeployment by pushing a commit to the corresponding Git branch. 2. **Deploy Hook:**    - You can initiate a redeployment by calling a deploy hook generated for the environment. This method provides a way to programmatically trigger the redeployment process. 3. **Redeploy Button:**    - On the deployment information page, you can simply click the "Redeploy" button to start a redeployment manually. **If you choose to redeploy from the deployment details page or utilize a deploy hook, you have the option to specify a commitId, which allows you to redeploy using a specific commit. This provides finer control over the redeployment process.** ![LaunchFoundations\_L6\_img-6.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt463953e4c9cc10cb/67dd8e47443bd62a6af1cc41/LaunchFoundations_L6_img-6.png) **When you import a project by uploading a file**, redeploying without a commitId is possible. In this scenario, when you click the "Redeploy" button, you will be presented with the following options to initiate the redeployment: **1\. Redeploy with Previously Uploaded File:**    - This option allows you to redeploy using the file that was previously uploaded during the project import. You can choose this option if you want to redeploy using the same file without any modifications. **2\. Redeploy by Uploading a New File:**    - Alternatively, you can select this option if you wish to redeploy by uploading a new file. This option enables you to replace the existing file with a new version for the redeployment. It's important to note that if you imported the project by uploading a file, you do not need to provide a commitId for the redeployment process. ![LaunchFoundations\_L6\_img-7.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt014cd96394baf2f7/67dd8e5d782bfbc82b6f5740/LaunchFoundations_L6_img-7.png) **Note**: You cannot redeploy a site while a deployment is in progress. ## **Deployment Queuing Mechanism for an Environment** In Launch, you can redeploy your project multiple times. But when multiple subsequent deployments are triggered for a given environment, all intermediate deployments will be skipped and only the latest deployment will take effect. ## **Deployment Logs** You can find deployment logs in the Logs below Deployment Information. You can monitor the logs to get the details of the following deployment stages: * Installing the dependencies * Build creation * Cloud Functions * Success/failure of the deployment You can also copy the log details by clicking the copy icon in the top-right corner of **Logs**. ![LaunchFoundations\_L6\_img-8.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt93cecb722f01d56b/67dd8e725e486d247871b711/LaunchFoundations_L6_img-8.png) # Disable Automatic Redeployment All environments in Launch are configured for automatic redeployment by default. Launch allows you to prevent automatic deployments of any new commits made to the Git repository based projects. Follow the steps to disable the Auto-Deploy feature to prevent automatic redeployment. ![Launch-DisableAutoRedeploy-Configure.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt7b367b8929f55fce/643662d62673c111da708c64/Launch-DisableAutoRedeploy-Configure.png) Alternatively, in the Environments screen, hover over the **environment** where your project is created and then click the **Environment Settings** icon to go to Environment Settings. 1. Click the project card to open your project from the Launch landing page. 2. In the Environments screen, click the **environment** where you created the project. 3. Click the **ellipses** next to Default and then click **Configure**. 4. In the Environments section under Settings, click **Deployments**. ![LaunchFoundations\_L6\_img-9.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5310398a6a3c1ac1/67dd8eaf632b93c31ad4a348/LaunchFoundations_L6_img-9.png) 5. Click the **Auto Deploy** toggle button to disable it, and then click the **Save** button. ![LaunchFoundations\_L6\_img-10.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt55f28cd36d92b5c7/67dd8ecbdb243feb7312c452/LaunchFoundations_L6_img-10.png) You have successfully disabled the automatic redeployment of your project. #### Key takeaways - Connect **Launch Deployments** 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 07 — Launch Environments #### Lesson text ## Launch Environments Environments allow you to deploy and host different versions of your project independently. Launch allows you to set up multiple environments for a project, which you can configure to match your development style. Each environment is deployed and hosted on a unique URL. Auto-deploy is enabled by default for every environment. A default environment is created with every project import. You can configure the environment as per your needs for further usage. This document guides you through the process of creating, configuring, and deleting an environment in Launch. ## Prerequisites 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization ## Create an Environment 1. Click the project card to open your project from the Launch landing page.  ![Launch\_-\_Projects.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4a98e187b26f92e0/643e30f71a1ec621c9be6010/Launch_-_Projects.png)  2. In the Environments screen, click the **\+ New Environment** button to add a new environment.  ![Launch-Env\_Screen-New\_Env.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltffe2f7d8df3b3ac2/643fc3adab59a227af420039/Launch-Env_Screen-New_Env.png)  3. In the **Create New Environment** modal, fill in the following: 1. If you choose GitHub to deploy your project, follow the steps below: 1. Enter an environment name. 2. Select a branch from the **Git Branch** dropdown. 3. The fields in the Build and Output Settings section get auto-populated based on the detected framework. You can always change the Framework Preset and the build and output commands as per your requirement.![Launch-Create-Env-Git-BuildandOutput.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt59fada371ac34bcb/643fc3adb1f4db27b0204145/Launch-Create-Env-Git-BuildandOutput.png) 4. In the Environment Variables field, perform the following: * If you want to [auto-populate environment variables from a linked stack](https://www.contentstack.com/docs/developers/launch/auto-populate-environment-variables-from-a-linked-stack/), select a stack and click the **Import Variables** button. * Click the **\+ Add Environment Variable** button to manually add environment variable(s).  ![Launch-Create-Env-Env-Variables.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt523fe31b486c6442/643fc3addfdb9232fd8bb0cd/Launch-Create-Env-Env-Variables.png)  5. Click the **Create** button. You have successfully created an environment. 2. If you choose to upload a file to deploy your project, follow the steps below: 1. Enter an environment name. 2. The Upload a file field allows you to browse and upload a new file. Click **browse to upload** to upload a project file. You can also re-upload a different file after uploading a file.  ![Launch-Create-Env-File-UploadFile.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt8e5e9a3bc26db3aa/643fc3ad3e745b11edf82044/Launch-Create-Env-File-UploadFile.png)  3. The fields in the Build and Output Settings section get auto-populated based on the detected framework in the uploaded file. You can always change the Framework Preset and the build and output commands as per your requirement.  ![Launch-Create-Env-File-BuildandOutput.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltf82bbcb2d2c6e665/643fc3ad9074ca2928c7a12b/Launch-Create-Env-File-BuildandOutput.png)  4. In the Environment Variables field, perform the following: * If you want to [auto-populate environment variables from a linked stack](https://www.contentstack.com/docs/developers/launch/auto-populate-environment-variables-from-a-linked-stack/), select a stack and click the **Import Variables** button. * Click the **\+ Add Environment Variable** button to manually add environment variable(s).  ![Launch-Create-Env-Env-Variables.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt523fe31b486c6442/643fc3addfdb9232fd8bb0cd/Launch-Create-Env-Env-Variables.png)  6. Click the **Create** button. You have successfully created an environment. **Note**: When you import a project by uploading a file, the icon for Branch specification is not displayed in the Environments section. ## Configure an environment You can change the environment name and branch from **Settings**. **Note**: When you import a project by uploading a file, the Git Branch section in the General settings is not available. You can configure environments to use deploy hooks, custom domains, and environment variables. You can control the deployment behavior by toggling auto-deployments. 1. In the Environments screen, hover over the **environment** where your project is created and then click the **Environment Settings** icon to go to Environment Settings.  ![Launch-Env\_Settings.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4411ebf033dcd7c5/643e9879e8b191595dde432a/Launch-Env_Settings.png)  2. Edit the environment name and branch. ![Launch\_Environments\_Name\_Branch.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb44324eff9ad0522/64a65dafb62fa4579aab8548/Launch_Environments_Name_Branch.png) 3. Click the **Save** button. **Note**: The auto-deployment feature is unavailable when you import a project by uploading a file. ## Delete an environment Launch allows you to delete an environment that you no longer require. Follow the steps below to delete an environment: 1. In the Environments screen, hover over the **environment** you want to delete and click the **Delete Environment** button. ![Launch\_Environments\_DeletePart2SS1.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt12bd365863f4029a/64a65daf7b26df745ce167c6/Launch_Environments_DeletePart2SS1.png) 2. Enter DELETE and then click the **Yes, Delete** button. Alternatively, you can follow the steps below to delete an environment: A modal is displayed asking for confirmation to delete the environment. **Note**: On deleting an environment, its corresponding deployments also get deleted. 1. In the Environments screen, hover over the **environment** you want to delete and click the **Environment Settings** icon to go to Environment Settings. ![Launch\_Environments\_Settings.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt07afb18cce01cfff/64a65daf05df43c8a75ae6f3/Launch_Environments_Settings.png) 2. Under Advanced in the Environments section, click the **Delete Environment** button. You will see a warning message displayed above the button. 3. Enter DELETE and then click the **Yes, Delete** button. #### Key takeaways - Connect **Launch Environments** 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 08 — Setting up Production and Non-Production Environments #### Lesson text ## Setup Production and Non-Production Environment When apps are being developed and released, software developers use environments to create stages. As per industry standards for environments most of the processes begin with development and end with production. Launch allows you to create such environments. ## Prerequisites 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization ## Create a Production Environment Follow the steps to convert the Default environment of a project to production environment. 1. From the Launch landing page, open the project for which you want to change the Default environment to production environment. ![Launch\_-\_Projects.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4a98e187b26f92e0/643e30f71a1ec621c9be6010/Launch_-_Projects.png) 2. In the Environments screen, click the **Default** environment. 3. Click the **ellipses** next to Default and then click **Configure**. ![Launch-Prod-NonProd-Ellipses.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltae6f59972f5fb194/6436630eb2ef0d11ecea0238/Launch-Prod-NonProd-Ellipses.png) **Note**: You can also create a new environment for production by following the steps in the Create an Environment section in [this](https://www.contentstack.com/docs/developers/launch/environments) guide. Then, proceed with the following steps to configure the environment to set it up as a production environment. 4. In Environments under Settings, click **General** and enter _Production_ as the Environment Name. ![Launch\_Prod\_Non-Prod\_Env.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt2e09a601ddeb9295/64a662f08f332a4b6454449c/Launch_Prod_Non-Prod_Env.png) 5. Click the **Save** button. 6. Next, click **Deployments**. ![Launch\_Prod\_Non-Prod\_Env\_Toggle.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb2475c7ec17875a2/64a662f18f332a733a5444a0/Launch_Prod_Non-Prod_Env_Toggle.png) 7. Click the **Auto Deploy** toggle to disable it, and then click the **Save** button. **Note**: For Git repository based projects, you can prevent the ‘Production’ environment from automatically deploying any new commits that you push. 8. You can add a custom domain for your projects. Click **Domains** and click the **\+ New Custom Domain** button, to [add a custom domain](https://www.contentstack.com/docs/developers/launch/custom-domain). ![Launch\_Prod\_Non-Prod\_Domain.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blta77205f1a562324c/64a662f01f8d5a64105871e3/Launch_Prod_Non-Prod_Domain.png) ![Launch\_Prod\_Non-Prod\_DomainModal.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte676cc752a13de64/64a662f14d81434bd88fef0b/Launch_Prod_Non-Prod_DomainModal.png) 9. Click the **Environments** icon in the left panel and then click the production environment you created to view the Deployments page. ![Launch-Prod-NonProd-Deployments.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltcfd5b01a5a25bf48/6436630ecbf631109cafae8d/Launch-Prod-NonProd-Deployments.png) 11. You have successfully set up a production environment for your projects. ## Create a Non-Production Environment Follow the steps to create a non-production environment. 1. Follow the steps provided in the Create an Environment section in [this](https://www.contentstack.com/docs/developers/launch/environments) guide. **Note**: Make sure to add the Environment Name as per the non-production environment you want to create. For example, if you want to create a development environment, add the Environment Name as _Development_. 2. Next, in Environments under Settings, click **Deployments**. 3. Click the **Auto Deploy** toggle to enable it, and then click the **Save** button. ![Launch\_Prod\_Non-Prod\_Env\_NonProdToggle.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt2ed933d4e776b114/64a662f14eb51c3c1035d981/Launch_Prod_Non-Prod_Env_NonProdToggle.png) **Note**: Skip this step if the Auto Deploy toggle is already enabled. You have successfully set up a non-production environment for your projects. #### Key takeaways - Connect **Setting up Production and Non-Production Environments** 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 09 — Environment Variables #### Lesson text ## Environment Variables Environment Variables are key-value pairs configured outside your source code so that each value can change depending on the [Environment](https://www.contentstack.com/docs/developers/launch/environments). Your source code can read these values to change behavior during the Build Step or Launch [Cloud Function](https://www.contentstack.com/docs/developers/launch/cloud-functions) execution. All values are visible to any user that has access to the Project. It is safe to use both non-sensitive and sensitive data, such as tokens. **Note**: Changes to Environment Variables are not applied to previous deployments. They only apply to new deployments. You can add environment variables while creating a new project or environment, or configure the environment variables later at **Environments > Settings > Env. Variables**. ## Add Environment Variables 1. Click the project card to open your project from the Launch landing page. 2. In the Environments screen, click an existing environment or create a new environment. For this tutorial, we will add an environment variable to the ‘Default’ environment for the Contentstack API key. Hover over the **Default** environment and click the **Settings** icon to go to the Settings page. 3. In Environments under Settings, click **Environment Variables**. ![Launch\_Env\_Var\_Navigate.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5523d390422ee656/64a65d3eb62fa40371ab8544/Launch_Env_Var_Navigate.png) 5. Under the **Key Value Edit** tab, enter the environment variable key and value. You can click the **\+ Add Environment Variable** button to add additional environment variables. **Note**: You can add up to **100** environment variables per environment. You can also add or edit environment variables in bulk in key-value format, separated by new lines by clicking the **Bulk Edit** tab. An environment variable can be added in the key=value format, or an existing variable's key or value can be edited in the bulk edit mode. The updated environment variables will also be reflected in the Key Value Edit tab. The bulk edit mode allows you to paste code blocks with key=value pairs, thereby reducing the effort of individually entering environment variables in the key-value edit mode. 6. Click the **Save** button. **Note**: You must trigger a new deployment after adding/modifying environment variables. ## Auto-populate Environment Variables from a Linked Stack Importing a Starter app or any application with Contentstack SDK requires adding key-value pairs of environment variables like CONTENTSTACK\_API\_KEY, CONTENTSTACK\_DELIVERY\_TOKEN, etc. Adding these environment variables manually is a tedious task. Launch allows you to auto-populate the Environment Variables from your stack, by linking the stack to your project. This allows you to easily use the CMS environment variables while deploying your Launch project. This step-by-step guide lets you link a stack to your project to auto-populate Environment Variables. **Note**: This feature can also be used when creating or configuring an environment. ## Prerequisites 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization ## Steps for execution Follow the steps to link a stack to your project: 1. Click **Launch** in the left navigation panel, as shown below. ![Launch-LinkedStack-LaunchIcon.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltd6795befb5942ba3/64354575c6373410f6840530/Launch-LinkedStack-LaunchIcon.png) 2. Click the **\+ New Project** button. ![Launch-New\_Project.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt312818ae4f29de6b/643e70a6a39e8e5aa0f4588e/Launch-New_Project.png) 3. Select [Import from a Git Repository](https://www.contentstack.com/docs/developers/launch/import-project-using-github) or [Upload a file](https://www.contentstack.com/docs/developers/launch/import-project-using-file-upload) as usual from the **Create New Project** modal. 4. In the **Environment Variables** section, click the **Connect and Import Variables** button. ![Launch-LinkedStack-Connect\_n\_Import.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt17af4819d7fa38b3/6435082ceb41fa1100c83ad5/Launch-LinkedStack-Connect_n_Import.png) 5. Select the **Stack** which has the Starter app installed and then select the **Delivery Token** for your stack. ![Launch-LinkedStack-Select\_Stack\_DeliveryToken.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte2e9d91734b317c0/6435082d41f63e1131dec78c/Launch-LinkedStack-Select_Stack_DeliveryToken.png) **Note**: On selecting a delivery token, Launch automatically selects a Stack environment available for the selected token. 6. Click the **Import Variables** button. ![Launch-LinkedStack-Import\_Variables.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4490387c1d2ef2ad/6435082db2ef0d11ece9fee2/Launch-LinkedStack-Import_Variables.png) You can see the Environment Variables auto-populated from your selected stack. 7. Click the **Deploy** button. ![Launch-LinkedStack-Env\_Var\_List.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltc65752cd124d93c6/6435082dc3a87d1213a87a02/Launch-LinkedStack-Env_Var_List.png) 8. Your project is now deployed. ![Launch-LinkedStack-Deployed.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt74a4e7e884cec340/6435082d8485c010da11a929/Launch-LinkedStack-Deployed.png) ## View a linked stack Follow the step to view the linked stack after project creation: 1. Click the **Settings** icon in the left panel and then click **Stack Integration** to view the linked stack. ![Launch-LinkedStack-StackIntegration.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte9818b96b83a1c32/64a65eb4b7aec33465d889ad/Launch-LinkedStack-StackIntegration.png) 3. You can see the linked stack. ## Update a linked stack Follow the steps below to update a linked stack: This will sync your new stack’s Environment Variables to your project. 1. Click the **Settings** icon in the left panel and then click **Stack Integration**. 2. Choose a stack from the dropdown and then click **Connect Stack** button. ![Launch-LinkedStack-UpdateStack.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte023ddf17b951c76/64a65eb44eb51cb4ed35d971/Launch-LinkedStack-UpdateStack.png) 3. Once you choose a different stack, you must sync the stack variables. To do this, follow the steps below: 1. Click **Environments** under Settings. 2. Select your environment (Default in this example). 3. Click **Environment Variables**. 4. Click **Sync Stack Variables.** 6. A popup displays asking for your confirmation. Select your delivery token and then click the **Yes, Proceed** button. ![Launch-LinkedStack-SyncStackProceed.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb1c340082f87249f/6435082c6bfe3410b96a8ea7/Launch-LinkedStack-SyncStackProceed.png) #### Key takeaways - Connect **Environment Variables** 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 10 — Setting up Custom Domains #### Lesson text ## Setting up Custom Domains By default, Launch generates a unique URL of the form example.contentstackapps.com for every environment. Each environment is assigned to a unique subdomain, e.g. example-environment.contentstackapps.com. For users to easily access your site and remember your site address, you need a human-friendly domain name. You can add a custom domain name to your environment. **Note:** Custom domains cannot be more than **63 characters** long. For example, example.com, example.org, subdomain.example.in ## Add a Custom Domain 1. Click the project card to open your project from the Launch landing page.  ![Launch\_-\_Projects.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4a98e187b26f92e0/643e30f71a1ec621c9be6010/Launch_-_Projects.png)  2. In the Environments screen, click an existing environment or create a new environment. We will add a custom domain to the Default environment for this tutorial. 3. Hover over the **Default** environment and click the **Environment Settings** icon to go to the Settings page.  ![Launch-Env\_Settings.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4411ebf033dcd7c5/643e9879e8b191595dde432a/Launch-Env_Settings.png)  4. Click **Domains** in the **Environments** section.  ![Launch-CustomDomains-Domains.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt413d8e2c3aa082f1/64a65cb5bd5d8a4d8a721355/Launch-CustomDomains-Domains.png)  5. Click the **\+ New Custom Domain** button. 6. Enter your custom domain host URL. For example - example.com 7. Click the copy button to copy the A Record to your clipboard. A Records point to an IP address, usually the one for your hosting account. ![Launch-CustomDomains-Modal.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb55b9f822b2530db/64a65cb5f122ca8ff2e6a6e8/Launch-CustomDomains-Modal.png) 8. Click the **Save** button. 9. Paste the copied A record to your domain provider platform. Below are some documentation links to common DNS providers for adding the A record. 1. [Go-Daddy](https://in.godaddy.com/help/add-an-a-record-19238) 2. [Bluehost](https://www.bluehost.com/help/article/dns-management-add-edit-or-delete-dns-entries) 3. [Namecheap](https://www.namecheap.com/support/knowledgebase/article.aspx/319/2237/how-can-i-set-up-an-a-address-record-for-my-domain/) Depending on your domain provider, these changes can take up to 48 hours to take effect. 10. Click the **Edit** or **Delete** button to edit or delete the custom domains.  ![Launch-CustomDomains-EditDelete.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt467eb1bf2091d3e4/64a65cb58f332a585b544482/Launch-CustomDomains-EditDelete.png)  ## Add a Custom Subdomain  Launch allows you to add custom subdomains to your environments.  Follow the steps below to add a custom subdomain to your existing domain. In this example, we are creating a subdomain for the domain example.com which was created in the previous steps. 1. Click the **\+ New Custom Domain** button. ![Launch-CustomDomains-SubDomain.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt7c451fd539aa8a68/64a65cb538fe4362c46ab857/Launch-CustomDomains-SubDomain.png) 2. In the **Domain Name** field, enter the subdomain name as given in the following format: . For example: app.example.com After entering the subdomain name, the DNS Details get auto-populated as shown below: ![Launch-CustomDomains-SubDomain\_Modal.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt7b9dfed7c1ff9772/64a65cb58f332aab62544486/Launch-CustomDomains-SubDomain_Modal.png) The Value field displays the default subdomain. **Note:** The DNS details are different for the apex domain and the custom subdomain. 3. Click the copy button next to the **Name** and **Value** fields to copy the CNAME record details. ![Launch-CustomDomains-SubDomain\_Modal\_CNAME.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt1867f7794c9a2bd3/64a65cb6ade08c96c8cb1697/Launch-CustomDomains-SubDomain_Modal_CNAME.png) 4. Paste the copied CNAME record details to your domain provider platform. Below are some documentation links to common DNS providers for adding the CNAME record: 1. [Go-Daddy](https://in.godaddy.com/help/add-a-cname-record-19236) 2. [Bluehost](https://www.namecheap.com/support/knowledgebase/article.aspx/9646/2237/how-to-create-a-cname-record-for-your-domain/) 3. [Namecheap](https://www.namecheap.com/support/knowledgebase/article.aspx/9646/2237/how-to-create-a-cname-record-for-your-domain/) Depending on your domain provider, these changes can take up to 48 hours to take effect. 5. Click the **\+ Create Custom Domain** button. You can see the newly created subdomain listed in the Domains page. ![Launch-CustomDomains-SubDomains.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt63db2e44b992d86d/64a65cb6ad2e9fd93a0011b5/Launch-CustomDomains-SubDomains.png) #### Key takeaways - Connect **Setting up Custom Domains** 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 11 — Using Deploy Hooks #### Lesson text ## Using Deploy Hooks A deploy hook allows you to trigger a deployment using a unique URL. The following are some of the example use cases for Deploy Hooks: * Rebuilding your site to reflect changes in a Headless CMS * Scheduling deployments with Cron Jobs This document guides you through the process of creating, triggering, renaming, and deleting a deploy hook in Launch. ## Prerequisites 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization 3. A project already deployed in Launch ## Create a Deploy Hook Follow the steps given below to create a deploy hook in your project: 1. From the Launch landing page, click the project card to open your project. 2. In the Environments screen, hover over the **environment** where you created the project and then click the **Environment Settings** icon to configure the deploy hook. For this tutorial, we will be adding a deploy hook to the **Default** environment. 3. In Environments under Settings, click **Deploy Hooks**. 4. Click the **\+ New Deploy Hook** button. 5. Enter a name for your deploy hook. **Note**: The deploy hook name is for your reference. This name will display in your list of deploy hooks. 6. Click the **Create Deploy Hook** button. Launch provides you with a unique URL for this deploy hook. ## Trigger a Deploy Hook Follow the steps given below to trigger a deploy hook: 1. Click the **Environments** icon in the left panel. 2. Hover over the **Default** environment and click the **Environment Settings** icon to go to the Settings page. 3. In Environments under Settings, click **Deploy Hooks**. 4. Click the **ellipses** under Actions and then click **Copy URL** to copy the deploy hook URL. 5. Send a **POST** request to this URL to trigger the deploy hook you created. **Example Request** curl -X POST https://cs-domain.com/Launch-path/manage/deploy/deploy-hook-id **Example Response** { "message": "Deployment triggered successfully" } 6. Click the **Environments** icon in the left panel and then go to your environment. You will see that it has triggered a deployment successfully. If you used a git repository to import your project, then by default, the deploy hook uses the latest commit from the git branch for the deployment. ## Parameter used in a Deploy Hook Deploy hooks accept the following optional URL query parameter: * commit: Parameter that specifies which git commit to deploy on triggering the deploy hook. Here's an example where a deploy hook URL uses the commit parameter: curl -X POST https://cs-domain.com/Launch-path/manage/deploy/h83y7hreohuuererh7343?commit=rbg734 The commit can be the full SHA or just the **first seven characters** of your full SHA. **Note**: When you import a project by uploading a file, you should not pass the commit parameter. ## Rename a Deploy Hook Follow the steps given below to rename a deploy hook: 1. Click the **Environments** icon in the left panel. 2. Hover over the **Default** environment and click the **Environment Settings** icon to go to the Settings page. 3. In Environments under Settings, click **Deploy Hooks**. 4. Click the **ellipses** under Actions and then click **Edit** to edit the deploy hook URL. ## **Delete a Deploy Hook** Follow the steps given below to delete a deploy hook: 1. Click the **Environments** icon in the left panel. 2. Hover over the **Default** environment and click the **Environment Settings** icon to go to the Settings page. 3. In Environments under Settings, click **Deploy Hooks**. 4. Click the **ellipses** under Actions and then click **Delete** to delete the deploy hook URL. ## Redeploy Automatically when Content is Published on CMS Launch allows you to set up a site to redeploy automatically when its content is modified in the CMS. Prerequisites 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization 3. A site on Launch that fetches data from the CMS ## Steps for execution Follow the steps to redeploy automatically when content is published. 1. Create a [deploy hook](https://www.contentstack.com/docs/developers/launch/deploy-hooks) in Launch. 2. Follow the steps to add the deploy hook as a Webhook to Contentstack CMS. ![Launch\_AutoRedeploy\_CMS\_Content\_CopyURL.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5812c201178618cb/64a65e74f5591f7bd0e5812f/Launch_AutoRedeploy_CMS_Content_CopyURL.png) 1. Copy the deploy hook URL. 2. Go to your stack and then go to **Settings > Webhooks**. ![Launch-Auto\_Redeploy-Webhooks.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9553633720b751f0/6434fd345a10e41114ae9343/Launch-Auto_Redeploy-Webhooks.png) 3. Click the **New Webhook** button. 4. In the **Name** field, enter a suitable name for the Webhook. 5. In the **URL To Notify** field, paste the deploy hook URL. ![Launch-Auto\_Redeploy-URL\_to\_Notify.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9c5c5c5e2cf1f312/6434fd3435650a1107644370/Launch-Auto_Redeploy-URL_to_Notify.png) 6. In the **When** field, enter the conditions for the deploy hook to trigger. 7. Mark the **Enable Webhook** checkbox. 8. Click the **Save** button. ![Launch-Auto\_Redeploy-Save.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte4701ca95494da8b/6434fd33aa312f114ba7dfc9/Launch-Auto_Redeploy-Save.png) You will see the conditions updated on the deploy hook page in Launch. 3. Go to the entry where you want to make the update. 4. Make the necessary updates, and click the **Save** button. 5. Click the **Publish** button, select Environment(s) and Language(s), and then click the **Send** button. ![Launch-Auto\_Redeploy-PublishEntry.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blted5a225421cef7d3/6434fd33ab116a10dd6a4253/Launch-Auto_Redeploy-PublishEntry.png) On clicking **Publish**, the Webhook gets triggered and the project gets automatically redeployed in Launch. #### Key takeaways - Connect **Using Deploy Hooks** 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 12 — Setting up Cloud Functions #### Lesson text ## Setting up Cloud Functions Launch cloud functions are a mechanism for you to provide backend functionality on your sites, and enable you to **write**, **deploy**, and **run** server-side code on-demand as API endpoints. These functions are co-located with your frontend code and part of your Git workflow. As traffic increases, they automatically scale up and down to meet your needs. Example use cases: CRUD operations with database, sending automated email, server-side input validation, etc. You must code your functions in JavaScript and save them to the /functions directory in your project’s root folder. The function endpoint is determined by its **file path** relative to /functions. Each JavaScript file to be deployed as a cloud function must export a handler function with the following general syntax: export default function handler(request, response) { // your server-side functionality } **Example :** // functions/hello.js export default function handler(request, response) { response.status(200).json({ body: request.body,   query: request.query,   cookies: request.cookies, }); } The above example returns the request body, path query, and cookies in JSON format. This function runs when you visit the URL path: /hello Sometimes you may want to place extra code files, such as utils.js, inside the /functions folder. To skip turning these files into serverless functions, default exporting from such files is not supported. Below is an example of a valid utils.js file that can be placed inside the /functions directory. **Example**:  //functions/utils.js export function getShortName(name) {   return name.slice(0, 3); } //functions/user.js import { getShortName } from "./utils" export default function handler(request, response) {   const name = "Hilary";   const shortName = getShortName(name);   response.status(200).send({ name, shortName}); } ## Node.js Request and Response Objects Each request to a Launch cloud function gets access to Request and Response objects. These objects are the standard HTTP [Request](https://nodejs.org/api/http.html#class-httpincomingmessage) and [Response](https://nodejs.org/api/http.html#class-httpserverresponse) objects from Node.js. ### Node.js Helpers Additional helpers are provided inside the Request and Response objects passed to the function. These are: **Method** **Description** **Object** req.query An object containing the request's [query string](https://en.wikipedia.org/wiki/Query_string), or {} if the request does not have a query string. Request req.cookies An object containing the cookies sent by the request, or {} if the request contains no cookies. Request req.body An object containing the body sent by the request, or null if no body is sent. Request res.status(code) A function to set the status code sent with the response where the code must be a valid [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). Returns res for chaining. Response res.send(body) A function to set the content of the response where the body can be a string, an object, or a Buffer. Response res.json(obj) A function to send a JSON response where the obj is the JSON object to send. Response res.redirect(url) A function to redirect to the URL derived from the specified path with status code 307 Temporary Redirect. Response res.redirect(statusCode, url) A function to redirect to the URL derived from the specified path, with the specified [HTTP status code](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). Response ### Request Body The req.body property populates with a parsed version of the content sent with the request when possible, based on the value of the **Content-Type** header as follows: **Content-Type header** **Value of** req.body No header Undefined application/json An object representing the parsed JSON sent by the request. application/x-www-form-urlencoded An object representing the form data sent with the request. text/plain A string containing the text sent by the request. application/octet-stream A [Buffer](https://nodejs.org/api/buffer.html) containing the data sent by the request. When the request body contains malformed JSON, accessing req.body will throw an error. You can catch that error by wrapping req.body with try...catch: try { const data = req.body; } catch (error) {   res.status(400).json({ error: 'Invalid JSON in request body' }); } ### Handling different HTTP methods To handle different HTTP methods in a cloud function, you can use req.method in your handler as below: export default function handler(req, res) { if (req.method === 'POST') {   // Process a POST request   } else {   // Handle any other HTTP method } } ### Execution Timeout Launch cloud functions enforce a maximum execution timeout. This means that the function must respond to an incoming HTTP request before the timeout has been reached. The maximum execution timeout is **60 seconds**. If a request times out, the response error code would be **500**. ## Dynamic API Routes using Path Segments Deploying cloud functions with Launch also gives users the ability to use path segments as file names. When using path segments, any dynamic filename can be used; this is indicated by the use of square brackets ( \[ \] ). **Note**: The filename for the path segment is used solely for the purpose of providing a key name for accessing the value on the req.query object. **Example**: functions/user/\[name\].js Here, the value passed for the path segment is made available to the req.query object under the key used for the filename(**name**). // functions/user/\[name\].js export default function handler(request, response) {   response.end(\`Hello ${request.query.name}!\`); } Running the function on the endpoint /user/Jake will return the response as Hello Jake. ## Environment Variables Users can access environment variables inside the cloud functions. Environment variables can be added by going to the corresponding environment’s **Settings** page on Launch. **Example:** export default async function handler(req, res) { const uri = process.env.DATABASE\_URI; const client = new DBClient(uri); // perform database operations... res.status(200).send("Success"); } **Note**: A new deployment must be triggered after adding/modifying environment variables. ## Debugging Cloud Functions - Server Logs The Server logs section displays real-time logs generated by the cloud functions from the latest deployment. The logs in Server Logs are not persistent and will be cleared if you refresh the page or if you perform a different action on the same page ## Running Cloud Functions Locally You can run your Launch project Cloud Functions locally using the [launch:functions](https://www.contentstack.com/docs/developers/cli/cli-for-launch/#functions) command in CLI. ## Limitations * Writing Cloud Functions using TypeScript is currently not supported. ## Add API Endpoints to a Website in Launch Launch allows you to write Cloud Functions to create API endpoints. ## Steps for execution Follow the steps to write a cloud function that can be used to add API endpoints to a website in Launch. 1. Create a folder named /functions in your project’s root folder. 2. Create a JavaScript file to code your functions and then save the file to the /functions folder. **Example**: // functions/users.js export default function handler(request, response) { const users = \[ {name: "Jack", age: "25"}, {name: "Rick", age: "28"}, {name: "Jane", age: "34"}, \]; response.status(200).send(users); } 4. Deploy your project in Launch using one of the following methods: 1. [Import from a Git Repository](https://www.contentstack.com/docs/developers/launch/import-project-using-github/) 2. [Upload a file](https://www.contentstack.com/docs/developers/launch/import-project-using-file-upload/) After successful deployment, you will see the Cloud Functions displayed in the log: ![Launch-API-CloudFunctions.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt8e73fd8278fa8ee0/6434ec539bfbdd10ae68fbcd/Launch-API-CloudFunctions.png) The function endpoint is determined by its **file path** relative to /functions. The function runs when you visit the path: /users. 5. Copy the URL from the Deployment Information. ![Launch-API-CopyURL.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt04770f8bf41ae29a/6434ec5250e4c910ff39749d/Launch-API-CopyURL.png) In this example, the URL of the API endpoint will be https://sample-test-api.devsampleapp.com/users. 6. On sending a request to the API Endpoint, you will see the following response: \[ { "name": "Jack", "age": "25" }, { "name": "Rick", "age": "28" }, { "name": "Jane", "age": "34" } \] #### Key takeaways - Connect **Setting up Cloud Functions** 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 13 — Password Protecting an Environment #### Lesson text ## Password Protecting an Environment Development, staging, and production environments refer to common stages of software development where an application or system is deployed and operated in isolated environments. Access to the development and staging environments is usually restricted from public access as it is in these environments that new features, code changes, and updates are tested, built, and validated before they are published on the web in the production environment. The Password Protection feature of Contentstack Launch allows you to enable access restrictions to your development and staging environments in Launch using the [Basic Auth](https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication) method in order to prevent them from being accessed by search engines and the public. This document guides you through enabling and disabling password protection for your environments in Contentstack Launch. ### Prerequisites 1. [Contentstack account](https://www.contentstack.com/login/) 2. Access to Launch for your organization 3. A project already deployed in Launch ### Enable Password Protection for your Environment Follow the steps below to enable password protection for your environment: 1. From the Launch landing page, click the **project card** to open your project. 2. In the Environments screen, hover over the **environment** for which you want to provide password protection, and click the **Environment Settings** icon. ![Launch-PasswordProtection-EnvSettingsIcon.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5464705313e0b649/64bb45d0361d391f07947100/Launch-PasswordProtection-EnvSettingsIcon.png) 3. In Settings > Environments, click the **Password Protection** tab. ![Launch\_Password\_Protection\_Nav.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9350eca9beeee345/64bb45d01add4dd0bffbba34/Launch_Password_Protection_Nav.png) 4. Click the **Enable Password Protection** toggle button to enable it. ![Launch\_Password\_Protection\_Toggle\_New.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt0c68c731c1a9346e/64c89cff0242c3ff50bb8992/Launch_Password_Protection_Toggle_New.png) 5. Enter a username in the **Username** field and password in the **Password** field for your current environment, not exceeding 200 characters each. ![Launch\_Password\_Protection\_UsernamePassword\_New.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5e89c769013d040c/64c89cff61d2875329856d9d/Launch_Password_Protection_UsernamePassword_New.png) **Note**: The username must not contain the colon (:) character. 6. Click the **Save** button. **Note**: The protection is specific to the selected environment. All domains within this environment will be automatically password protected. You have now successfully enabled and set password protection for your environment. All visitors to the site or application hosted on this environment will be prompted to enter this username and password when they try to access the environment URL. **Best Practices**: It is common that most modern web browsers cache Basic Auth credentials after they are successfully entered the first time. For this reason, and because the username and password set for each environment is shared for all users with whom you share these credentials, it is recommended that you change this password periodically (i.e., every three months). ## Disable Password Protection for your Environment Follow the steps below to disable password protection for your environment: 1. From the Launch landing page, click the **project card** to open your project. 2. In the **Environments** screen, hover over the **environment** for which you want to disable password protection and click the **Environment Settings** icon. ![Launch-PasswordProtection-EnvSettingsIcon.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5464705313e0b649/64bb45d0361d391f07947100/Launch-PasswordProtection-EnvSettingsIcon.png) 3. In **Settings** > **Environments**, click the **Password Protection** tab. ![Launch\_Password\_Protection\_Nav.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9350eca9beeee345/64bb45d01add4dd0bffbba34/Launch_Password_Protection_Nav.png) 4. Click the **Enable Password Protection** toggle button again to disable the password protection. ![Launch\_Password\_Protection\_DisableToggle\_New.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt1c32c9210417675e/64c89cff385f46e1a09ed676/Launch_Password_Protection_DisableToggle_New.png) 5. Click the **Yes, disable** button. ![Launch-PasswordProtection-ModalDisable\_New.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt79018498e7c4f871/64c89cff5133eee2a6bf0bc3/Launch-PasswordProtection-ModalDisable_New.png) You have now successfully disabled password protection for your environment. This allows anyone with the environment URL to access your environment. #### Key takeaways - Connect **Password Protecting an Environment** 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 14 — Using Launch with CLI #### Lesson text ## Using Launch with CLI Launch is a deployment platform that enables you to host your Contentstack-powered Jamstack website instantly. [Launch](https://www.contentstack.com/docs/developers/launch/about-launch/) hosts websites managed by any CMS (headless or traditional). You can create a new project in Launch and link it with your GitHub repository. Launch picks that code and deploys your website instantly. Launch also allows you to create a project by directly uploading a project folder or a .zip file. This step-by-step guide lets you perform different operations in Launch using the CLI. ## Prerequisites **Note**: This prerequisite is applicable only if you are importing a project via GitHub. * [Contentstack account](https://www.contentstack.com/login/) * [CLI installed](https://www.contentstack.com/docs/developers/cli/install-the-cli/) and [configured](https://www.contentstack.com/docs/developers/cli/configure-regions-in-the-cli/) (version 1.6.0 and above) * [CLI authenticated](https://www.contentstack.com/docs/developers/cli/cli-authentication/) * Access to Launch for your organization * [GitHub account](https://github.com/login) where your website code is hosted ## Steps for execution 1. Open a terminal and fire the launch command: * Run the below command if you are in the current working directory. $ csdx launch * If you are in a different directory, provide the path of the current working directory. $ csdx launch –data-dir **Note**: Launch automatically identifies Git projects. 2. If you are creating a project by uploading a file, or if the GitHub is not already connected, you will be prompted to choose a project type to proceed. Select **Continue with GitHub** or **Continue with FileUpload** to proceed. ![Launch\_Plugin-Project\_Type.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt0e0d2bc64da6923d/6437b49d1c46cc118806d761/Launch_Plugin-Project_Type.png) 3. Select the organization where you want to create your project. 4. In this step, select a branch if you decided to create your project using GitHub. 5. Enter a name for your project. 6. Enter a name for your Environment or click **Enter** to proceed with the Default environment. 7. By default, Launch identifies the framework. Select a **Framework Preset** if you want to change the default framework, and then click **Enter**. 8. In the Build Command section, perform one of the following: * Click **Enter** if you want to proceed with the default Build command npm run build. * Enter a new build command or update the existing command if you want to customize the command. 9. Enter the output path in the **Output Directory** section or click **Enter** to proceed with the default output path. 10. In the next step, follow the instructions provided on screen to perform one of the following: * Import variables from a stack * Manually add custom variables to the list * Import variables from the local env file 11. A prompt, Would you like to add more variables.? appears. * Enter **Y** to add another custom variable. * Enter **n** to proceed with the project deployment. You have successfully deployed a Launch project using the CLI. 12. To redeploy/re-initialize an existing project, run the launch command with the existing project’s directory path. You will get a prompt as displayed in the screenshot below. ![Launch\_Plugin-Redeploy.png](https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltac3ef4127a60dca9/6437b49d43365211f62d714a/Launch_Plugin-Redeploy.png) * Click **Y** to redeploy the project. If you are redeploying using the File Upload method, then you will get a prompt Redeploy with last file upload?. 1. Click **y** if you want to redeploy with the last file upload. 2. Click **N** to redeploy by uploading a new file. **Note**: By default, Launch assumes to redeploy a new file. * Click **N** to terminate the process. **Usage** $ csdx launch **Options** * \-d, --data-dir=data-dir: Current working directory. * \-c, --config=config: Path to the local config file. * \--type=type: Optional type of adapters. Options \[GitHub or FileUpload\]. * \-e, --environment=environment: \[optional\] Environment name for launch project. * \-n, --name=name: \[optional\] Name of project. * \--branch=branch: \[optional\] GitHub Branch name. * \--build-command=build-command: \[optional\] Build Command. * \--framework=: \[optional\] Type of framework. Options \[GATSBY|NEXTJS|OTHER\] * \--org=org: \[optional\] Provide the organization's UID to create a new project or deployment. * \--out-dir=: \[optional\] Output Directory. * \--init: \[Optional, Hidden\] Reinitialize the project if it is an existing Launch project. **Examples** * To create a Launch project by providing the config file path and file type: $ csdx launch --config --type * To create a Launch project by providing the directory path and file type: $ csdx launch --data-dir --type **Note**: When there are multiple branches identified in the configuration, you will be prompted to **Choose a branch** to proceed with the Launch operations. A single config file can have n number of configurations based on the branch. ## Logs You can fetch the previous deployment logs and the latest server logs for Launch projects in CLI using the launch:logs command. ### Steps for execution $ csdx launch:logs 1. Open a terminal and fire the launch:logs command: 2. Select the organization which has your project. 3. Select your project for which you want to fetch the logs. 4. Select the required environment. 5. You have successfully fetched the logs for your selected project. 7. **Usage** $ csdx launch:logs **Options** * \-d, --data-dir=data-dir: Current working directory. * \-c, --config=config: Path to the local config file. * \-e, --environment=environment: Environment name or UID. * \--deployment=deployment: Deployment number or uid. * \--type=type: Optional type of flags to show logs. By default, these are server logs. Options \[d - deployment logs, s - server logs\] **Note**: If you do not pass a deployment ID, by default launch fetches the latest deployment logs. **Examples** * To fetch Launch project logs based on the environment number and type of flags: $ csdx launch:logs -e "environment number or uid" --type "types of flags" * To fetch Launch project logs based on the environment number and deployment number: $ csdx launch:logs -e "environment number or uid" --deployment "deployment number or uid" ## Functions You can test your Launch project Cloud Functions locally using the launch:functions command in CLI. **Usage** $ csdx launch:functions **Options** * \-d, --data-dir=data-dir: Current working directory. * \-c, --config=config: Path to the local config file. * \-p, --port=port: Port number. **Examples** * To test your Launch project Cloud Function locally: $ csdx launch:functions * To test your Launch project Cloud Function locally in a specific port: $ csdx launch:functions -p "port number" ## Deployments You can display the list of deployments for an environment for Launch projects using the launch:deployments command in CLI. ### Steps for execution $ csdx launch:deployments 1. Open a terminal and fire the launch:deployments command: 2. Select the organization which has your Launch project. 3. Select your project. 4. Select the environment for which you want to list the deployments. You have successfully listed the deployments for the selected environment. **Usage** $ csdx launch:deployments **Options** * \-d, --data-dir=data-dir: Current working directory. * \-c, --config=config: Path to the local '.cs-launch.json' file. * \-e, --environment=environment: Environment name or UID. * \-–org=org: \[Optional\] Provide the organization UID. * \-–project=project: \[Optional\] Provide the project UID. **Examples** $ csdx launch:deployments -d "current working directory" $ csdx launch:deployments -e "environment number or uid" * To list the deployments in your current working directory * To list the deployments for a given environment ## Environments You can display the list of environments that are available for a particular project using the launch:environments command in CLI. ### Steps for execution $ csdx launch:environments 1. Open a terminal and fire the launch:environments command: 2. Select the organization which has your project. 3. Select your project. You have successfully listed the environments for the selected project. **Usage** $ csdx launch:environments **Options** * \-d, --data-dir=data-dir: Current working directory. * \-c, --config=config: Path to the local '.cs-launch.json' file. * \-–org=org: \[Optional\] Provide the organization UID. * \-–project=project: \[Optional\] Provide the project UID. **Examples** $ csdx launch:environments -d "current working directory" $ csdx launch:environments --org= --project= * To list the environments in your current working directory * To list the environments for a specific project under a given organization ## Open You can open the live site for an environment of your Launch projects using the launch:open command in CLI. ### Steps for execution $ csdx launch:open 1. Open a terminal and fire the launch:open command: 2. Select the organization which has your project. 3. Select your project. 4. Select the environment for which you want to view the live site. You have successfully opened the live site for the selected environment. **Usage** $ csdx launch:open **Options** * \-d, --data-dir=data-dir: Current working directory. * \-c, --config=config: Path to the local '.cs-launch.json' file. * \-e, --environment=environment: Environment name or UID. * \-–org=org: \[Optional\] Provide the organization UID. * \-–project=project: \[Optional\] Provide the project UID. **Examples** $ csdx launch:open --environment=environment --data-dir $ csdx launch:open --environment=environment --config * To open the website for an environment by passing your current working directory * To open the website for an environment for a given configuration #### Key takeaways - Connect **Using Launch with CLI** 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 15 — Additional Resources #### Lesson text ### Launch Overview [About Launch](https://www.contentstack.com/docs/developers/launch/about-launch/) [Quick Start Guide with Gatsby](https://www.contentstack.com/docs/developers/launch/quick-start-gatsby/) [Quick Start Guide with NextJS](https://www.contentstack.com/docs/developers/launch/quick-start-nextjs/) ### Launch Features [Create a Project using GitHub](https://www.contentstack.com/docs/developers/launch/import-project-using-github/) [Create a Project using File Upload](https://www.contentstack.com/docs/developers/launch/import-project-using-file-upload/) [Deployments](https://www.contentstack.com/docs/developers/launch/deployments/) [Environments](https://www.contentstack.com/docs/developers/launch/environments/) [Environment Variables](https://www.contentstack.com/docs/developers/launch/environment-variables/) [Custom Domain](https://www.contentstack.com/docs/developers/launch/custom-domain/) [Deploy Hooks](https://www.contentstack.com/docs/developers/launch/deploy-hooks/) [Cloud Functions](https://www.contentstack.com/docs/developers/launch/cloud-functions/) [Password Protection for Environments](https://www.contentstack.com/docs/developers/launch/password-protection/) ### Launch How to Guides [Add API Endpoints to a Website in Launch](https://www.contentstack.com/docs/developers/launch/add-api-endpoints-to-a-website/) [Deploy a Gatsby Site](https://www.contentstack.com/docs/developers/launch/deploy-a-gatsby-site/) [Deploy a NextJS Site](https://www.contentstack.com/docs/developers/launch/deploy-a-nextjs-site/) [Deploy a Project from a Monorepo on Launch](https://www.contentstack.com/docs/developers/launch/deploy-a-project-from-a-monorepo/) [Disable Automatic Redeployment](https://www.contentstack.com/docs/developers/launch/disable-automatic-redeployment/) [Host a Static Site on Launch](https://www.contentstack.com/docs/developers/launch/host-a-static-site/) [Redeploy Automatically when Content is Published on CMS](https://www.contentstack.com/docs/developers/launch/redeploy-automatically-when-content-is-published-on-CMS/) [Setup Production and Non-Production Environment](https://www.contentstack.com/docs/developers/launch/setup-production-and-non-production-environment/) [Auto-populate Environment Variables from a Linked Stack](https://www.contentstack.com/docs/developers/launch/auto-populate-environment-variables-from-a-linked-stack/) [Can I run a Docker container on Launch?](https://www.contentstack.com/docs/developers/launch/docker-support-in-launch/) ### Launch Command Line Interface [CLI for Launch](https://www.contentstack.com/docs/developers/cli/cli-for-launch/) ### More about Contentstack Launch [Launch FAQs](https://www.contentstack.com/docs/faqs/#launch-faqs) #### Key takeaways - Connect **Additional Resources** 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/launch-foundations/what-is-contentstack-launch | /academy/md/courses/launch-foundations/what-is-contentstack-launch.md | | /courses/launch-foundations/setting-up-launch-with-gatsby | /academy/md/courses/launch-foundations/setting-up-launch-with-gatsby.md | | /courses/launch-foundations/setting-up-launch-with-nextjs | /academy/md/courses/launch-foundations/setting-up-launch-with-nextjs.md | | /courses/launch-foundations/setting-up-launch-using-file-upload | /academy/md/courses/launch-foundations/setting-up-launch-using-file-upload.md | | /courses/launch-foundations/deleting-a-launch-project | /academy/md/courses/launch-foundations/deleting-a-launch-project.md | | /courses/launch-foundations/launch-deployments | /academy/md/courses/launch-foundations/launch-deployments.md | | /courses/launch-foundations/launch-environments | /academy/md/courses/launch-foundations/launch-environments.md | | /courses/launch-foundations/setting-up-production-and-non-production-environements | /academy/md/courses/launch-foundations/setting-up-production-and-non-production-environements.md | | /courses/launch-foundations/environment-variables | /academy/md/courses/launch-foundations/environment-variables.md | | /courses/launch-foundations/setting-up-custom-domains | /academy/md/courses/launch-foundations/setting-up-custom-domains.md | | /courses/launch-foundations/using-deploy-hooks | /academy/md/courses/launch-foundations/using-deploy-hooks.md | | /courses/launch-foundations/setting-up-cloud-functions | /academy/md/courses/launch-foundations/setting-up-cloud-functions.md | | /courses/launch-foundations/password-protecting-an-environment | /academy/md/courses/launch-foundations/password-protecting-an-environment.md | | /courses/launch-foundations/using-launch-with-cli | /academy/md/courses/launch-foundations/using-launch-with-cli.md | | /courses/launch-foundations/additional-resources | /academy/md/courses/launch-foundations/additional-resources.md | ## Supplement for indexing ### Content summary Contentstack Launch (https://www.contentstack.com/docs/developers/launch/about-launch/) is a frontend hosting and deployment platform for websites built on the Contentstack CMS. This comprehensive course provides a step-… Contentstack Launch (https://www.contentstack.com/docs/developers/launch/about-launch/) is a frontend hosting and deployment platform for websites built on the Contentstack CMS. This comprehensive course provides a step-by-step guide to mastering Contentstack Launch and utilizing its capabilities to streamline content management, deployment, and distribution processes. The course begins with an introduction to Contentstack Launch, exploring its key features and benefits. You will quickly get started by learning how to integrate Contentstack Launch with popular frameworks such as Gatsby and Nex Upon completion of this course, participants will: 1. Gain a solid understanding of Contentstack Launch and its features, including its role in simplifying the deployment and delivery of digital content across multiple platforms and channels. 2. Acquire the knowledge and skills to integrate Contentstack Launch with popular frameworks like Gatsby and Next.js, enabling them to leverage the strengths of these frameworks in conjunction with Contentstack's powerful CMS capabilities. 3. Learn how to create projects using GitHub or file uploads, providing flexibility and ease of use in managing and o ### Retrieval tags - launch - hosting - launch-foundations - What - Contentstack - Setting - with - Gatsby - NextJS - Using - File - Upload - Deleting - Project ### 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: launch-foundations. Union of lesson topic tokens: What, Contentstack, Launch, Setting, with, Gatsby, NextJS, Using, File, Upload, Deleting, Project, Deployments, Environments, Production, and, Non, Environment, Variables, Custom, Domains, Deploy, Hooks, Cloud, Functions, Password, Protecting, CLI, Additional, Resources. Do not embed or retrieve LMS-only quiz items or mastery exam answer keys from this export. ### Asset references | Label | URL | | --- | --- | | LaunchFoundations\_L1\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6f6d36e1296b3966/67dd8825efd8a9b4474c01b7/LaunchFoundations_L1_img-1.png` | | LaunchFoundations\_L1\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc9bab43217231a30/67dd88725e486d166271b635/LaunchFoundations_L1_img-2.png` | | LaunchFoundations\_L2\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3a3a07a01cf107ec/67dd88ba4a89c31645a303d8/LaunchFoundations_L2_img-2.png` | | LaunchFoundations\_L2\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt23c2d6f0918ed6da/67dd88dac5b83e670d924c6a/LaunchFoundations_L2_img-3.png` | | LaunchFoundations\_L2\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt26218f06c615abf2/67dd8908037e2b848b22dae8/LaunchFoundations_L2_img-4.png` | | LaunchFoundations\_L2\_img-5.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3a14a65a6a3491f1/67dd89233a0f3829f300ebbe/LaunchFoundations_L2_img-5.png` | | LaunchFoundations\_L2\_img-6.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5bd8c477d94338e4/67dd893917f7b453b60d022f/LaunchFoundations_L2_img-6.png` | | LaunchFoundations\_L2\_img-7.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt133667c9397e0d2f/67dd89519867252081888aca/LaunchFoundations_L2_img-7.png` | | LaunchFoundations\_L2\_img-8.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc4746974629efa5c/67dd896ec5de53239dd2e30d/LaunchFoundations_L2_img-8.png` | | 10ac4ee7-1e0c-44eb-9079-8a0c056c3ebd-Screenshot\_from\_2023-07-19\_14-57-49.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e674db55b69c92a/66549a48e4a7328428975b16/10ac4ee7-1e0c-44eb-9079-8a0c056c3ebd-Screenshot_from_2023-07-19_14-57-49.png` | | LaunchFoundations\_L2\_img-9.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteda28b9e44b71cd1/67dd8997c566ee6bcc5e0146/LaunchFoundations_L2_img-9.png` | | e9376604-2070-4f18-bccf-f8624ff983d3-Screenshot\_from\_2023-07-24\_18-53-49.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt42980eef00145455/66549ad46933452d03c23448/e9376604-2070-4f18-bccf-f8624ff983d3-Screenshot_from_2023-07-24_18-53-49.png` | | LaunchFoundations\_L3\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb7c5f1537b7dedfd/67dd8a5ac566ee66e85e0159/LaunchFoundations_L3_img-1.png` | | LaunchFoundations\_L3\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4a9d737d68f4d30d/67dd8a76a7145838ceb9b69a/LaunchFoundations_L3_img-2.png` | | LaunchFoundations\_L3\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf2e3fb5000f3c9fd/67dd8a90314d67fc181b70a4/LaunchFoundations_L3_img-3.png` | | LaunchFoundations\_L3\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteb40b36ec25d1a8b/67dd8aa9dd73e3e0d8bf3565/LaunchFoundations_L3_img-4.png` | | LaunchFoundations\_L3\_img-5.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt339534025a5fcadd/67dd8ac1632b93658bd4a2ff/LaunchFoundations_L3_img-5.png` | | LaunchFoundations\_L3\_img-6.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1a4495329cd760ea/67dd8ad76f685886effda919/LaunchFoundations_L3_img-6.png` | | LaunchFoundations\_L3\_img-7.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt397bd7bf8f16cab2/67dd8aed037e2b157322db0e/LaunchFoundations_L3_img-7.png` | | LaunchFoundations\_L3\_img-8.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt728a7cd2fe072875/67dd8b34460eb4da859478e4/LaunchFoundations_L3_img-8.png` | | LaunchFoundations\_L3\_img-9.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt83401745119aa83b/67dd8b3edb243f26ff12c40d/LaunchFoundations_L3_img-9.png` | | LaunchFoundations\_L3\_img-10.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2506a961db71c9fc/67dd8b57c5b83e39fd924c90/LaunchFoundations_L3_img-10.png` | | LaunchFoundations\_L3\_img-11.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9def3772d270845e/67dd8b70f7eccc434690d97f/LaunchFoundations_L3_img-11.png` | | LaunchFoundations\_L3\_img-12.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta4102e28952c61f1/67dd8b8e443bd63c57f1cc07/LaunchFoundations_L3_img-12.png` | | LaunchFoundations\_L3\_img-13.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5b7272e3d6c6ac01/67dd8bb2339f298ac48b61c5/LaunchFoundations_L3_img-13.png` | | LaunchFoundations\_L4\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4d685a896d707624/67dd8c48a6d88e336e0535d2/LaunchFoundations_L4_img-1.png` | | LaunchFoundations\_L4\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2fff3be78ee68865/67dd8c69037e2b956022db3b/LaunchFoundations_L4_img-2.png` | | LaunchFoundations\_L4\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt066c1f4fb104a35d/67dd8c82443bd62674f1cc2a/LaunchFoundations_L4_img-3.png` | | LaunchFoundations\_L4\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0dc38dda8030912d/67dd8c97a6d88e5a520535df/LaunchFoundations_L4_img-4.png` | | LaunchFoundations\_L4\_img-5.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb1b6f610e02837a7/67dd8cae314d674a8e1b70c3/LaunchFoundations_L4_img-5.png` | | LaunchFoundations\_L4\_img-6.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1d38b147ef53ee04/67dd8ce145b229c0db9117e9/LaunchFoundations_L4_img-6.png` | | LaunchFoundations\_L5\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt28febba44d67aa3b/67dd8d3ba714586cc0b9b6ba/LaunchFoundations_L5_img-1.png` | | LaunchFoundations\_L5\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blta6426f8bbc143ee3/67dd8d50c9b8d4bdc9d142e5/LaunchFoundations_L5_img-2.png` | | LaunchFoundations\_L5\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5a0ea31016d9d1d2/67dd8d70b1a1f321e23ef972/LaunchFoundations_L5_img-3.png` | | LaunchFoundations\_L6\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt177b60211c208321/67dd8db02d0b9822d3fd0767/LaunchFoundations_L6_img-1.png` | | LaunchFoundations\_L6\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbd9d75bdcbcfd5c5/67dd8dd437e25a43121e4737/LaunchFoundations_L6_img-2.png` | | LaunchFoundations\_L6\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfafe167ee4993241/67dd8dee443bd6ca61f1cc3c/LaunchFoundations_L6_img-3.png` | | LaunchFoundations\_L6\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8ebea1e3b82adac4/67dd8e05339f299b4f8b61f4/LaunchFoundations_L6_img-4.png` | | LaunchFoundations\_L6\_img-5.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt20cc76c819867425/67dd8e29314d67ea021b70de/LaunchFoundations_L6_img-5.png` | | LaunchFoundations\_L6\_icon-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf00a01fd82ce83d3/67dd9074632b933faad4a366/LaunchFoundations_L6_icon-1.png` | | LaunchFoundations\_L6\_icon-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8d04d5b038f8dba1/67dd904fc5b83e8a7f924ce4/LaunchFoundations_L6_icon-2.png` | | LaunchFoundations\_L6\_icon-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteafa5f5838af6107/67dd902edb243f2f5a12c470/LaunchFoundations_L6_icon-3.png` | | LaunchFoundations\_L6\_icon-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4ec4971be3647c04/67dd9008c5b83ec83b924cdc/LaunchFoundations_L6_icon-4.png` | | LaunchFoundations\_L6\_icon-5.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1386b3930df17024/67dd8fca37e25ac4f61e4771/LaunchFoundations_L6_icon-5.png` | | LaunchFoundations\_L6\_icon-6.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt1c88a99896860180/67dd8faef7eccc502090d9d6/LaunchFoundations_L6_icon-6.png` | | LaunchFoundations\_L6\_icon-7.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt02a98307fc621b46/67dd8f7a1bae685ef84c7727/LaunchFoundations_L6_icon-7.png` | | LaunchFoundations\_L6\_img-6.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt463953e4c9cc10cb/67dd8e47443bd62a6af1cc41/LaunchFoundations_L6_img-6.png` | | LaunchFoundations\_L6\_img-7.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt014cd96394baf2f7/67dd8e5d782bfbc82b6f5740/LaunchFoundations_L6_img-7.png` | | LaunchFoundations\_L6\_img-8.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt93cecb722f01d56b/67dd8e725e486d247871b711/LaunchFoundations_L6_img-8.png` | | Launch-DisableAutoRedeploy-Configure.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt7b367b8929f55fce/643662d62673c111da708c64/Launch-DisableAutoRedeploy-Configure.png` | | LaunchFoundations\_L6\_img-9.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5310398a6a3c1ac1/67dd8eaf632b93c31ad4a348/LaunchFoundations_L6_img-9.png` | | LaunchFoundations\_L6\_img-10.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt55f28cd36d92b5c7/67dd8ecbdb243feb7312c452/LaunchFoundations_L6_img-10.png` | | Launch\_-\_Projects.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4a98e187b26f92e0/643e30f71a1ec621c9be6010/Launch_-_Projects.png` | | Launch-Env\_Screen-New\_Env.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltffe2f7d8df3b3ac2/643fc3adab59a227af420039/Launch-Env_Screen-New_Env.png` | | Launch-Create-Env-Git-BuildandOutput.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt59fada371ac34bcb/643fc3adb1f4db27b0204145/Launch-Create-Env-Git-BuildandOutput.png` | | Launch-Create-Env-Env-Variables.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt523fe31b486c6442/643fc3addfdb9232fd8bb0cd/Launch-Create-Env-Env-Variables.png` | | Launch-Create-Env-File-UploadFile.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt8e5e9a3bc26db3aa/643fc3ad3e745b11edf82044/Launch-Create-Env-File-UploadFile.png` | | Launch-Create-Env-File-BuildandOutput.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltf82bbcb2d2c6e665/643fc3ad9074ca2928c7a12b/Launch-Create-Env-File-BuildandOutput.png` | | Launch-Create-Env-Env-Variables.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt523fe31b486c6442/643fc3addfdb9232fd8bb0cd/Launch-Create-Env-Env-Variables.png` | | Launch-Env\_Settings.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4411ebf033dcd7c5/643e9879e8b191595dde432a/Launch-Env_Settings.png` | | Launch\_Environments\_Name\_Branch.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb44324eff9ad0522/64a65dafb62fa4579aab8548/Launch_Environments_Name_Branch.png` | | Launch\_Environments\_DeletePart2SS1.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt12bd365863f4029a/64a65daf7b26df745ce167c6/Launch_Environments_DeletePart2SS1.png` | | Launch\_Environments\_Settings.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt07afb18cce01cfff/64a65daf05df43c8a75ae6f3/Launch_Environments_Settings.png` | | Launch\_-\_Projects.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4a98e187b26f92e0/643e30f71a1ec621c9be6010/Launch_-_Projects.png` | | Launch-Prod-NonProd-Ellipses.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltae6f59972f5fb194/6436630eb2ef0d11ecea0238/Launch-Prod-NonProd-Ellipses.png` | | Launch\_Prod\_Non-Prod\_Env.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt2e09a601ddeb9295/64a662f08f332a4b6454449c/Launch_Prod_Non-Prod_Env.png` | | Launch\_Prod\_Non-Prod\_Env\_Toggle.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb2475c7ec17875a2/64a662f18f332a733a5444a0/Launch_Prod_Non-Prod_Env_Toggle.png` | | Launch\_Prod\_Non-Prod\_Domain.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blta77205f1a562324c/64a662f01f8d5a64105871e3/Launch_Prod_Non-Prod_Domain.png` | | Launch\_Prod\_Non-Prod\_DomainModal.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte676cc752a13de64/64a662f14d81434bd88fef0b/Launch_Prod_Non-Prod_DomainModal.png` | | Launch-Prod-NonProd-Deployments.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltcfd5b01a5a25bf48/6436630ecbf631109cafae8d/Launch-Prod-NonProd-Deployments.png` | | Launch\_Prod\_Non-Prod\_Env\_NonProdToggle.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt2ed933d4e776b114/64a662f14eb51c3c1035d981/Launch_Prod_Non-Prod_Env_NonProdToggle.png` | | Launch\_Env\_Var\_Navigate.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5523d390422ee656/64a65d3eb62fa40371ab8544/Launch_Env_Var_Navigate.png` | | Launch-LinkedStack-LaunchIcon.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltd6795befb5942ba3/64354575c6373410f6840530/Launch-LinkedStack-LaunchIcon.png` | | Launch-New\_Project.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt312818ae4f29de6b/643e70a6a39e8e5aa0f4588e/Launch-New_Project.png` | | Launch-LinkedStack-Connect\_n\_Import.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt17af4819d7fa38b3/6435082ceb41fa1100c83ad5/Launch-LinkedStack-Connect_n_Import.png` | | Launch-LinkedStack-Select\_Stack\_DeliveryToken.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte2e9d91734b317c0/6435082d41f63e1131dec78c/Launch-LinkedStack-Select_Stack_DeliveryToken.png` | | Launch-LinkedStack-Import\_Variables.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4490387c1d2ef2ad/6435082db2ef0d11ece9fee2/Launch-LinkedStack-Import_Variables.png` | | Launch-LinkedStack-Env\_Var\_List.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltc65752cd124d93c6/6435082dc3a87d1213a87a02/Launch-LinkedStack-Env_Var_List.png` | | Launch-LinkedStack-Deployed.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt74a4e7e884cec340/6435082d8485c010da11a929/Launch-LinkedStack-Deployed.png` | | Launch-LinkedStack-StackIntegration.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte9818b96b83a1c32/64a65eb4b7aec33465d889ad/Launch-LinkedStack-StackIntegration.png` | | Launch-LinkedStack-UpdateStack.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte023ddf17b951c76/64a65eb44eb51cb4ed35d971/Launch-LinkedStack-UpdateStack.png` | | Launch-LinkedStack-SyncStackProceed.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb1c340082f87249f/6435082c6bfe3410b96a8ea7/Launch-LinkedStack-SyncStackProceed.png` | | Launch\_-\_Projects.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4a98e187b26f92e0/643e30f71a1ec621c9be6010/Launch_-_Projects.png` | | Launch-Env\_Settings.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt4411ebf033dcd7c5/643e9879e8b191595dde432a/Launch-Env_Settings.png` | | Launch-CustomDomains-Domains.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt413d8e2c3aa082f1/64a65cb5bd5d8a4d8a721355/Launch-CustomDomains-Domains.png` | | Launch-CustomDomains-Modal.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltb55b9f822b2530db/64a65cb5f122ca8ff2e6a6e8/Launch-CustomDomains-Modal.png` | | Launch-CustomDomains-EditDelete.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt467eb1bf2091d3e4/64a65cb58f332a585b544482/Launch-CustomDomains-EditDelete.png` | | Launch-CustomDomains-SubDomain.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt7c451fd539aa8a68/64a65cb538fe4362c46ab857/Launch-CustomDomains-SubDomain.png` | | Launch-CustomDomains-SubDomain\_Modal.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt7b9dfed7c1ff9772/64a65cb58f332aab62544486/Launch-CustomDomains-SubDomain_Modal.png` | | Launch-CustomDomains-SubDomain\_Modal\_CNAME.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt1867f7794c9a2bd3/64a65cb6ade08c96c8cb1697/Launch-CustomDomains-SubDomain_Modal_CNAME.png` | | Launch-CustomDomains-SubDomains.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt63db2e44b992d86d/64a65cb6ad2e9fd93a0011b5/Launch-CustomDomains-SubDomains.png` | | Launch\_AutoRedeploy\_CMS\_Content\_CopyURL.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5812c201178618cb/64a65e74f5591f7bd0e5812f/Launch_AutoRedeploy_CMS_Content_CopyURL.png` | | Launch-Auto\_Redeploy-Webhooks.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9553633720b751f0/6434fd345a10e41114ae9343/Launch-Auto_Redeploy-Webhooks.png` | | Launch-Auto\_Redeploy-URL\_to\_Notify.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9c5c5c5e2cf1f312/6434fd3435650a1107644370/Launch-Auto_Redeploy-URL_to_Notify.png` | | Launch-Auto\_Redeploy-Save.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blte4701ca95494da8b/6434fd33aa312f114ba7dfc9/Launch-Auto_Redeploy-Save.png` | | Launch-Auto\_Redeploy-PublishEntry.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blted5a225421cef7d3/6434fd33ab116a10dd6a4253/Launch-Auto_Redeploy-PublishEntry.png` | | Launch-API-CloudFunctions.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt8e73fd8278fa8ee0/6434ec539bfbdd10ae68fbcd/Launch-API-CloudFunctions.png` | | Launch-API-CopyURL.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt04770f8bf41ae29a/6434ec5250e4c910ff39749d/Launch-API-CopyURL.png` | | Launch-PasswordProtection-EnvSettingsIcon.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5464705313e0b649/64bb45d0361d391f07947100/Launch-PasswordProtection-EnvSettingsIcon.png` | | Launch\_Password\_Protection\_Nav.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9350eca9beeee345/64bb45d01add4dd0bffbba34/Launch_Password_Protection_Nav.png` | | Launch\_Password\_Protection\_Toggle\_New.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt0c68c731c1a9346e/64c89cff0242c3ff50bb8992/Launch_Password_Protection_Toggle_New.png` | | Launch\_Password\_Protection\_UsernamePassword\_New.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5e89c769013d040c/64c89cff61d2875329856d9d/Launch_Password_Protection_UsernamePassword_New.png` | | Launch-PasswordProtection-EnvSettingsIcon.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt5464705313e0b649/64bb45d0361d391f07947100/Launch-PasswordProtection-EnvSettingsIcon.png` | | Launch\_Password\_Protection\_Nav.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt9350eca9beeee345/64bb45d01add4dd0bffbba34/Launch_Password_Protection_Nav.png` | | Launch\_Password\_Protection\_DisableToggle\_New.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt1c32c9210417675e/64c89cff385f46e1a09ed676/Launch_Password_Protection_DisableToggle_New.png` | | Launch-PasswordProtection-ModalDisable\_New.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt79018498e7c4f871/64c89cff5133eee2a6bf0bc3/Launch-PasswordProtection-ModalDisable_New.png` | | Launch\_Plugin-Project\_Type.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/blt0e0d2bc64da6923d/6437b49d1c46cc118806d761/Launch_Plugin-Project_Type.png` | | Launch\_Plugin-Redeploy.png | `https://images.contentstack.io/v3/assets/blt2d43f51baca745a8/bltac3ef4127a60dca9/6437b49d43365211f62d714a/Launch_Plugin-Redeploy.png` | ### 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 Launch | `https://www.contentstack.com/docs/developers/launch/about-launch/` | | LaunchFoundations\_L1\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt6f6d36e1296b3966/67dd8825efd8a9b4474c01b7/LaunchFoundations_L1_img-1.png` | | Gatsby | `https://www.gatsbyjs.com/` | | Gatsby Functions | `https://www.gatsbyjs.com/docs/reference/functions/getting-started/` | | DSG | `https://www.gatsbyjs.com/docs/how-to/rendering-options/using-deferred-static-generation/` | | SSR | `https://www.gatsbyjs.com/docs/reference/rendering-options/server-side-rendering/` | | sample Gatsby Starter project | `https://github.com/dhruvparekh12/gatsby-starter-default/tree/master` | | Contentstack account | `https://www.contentstack.com/login/` | | GitHub account | `https://github.com/login` | | LaunchFoundations\_L1\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc9bab43217231a30/67dd88725e486d166271b635/LaunchFoundations_L1_img-2.png` | | LaunchFoundations\_L2\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3a3a07a01cf107ec/67dd88ba4a89c31645a303d8/LaunchFoundations_L2_img-2.png` | | upload a .zip file to create your project | `https://www.contentstack.com/docs/developers/launch/import-project-using-file-upload/` | | LaunchFoundations\_L2\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt23c2d6f0918ed6da/67dd88dac5b83e670d924c6a/LaunchFoundations_L2_img-3.png` | | LaunchFoundations\_L2\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt26218f06c615abf2/67dd8908037e2b848b22dae8/LaunchFoundations_L2_img-4.png` | | LaunchFoundations\_L2\_img-5.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3a14a65a6a3491f1/67dd89233a0f3829f300ebbe/LaunchFoundations_L2_img-5.png` | | LaunchFoundations\_L2\_img-6.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5bd8c477d94338e4/67dd893917f7b453b60d022f/LaunchFoundations_L2_img-6.png` | | LaunchFoundations\_L2\_img-7.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt133667c9397e0d2f/67dd89519867252081888aca/LaunchFoundations_L2_img-7.png` | | LaunchFoundations\_L2\_img-8.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltc4746974629efa5c/67dd896ec5de53239dd2e30d/LaunchFoundations_L2_img-8.png` | | 10ac4ee7-1e0c-44eb-9079-8a0c056c3ebd-Screenshot\_from\_2023-07-19\_14-57-49.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7e674db55b69c92a/66549a48e4a7328428975b16/10ac4ee7-1e0c-44eb-9079-8a0c056c3ebd-Screenshot_from_2023-07-19_14-57-49.png` | | LaunchFoundations\_L2\_img-9.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteda28b9e44b71cd1/67dd8997c566ee6bcc5e0146/LaunchFoundations_L2_img-9.png` | | e9376604-2070-4f18-bccf-f8624ff983d3-Screenshot\_from\_2023-07-24\_18-53-49.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt42980eef00145455/66549ad46933452d03c23448/e9376604-2070-4f18-bccf-f8624ff983d3-Screenshot_from_2023-07-24_18-53-49.png` |