Skip to content

Commit 66d1fe4

Browse files
jordanstephensjordanstephens
committed
use a grid for "next steps" after "getting started"
1 parent 9fa32c3 commit 66d1fe4

File tree

5 files changed

+264
-26
lines changed

5 files changed

+264
-26
lines changed

‎docs/getting-started.mdx‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
---
2+
sidebar_position: 200
3+
title: Getting Started
4+
description: Get started with Defang.
5+
---
6+
import DocCardList from "@docusaurus/theme-classic/lib/theme/DocCardList";
7+
8+
import Tabs from '@theme/Tabs';
9+
import TabItem from '@theme/TabItem';
10+
11+
# Getting Started
12+
13+
## Install the Defang CLI
14+
15+
Defang doesn't require installing anything in your cloud, but you will need to install the [open source](https://github.com/DefangLabs/defang) Defang command line interface (CLI) to interact with your Defang resources and account.
16+
17+
We offer a few different ways to install the Defang CLI. You can use a shell script, Homebrew, Winget, or you can download the binary directly.
18+
19+
20+
<Tabs>
21+
<TabItem value="bash" label="Shell">
22+
**Using a shell script**
23+
24+
You can install the Defang CLI using a shell script. Run the following command in your terminal:
25+
26+
```bash
27+
eval "$(curl -fsSL s.defang.io/install)"
28+
```
29+
30+
The script will try to download the appropriate binary for your operating system and architecture, add it to `~/.local/bin`, and add `~/.local/bin` to your `PATH` if it's not already there, with your permission. If you do not provide permission it will print an appropriate instruction for you to follow to add it manually. You can also customize the installation directory by setting the `INSTALL_DIR` environment variable before running the script.
31+
</TabItem>
32+
<TabItem value="homebrew" label="Homebrew" default>
33+
**Using Homebrew**
34+
35+
You can easily install the Defang CLI using [Homebrew](https://brew.sh/). Run the following command in your terminal:
36+
37+
```bash
38+
brew install DefangLabs/defang/defang
39+
```
40+
</TabItem>
41+
<TabItem value="winget" label="Winget">
42+
**Using Winget**
43+
44+
On Windows, you can install the Defang CLI using `winget`. Run the following command in your terminal:
45+
46+
```powershell
47+
winget install defang
48+
```
49+
</TabItem>
50+
<TabItem value="nix" label="Nix">
51+
**Using Nix**
52+
53+
```bash
54+
nix profile install github:DefangLabs/defang#defang-bin --refresh
55+
```
56+
</TabItem>
57+
<TabItem value="direct" label="Direct Download">
58+
**Direct Download**
59+
60+
You can find the latest version of the Defang CLI on the [latest release page](https://github.com/DefangLabs/defang/releases/latest). Just download the appropriate binary for your operating system and architecture, and put it somewhere in your `PATH`.
61+
</TabItem>
62+
</Tabs>
63+
64+
## Generate a project
65+
66+
```
67+
$ defang generate nodejs-http
68+
```
69+
70+
You should see the following prompt:
71+
```
72+
? What folder would you like to create the project in?
73+
```
74+
Type in the name of the folder you'd like to use for your new project and press ENTER.
75+
76+
I'll type `"welcome-to-defang"`. Now, you'll see the following output:
77+
78+
```
79+
? What folder would you like to create the project in? welcome-to-defang
80+
* Fetching sample from the Defang repository...
81+
* Writing files to disk...
82+
- .github/
83+
- .github/workflows/
84+
- .github/workflows/deploy.yaml
85+
- README.md
86+
- app/
87+
- app/Dockerfile
88+
- app/main.js
89+
- compose.yaml
90+
* Code generated successfully in folder welcome-to-defang
91+
92+
Check the files in your favorite editor.
93+
To deploy the service, do `cd welcome-to-defang` and
94+
95+
defang compose up
96+
```
97+
98+
Now, navigate to the folder you just created:
99+
100+
```
101+
$ cd welcome-to-defang
102+
```
103+
104+
You can open the folder in your favorite editor and see the files that were generated for you:
105+
* The `app` folder contains the code for your service.
106+
* The `Dockerfile` is used to build the container image for your service.
107+
* The `compose.yaml` file is used to define the services you want to deploy.
108+
109+
## Deploy to the playground
110+
111+
Go back to your shell and type the following:
112+
113+
```
114+
$ defang up
115+
```
116+
117+
If you have not used defang before, you'll be prompted to log in.
118+
119+
```
120+
! Please log in to continue.
121+
Please visit http://127.0.0.1:49154 and log in. (Right click the URL or press ENTER to open browser)
122+
```
123+
124+
:::info
125+
To learn more about how authentication works in defang, check out the [authenticating page](/docs/concepts/authentication).
126+
:::
127+
128+
When you do this, you should see something similar to the output below:
129+
130+
```
131+
* Uploading build context for app
132+
* Deploying service app
133+
* Monitor your services' status in the defang portal
134+
- https://portal.defang.dev/service/app
135+
* Tailing logs for deployment ID o59k89vk3qc8 ; press Ctrl+C to detach:
136+
* Press V to toggle verbose mode
137+
2024-09-19T10:50:53.572443-07:00 cd Update started for stack jordanstephens-prod1
138+
2024-09-19T10:51:05.536299-07:00 cd Update succeeded in 11.99769745s ; provisioning...
139+
2024-09-19T10:51:39.419693-07:00 app Server running at http://0.0.0.0:3000/
140+
* Service app is in state DEPLOYMENT_COMPLETED and will be available at:
141+
- https://jordanstephens-app--3000.prod1.defang.dev
142+
* Done.
143+
```
144+
145+
Now we can go to [https://portal.defang.dev/service/app](https://portal.defang.dev/service/app) to see our service listed in the defang portal.
146+
147+
![screenshot of the defang portal](/img/getting-started-portal.png)
148+
149+
## Next Steps
150+
151+
Congratulations! You've successfully deployed your first service with Defang. Now, where do you go from here?
152+
153+
Defang supports various ways of creating and deploying services to the cloud. The following tutorials dive into each one in more detail:
154+
155+
<DocCardList
156+
items={[
157+
{
158+
type: "link",
159+
href: "/docs/tutorials/deploy-to-your-cloud",
160+
label: "Deploy to your own cloud",
161+
description: "When you're ready for production",
162+
},
163+
{
164+
type: "link",
165+
href: "/docs/tutorials/generate-new-code-using-ai",
166+
label: "Generate a Project with AI",
167+
description: "Use defang to generate and deploy a new project",
168+
},
169+
{
170+
type: "link",
171+
href: "/docs/category/cli",
172+
label: "Explore the Defang CLI",
173+
description: "Learn more about the Defang CLI",
174+
},
175+
{
176+
type: "link",
177+
href: "/docs/intro/what-is-defang",
178+
label: "Learn more about Defang",
179+
description: "What is Defang and how does it work?",
180+
},
181+
{
182+
type: "link",
183+
href: "/docs/tutorials/deploy-using-pulumi",
184+
label: "Deploy using Pulumi",
185+
description: "Deploy using Pulumi",
186+
},
187+
{
188+
type: "link",
189+
href: "/docs/tutorials/monitoring-your-services",
190+
label: "Monitor your services",
191+
description: "Learn how to monitor your services with Defang",
192+
}
193+
]}
194+
/>
195+
196+
Choose the direction that seems the most interesting. If you have any questions, join the [Defang Discord](https://discord.gg/defang) and we'll be happy to help you out.

‎docs/intro/intro.mdx‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ title: Overview
44
description: Overview of Defang, a radically simpler way to develop, deploy, and debug production-ready cloud apps.
55
---
66

7-
import IntroGrid from "../../src/components/IntroGrid"
7+
import DocCardList from "@docusaurus/theme-classic/lib/theme/DocCardList";
88

99
# &nbsp;
1010

@@ -15,5 +15,32 @@ import IntroGrid from "../../src/components/IntroGrid"
1515
Defang is a radically simpler way for developers to develop, deploy, and debug their cloud applications. Defang enables you to easily author cloud applications in any language, build and deploy to the cloud with a single command, and iterate quickly with AI-assisted tooling.
1616
</p>
1717
<h2>Getting Started</h2>
18-
<IntroGrid />
18+
<DocCardList
19+
items={[
20+
{
21+
type: "link",
22+
href: "/docs/intro/what-is-defang",
23+
label: "Learn more about Defang",
24+
description: "What is Defang and how does it work?",
25+
},
26+
{
27+
type: "link",
28+
href: "/docs/category/cli",
29+
label: "CLI Reference",
30+
description: "Use the defang CLI to deploy your app",
31+
},
32+
{
33+
type: "link",
34+
href: "/docs/tutorials/deploy-to-playground",
35+
label: "Try Defang",
36+
description: "Deploy to our free playground",
37+
},
38+
{
39+
type: "link",
40+
href: "/docs/tutorials/deploy-to-your-cloud",
41+
label: "Deploy to your own cloud",
42+
description: "When you're ready for production",
43+
},
44+
]}
45+
/>
1946
</div>

‎docs/tutorials/monitoring-your-services.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
---
2+
sidebar_position: 400
3+
title: Monitoring Your Services
4+
description: How to monitoring services deployed with Defang
5+
---
6+
7+
# How To Monitor Your Services With Defang
8+
9+
By default, all the output (stdout and stderr) from your app is logged. You can view these logs in real-time. You can view logs for all your services, one service, or even one specific deployment of a service.
10+
11+
- From the CLI:
12+
13+
```tsx
14+
defang tail --name service1
15+
```
16+
17+
- From the Defang Portal:
18+
19+
[https://portal.defang.dev/](https://portal.defang.dev/)
20+
21+
22+
:::info
23+
* To learn more about observability in Defang, check out the [observability page](../concepts/observability.md).
24+
* Note that the Defang Portal only displays services deployed to Defang Playground.
25+
:::

‎docs/tutorials/updating-your-services.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
sidebar_position: 500
3+
title: Updating Your Services
4+
description: How to update services deployed with Defang
5+
---
6+
7+
# How To Update Your Services With Defang
8+
9+
To update your app (for example, updating the base image of your container, or making changes to your code) you can run the `defang compose up` command and it will build and deploy a new version with zero downtime. Your current version of the service will keep running and handling traffic while the new version is being built and deployed. Only after the new version passes the health checks and accepts traffic will the older version be stopped.
10+
11+
:::info
12+
If you are using [compose files](../concepts/compose.md) to define your services, you can add/remove services, make changes to code, etc. When you run `defang compose up`, the update will be diffed against the current state and any necessary changes will be applied to make the current state match the desired state.
13+
:::

‎src/components/IntroGrid.tsx‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,30 +3,7 @@ import DocCardList from "@docusaurus/theme-classic/lib/theme/DocCardList";
33
import type {PropSidebarItem} from '@docusaurus/plugin-content-docs';
44

55
const items: PropSidebarItem[] = [
6-
{
7-
type: "link",
8-
href: "/docs/intro/what-is-defang",
9-
label: "Learn more about Defang",
10-
description: "What is Defang and how does it work?",
11-
},
12-
{
13-
type: "link",
14-
href: "/docs/category/cli",
15-
label: "CLI Reference",
16-
description: "Use the defang CLI to deploy your app",
17-
},
18-
{
19-
type: "link",
20-
href: "/docs/tutorials/deploy-to-playground",
21-
label: "Try Defang",
22-
description: "Deploy to our free playground",
23-
},
24-
{
25-
type: "link",
26-
href: "/docs/tutorials/deploy-to-your-cloud",
27-
label: "Deploy to your own cloud",
28-
description: "When you're ready for production",
29-
},
6+
307
]
318

329
export default function() {

0 commit comments

Comments
 (0)