Added 1-Click Deploy tutorial

docs/concepts/configuration.md

@@ -44,6 +44,10 @@ Use the `defang config` command of the Defang CLI to manage the values.
 You can find a sample of how to set sensitive config values [here](https://github.com/DefangLabs/samples/tree/main/samples/nodejs-openai).
 :::
 
+:::info
+Note that if you are using the [1-Click Deploy](/docs/tutorials/using-one-click-deploy) option, you can set sensitive config values as secrets in your GitHub repository and the action will automatically deploy them for you.
+:::
+
 ## Interpolation
 
 Environment variables are set within the `environment` section of a service in a `compose.yaml` file. Any variables declared here will become available within the service container.

docs/providers/playground.md

@@ -4,7 +4,7 @@ description: The Defang Playground is a free tier that allows you to experiment
 sidebar_position: 0000
 ---
 
-The Defang Playground is a free tier that allows you to experiment with Defang. The Playground is a shared environment that should not be used to run production workloads. The Playground is a great way to get started with Defang using "1-click deploy" or to experiment with the Defang CLI.
+The Defang Playground is a free tier that allows you to experiment with Defang. The Playground is a shared environment that should not be used to run production workloads. The Playground is a great way to get started with Defang. You can even use [1-Click Deploy](/docs/tutorials/using-one-click-deploy) to try it out quickly or you can get started with the [Defang CLI](/docs/getting-started).
 
 This page highlights architectural considerations when deploying to the Playground and any differences you might encounter when deploying to the Playground versus deploying to your own cloud account.
 

docs/tutorials/adding-custom-one-click-deploy.md

@@ -0,0 +1,155 @@
+---
+title: Adding a Custom 1-Click Deploy
+sidebar_position: 800
+description: Add a custom 1-Click Deploy button to deploy your own app. 
+---
+
+# Adding a Custom 1-Click Deploy
+
+This tutorial will show you how to add a custom Defang 1-Click Deploy button to deploy your own app to Defang Playground. 
+
+:::info
+This page focuses on adding 1-Click Deploy to any app that is not from [our list of samples](https://defang.io/#samples). We have a separate tutorial on [how to use 1-Click Deploy](/docs/tutorials/using-one-click-deploy) for Defang's pre-made samples, which is meant for new users. 
+:::
+
+<!-- 
+0. have a project ready, 
+1. get the deploy.yaml action (and set configs as needed)
+2. get the compose.yaml for project and put in root folder
+3. click "template repo" in settings github
+4. get the url (encoded version) of this template repo ready for making a new 1-click deployment instance
+    https://portal.defang.dev/redirect?url=<encoded url>&name=your-project-name
+    this goes thru portal in order for the person deploying to get logged into defang
+    https://www.urlencoder.io/ can use this encoder
+5. paste it into the readme/button 
+-->
+
+
+## Step 1 - Have an App Ready
+
+The button we will be creating in this tutorial will allow any user to deploy your app to their Defang account. If your app is ready to be deployed with Defang (i.e. has a valid `compose.yaml` file), you can skip this step. 
+
+If not, you can either [manually write one](/docs/concepts/compose):
+```yaml
+services:
+  service-example:
+    image: nginx:latest # replace with the image or build for your app
+  ports: 
+    - mode: ingress # specify ports to expose
+      target: 8080
+      published: 8080
+
+```
+
+Or, you can generate a new app using the command:
+
+```
+defang generate
+```
+
+:::info
+Make sure your `compose.yaml` file is in the root folder of your project.
+:::
+
+It may be helpful to have a `README.md` file, or a location to paste your 1-Click Deploy link. 
+
+## Step 2 - Copy the GitHub Workflow
+
+In your project, add a new folder named `.github`, then add a folder `workflows` inside it, and copy the entire GitHub Workflow `deploy.yaml` file from [here](https://github.com/DefangLabs/samples/blob/main/starter-sample/.github/workflows/deploy.yaml) into the `workflows` folder. 
+
+If your app does not have any [configuration](/docs/concepts/configuration) needed (e.g. API keys, passwords, etc.), you can remove the corresponding lines as indicated in the file. 
+
+You should have a `.yaml` file similar to the one below:
+```yaml
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    environment: playground
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+    - name: Checkout Repo
+      uses: actions/checkout@v4
+
+    - name: Deploy
+      uses: DefangLabs/[email protected]
+```
+
+
+## Step 3 - Use a Template GitHub Repository
+
+You have the option of using Defang's template repo or your own template GitHub Repo for this step. There is no difference in end result, but it may be easier to use Defang's template repo so that you do not have to create your own.
+
+### Option 1 - Use an Existing Template Repo
+
+1. Click the link to [Defang's 1-Click Template Repo](https://github.com/DefangLabs/1-click-template), or open an existing template repo if you have one.  
+2. Click the dropdown menu next to the green "Use this template" button near the top right corner, then click "Create a new repository":
+
+![use-this-template](/img/custom-one-click-tutorial/use-this-template.png)
+
+4. You will be taken to a page similar to the one shown below. Then, enter a name for your repository and click the green "Create repository" button at the bottom.
+
+![create-a-new-repo](/img/custom-one-click-tutorial/create-a-new-repo.png)
+
+5. Now that you've created a new repository from a template repo, you can move onto the next step, which is getting the encoded URL.
+
+### Option 2 - Manually Set Up a Template Repo
+
+1. Create a new repository on GitHub. 
+2. Go to the repository's "Settings", seen near the right on the top bar. 
+3. Select the "Template Repository" box to turn your repo into a template repo, as seen below:
+
+![select-template-repo-box](/img/custom-one-click-tutorial/select-template-repo-box.png)
+
+4. Go back to this repository's home page and follow the instructions in Option 1, skipping the first step.
+
+## Step 4 - Get the Encoded URL
+
+Now that you've created a new repository from a template repo, you will need the encoded version of the URL. This is necessary because it is used as a redirect for the 1-Click Deploy link. 
+
+1. Copy the URL of your new repository's homepage (not the template repository's homepage). It should look something like the following:
+```
+https://github.com/<your-github-username>/<your-project-here>
+```
+2. You can go online and paste the URL from the step above into a URL encoder tool of your choice. You should end up with an encoded URL, similar to the one shown below:
+
+```
+https%3A%2F%2Fgithub.com%2F<your-github-username>%2F<your-project-here>
+```
+
+## Step 5 - Create the 1-Click Deploy Link
+
+Finally, you will need to format the 1-Click Deploy Link as `https://portal.defang.dev/redirect?url=` + your encoded URL. This ensures that the user can get [logged in](/docs/concepts/authentication/) to Defang before they get redirected to clone your app for deployment. 
+
+
+:::tip
+Optionally, you can add `&name=<your-project-here>` to the end of the link if you'd like to suggest a name for the user to use for their deployment.
+:::
+
+The finished link should look similar to the one below:
+```
+https://portal.defang.dev/redirect?url=https%3A%2F%2Fgithub.com%2F<your-github-username>%2F<your-project-here>&name=<your-project-here>
+```
+
+
+Now you have a link for anyone to deploy your app to Defang, with just 1 click! 
+
+
+### Examples
+For example, you can add it as a link in a Markdown file:
+```
+[1-Click Deploy Link](https://portal.defang.dev/redirect?url=<your-encoded-url>&name=<your-project-here>)
+```
+Or perhaps you can add it to a button with your own styling:
+```
+[![1-click-deploy-button](https://defang.io/deploy-with-defang.png)](https://portal.defang.dev/redirect?url=<your-encoded-url>&name=<your-project-here>)
+```

docs/tutorials/using-one-click-deploy.md

@@ -0,0 +1,42 @@
+---
+title: Using 1-Click Deploy
+sidebar_position: 800
+description: Use 1-Click Deploy to easily deploy a sample to the Defang Playground. 
+---
+
+# Using 1-Click Deploy
+
+This tutorial will show you how to use Defang 1-Click Deploy to deploy a sample to the Defang Playground. 
+
+The 1-Click Deploy button is intended to be a quickstart way for new users to deploy to the [Defang Playground](/docs/concepts/defang-playground) with no prior installation of the CLI needed. 
+
+:::info
+To access the full range of features provided by Defang, we recommend using the [Defang CLI](/docs/getting-started).
+:::
+
+## Step 1 - Choose a Sample
+Head to our [list of samples](https://defang.io/#samples) and click a sample you want to deploy. Then, click on the button that says "1-Click Deploy".
+
+Alterntively, you can find the "1-Click Deploy" button located in the `README.md` file of each sample's repository. 
+
+## Step 2 - Allow Permissions
+
+After you've clicked, you will be prompted to use GitHub to log in. Once you see a "Create a Repository" page appear, allow the sample repository to get cloned into your GitHub account. 
+
+## Step 3 - Wait for Deployment to Complete
+
+A Github action workflow will automatically start running to install Defang and deploy the sample to the Defang Playground. If you wish to, you can see this by going into the "Actions" tab in your GitHub repository. 
+
+You can view the status of your deployment in the [Defang Portal](https://portal.defang.dev/), or by downloading the [Defang CLI](/docs/getting-started).  
+
+:::tip
+Defang has a tutorial on how you can [monitor your services](/docs/tutorials/monitoring-your-services). 
+:::
+
+:::info
+If you decide to make a commit later to a repository created from 1-Click Deploy, then the project will automatically get deployed again to Defang Playground.
+:::
+
+### Configuration in 1-Click Deploy
+
+If the sample you chose requires setting configuration, such as API keys, you can set sensitive config values as secrets in your GitHub repository and the GitHub action will automatically deploy those values for you.