Skip to content

Commit 809358b

Browse files
devalogdevalog
authored
Add revamped Typescript Quickstart page (#4)
Expanded and clarified typescript-specific version of https://buildwithfern.com/learn/sdks/guides/generate-your-first-sdk.
1 parent 2c3767f commit 809358b

File tree

3 files changed

+205
-3
lines changed

3 files changed

+205
-3
lines changed

‎fern/.DS_Store‎

0 Bytes
Binary file not shown.

‎fern/products/.DS_Store‎

0 Bytes
Binary file not shown.

‎fern/products/sdks/pages/typescript/quickstart.mdx‎

Lines changed: 205 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,210 @@
11
---
2-
title: Typescript Quickstart
2+
title: TypeScript Quickstart
33
description: Get started quickly with the Fern Typescript SDK.
44
---
55

6-
# Typescript Quickstart
6+
<Warning title='Schedule a Demo'>
7+
Generating SDKs often requires understanding the state of your OpenAPI Specification as well as
8+
your specific requirements. For the ideal experience, we **strongly recommend** scheduling a
9+
[demo](https://buildwithfern.com/contact) or [emailing us](mailto:[email protected]) to get started.
10+
</Warning>
711

8-
Follow these steps to quickly get up and running with the Fern Typescript SDK.
12+
Generate a TypeScript SDK by following the instructions on this page.
13+
14+
<Steps>
15+
### Install the Fern CLI
16+
17+
Run the following command to install the CLI tool or update it to the latest version:
18+
19+
```bash
20+
npm install -g fern-api
21+
```
22+
23+
### Initialize the Fern Folder
24+
25+
You can use either the OpenAPI definition, AsyncAPI definition, or Fern Definition to generate your SDK.
26+
27+
<AccordionGroup>
28+
<Accordion title="Option 1: OpenAPI">
29+
Initialize the Fern folder using your OpenAPI Specification. Run one of the following commands based on your spec's location.
30+
31+
<Tip>
32+
Fern can handle both JSON and YML formats for OpenAPI specifications, and the --openapi flag accepts either format, so you can use whichever format your API spec is available in.
33+
</Tip>
34+
35+
<Info>
36+
`--organization <YourOrganization>` configures your organization name in `fern.config.json`. This is required in order to successfully generate your SDK.
37+
</Info>
38+
39+
<CodeBlocks>
40+
41+
<CodeBlock title="Local file">
42+
```bash
43+
fern init --openapi path/to/openapi.yml --organization <YourOrganization>
44+
```
45+
</CodeBlock>
46+
47+
<CodeBlock title="Web-hosted file">
48+
```bash
49+
fern init --openapi https://api.example.com/openapi.yml --organization <YourOrganization>
50+
```
51+
</CodeBlock>
52+
53+
</CodeBlocks>
54+
55+
This creates a `fern` folder in your current directory with the OpenAPI Specification. The exact folder structure might look different depending on your initial input files.
56+
57+
```bash
58+
fern/
59+
├─ fern.config.json # root-level configuration
60+
└─ api/ # your API
61+
├─ generators.yml # generators you're using
62+
└─ openapi/
63+
├─ openapi.yml # API-level configuration
64+
```
65+
</Accordion>
66+
<Accordion title="Option 2: AsyncAPI">
67+
Initialize the Fern folder using your AsyncAPI Specification. Run one of the following commands based on your spec's location.
68+
69+
<Tip>
70+
Fern can handle both JSON and YML formats for AsyncAPI specifications, and the --openapi flag accepts either format, so you can use whichever format your API spec is available in.
71+
</Tip>
72+
73+
<Info>
74+
`--organization <YourOrganization>` configures your organization name in `fern.config.json`. This is required in order to successfully generate your SDK.
75+
</Info>
76+
77+
<CodeBlocks>
78+
79+
<CodeBlock title="Local file">
80+
```bash
81+
fern init --asyncapi path/to/asyncapi.yml --organization <YourOrganization>
82+
```
83+
</CodeBlock>
84+
85+
<CodeBlock title="Web-hosted file">
86+
```bash
87+
fern init --asyncapi https://api.example.com/asyncapi.yml --organization <YourOrganization>
88+
```
89+
</CodeBlock>
90+
91+
</CodeBlocks>
92+
93+
This creates a `fern` folder in your current directory with the AsyncAPI Specification. The exact folder structure might look different depending on your initial input files.
94+
95+
```bash
96+
fern/
97+
├─ fern.config.json # root-level configuration
98+
└─ api/ # your API
99+
├─ generators.yml # generators you're using
100+
└─ openapi/
101+
├─ openapi.yml # API-level configuration
102+
```
103+
</Accordion>
104+
<Accordion title="Option 3: Fern Definition">
105+
106+
1. Initialize the Fern folder using the Fern Definition by running the following command:
107+
108+
```bash
109+
fern init --organization <YourOrganization>
110+
```
111+
112+
<Info>
113+
`--organization <YourOrganization>` configures your organization name in `fern.config.json`. This is required in order to successfully generate your SDK.
114+
</Info>
115+
116+
This creates a `fern` folder in your current directory with the Fern Definition.
117+
118+
```bash
119+
fern/
120+
├─ fern.config.json # root-level configuration
121+
├─ generators.yml # generators you're using
122+
└─ definition/
123+
├─ api.yml # API-level configuration
124+
└─ imdb.yml # endpoints, types, and errors
125+
```
126+
127+
<Note>
128+
`imdb.yml` contains an example movies API. If you’re just generating an SDK for test purposes, you can leave this file as it is. To generate an SDK for your own API instead of the example movies API, replace `imdb.yml` with your own endpoints, types, and errors before proceeding with the rest of this page.
129+
</Note>
130+
131+
{/* TODO: show want generators.yml looks like, link out to configuration.md */}
132+
133+
1. Add the config option `outputSourceFiles: true` to `generators.yml`. This ensures your SDK contains `.ts` files instead of compiled output.
134+
135+
```yaml {11-12}
136+
# yaml-language-server: $schema=https://schema.buildwithfern.dev/generators-yml.json
137+
default-group: local
138+
groups:
139+
local:
140+
generators:
141+
- name: fernapi/fern-typescript-node-sdk
142+
output:
143+
location: local-file-system
144+
path: ../sdks/typescript
145+
version: 1.10.1
146+
config:
147+
outputSourceFiles: true
148+
```
149+
150+
151+
152+
153+
</Accordion>
154+
</AccordionGroup>
155+
156+
### Pass `fern check`
157+
158+
Run `fern check` to ensure that your API Definition is valid. If there are any errors,
159+
fix them before proceeding.
160+
161+
<Note>
162+
If you're using an OpenAPI Specification, check out all of our
163+
[supported extensions](/learn/api-definition/openapi/extensions).
164+
</Note>
165+
166+
### Add the SDK generator
167+
168+
Add the TypeScript SDK generator:
169+
170+
```bash
171+
fern add fern-typescript-node-sdk --group sdk
172+
```
173+
174+
This command adds the following to `generators.yml`:
175+
176+
```yaml
177+
sdk:
178+
generators:
179+
- name: fernapi/fern-typescript-node-sdk
180+
version: 1.10.1
181+
output:
182+
location: local-file-system
183+
path: ../sdks/typescript
184+
```
185+
### Generate the SDK
186+
187+
Generate the SDK:
188+
189+
```bash
190+
fern generate --group sdk
191+
```
192+
193+
This creates a `sdks` folder in your current directory. The resulting folder structure looks like this:
194+
195+
196+
```bash
197+
fern/ # created in step 1
198+
sdks/ # created by fern generate --group sdk
199+
├─ typescript
200+
├─ cjs/
201+
├─ api/
202+
├─ core/
203+
└─ errors/
204+
└─ esm/
205+
├─ api/
206+
├─ core/
207+
└─ errors/
208+
```
209+
210+
</Steps>

0 commit comments

Comments
 (0)