Skip to content

Commit c711e55

Browse files
authored
Add info on setting up GitHub repos and configuring GitHub Actions for npm publishing (#203)
1 parent 093548f commit c711e55

File tree

6 files changed

+218
-74
lines changed

6 files changed

+218
-74
lines changed

fern/products/sdks/fern-folder.mdx

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -30,24 +30,9 @@ in different languages and [augmenting them with custom code](/sdks/overview/cus
3030
{/* <Markdown src="/products/sdks/snippets/option-3-asyncapi.mdx"/> */}
3131
</AccordionGroup>
3232

33-
### Generate an SDK in your desired language
34-
35-
<CardGroup cols={3}>
36-
<Card title="TypeScript" icon={<img src="./images/icons/ts-light.svg" alt="TypeScript logo" className="h-6 w-6" noZoom />} href="/sdks/generators/typescript/quickstart">
37-
</Card>
38-
<Card title="Python" icon={<img src="./images/icons/python-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/python/quickstart">
39-
</Card>
40-
<Card title="Go" icon={<img src="./images/icons/go-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/go/quickstart">
41-
</Card>
42-
<Card title="Java" icon={<img src="./images/icons/java-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/java/quickstart">
43-
</Card>
44-
<Card title=".NET" icon={<img src="./images/icons/csharp-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/csharp/quickstart">
45-
</Card>
46-
<Card title="PHP" icon={<img src="./images/icons/php-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/php/quickstart">
47-
</Card>
48-
<Card title="Ruby" icon={<img src="./images/icons/ruby-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/php/quickstart">
49-
</Card>
50-
</CardGroup>
33+
### Set up GitHub
34+
35+
Now, you're ready to [set up your GitHub repositories](/sdks/overview/github).
5136

5237
### Augment your SDK with custom code
5338

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
---
2+
title: Structure your GitHub repositories
3+
description: Set up GitHub repositories for your SDKs
4+
---
5+
6+
Before generating SDKs with Fern, you'll need to set up the proper GitHub
7+
repository structure to house your API definitions and SDK code so it's
8+
intuitive for you and your users to access, maintain, and update code.
9+
10+
<Steps>
11+
## Structuring your top-level repository
12+
13+
1. Identify or create a top-level GitHub repository where you want all of your
14+
SDK and API code to live.
15+
1. Install the [Fern GitHub App](https://github.com/apps/fern-api) on the
16+
top-level repository and all SDK repositories. Select **Configure**, then
17+
scroll down to **Repository Access**. Select **Only select repositories** and
18+
in the dropdown select the repository for your SDK. Click **Save**.
19+
20+
For example, your basic GitHub file structure should look something like this:
21+
22+
```
23+
├─ company-repo # Top-level repo for all SDKs
24+
├─ fern/
25+
├─ apis/
26+
├─ sdks/
27+
└── generators.yml # Contains settings for all SDKs
28+
```
29+
Your `generators.yml` file will contain a group for each of your SDKs. Each group points
30+
to the GitHub repository for the relevant SDK.
31+
32+
For example, the `group` for a TypeScript SDK might look like this:
33+
34+
```yaml title="generators.yml"
35+
ts-sdk:
36+
generators:
37+
- name: fernapi/fern-typescript-sdk
38+
version: 2.6.3
39+
github:
40+
repository: your-organization/your-typescript-repo
41+
```
42+
43+
For additional examples, see Cohere's [`generators.yml`
44+
file](https://github.com/cohere-ai/cohere-developer-experience/blob/23d6c541a01eb6b54dd9bb3588c805bb0e307713/fern/apis/sdks/generators.yml)
45+
and Vapi's [`generators.yml`
46+
file](https://github.com/VapiAI/docs/blob/9c674c2b16ba03e864e26673c5290c88048c9a7a/fern/apis/api/generators.yml).
47+
48+
<Info>You can also additionally configure the `github` section to whether Fern
49+
should commit and release, create a pull request, or push code to a branch when
50+
you make changes to your SDK code. See [GitHub
51+
Configuration](/sdks/reference/generators-yml#github-configuration) for more
52+
details. </Info>
53+
54+
## Structuring SDK-specific repositories
55+
56+
1. Create a new GitHub repository called `company-<language>` (or something
57+
similar) for each of your SDKs, if you haven't done so already.
58+
1. Install the [Fern GitHub App](https://github.com/apps/fern-api) on the
59+
top-level repository and all SDK repositories. Select **Configure**, then
60+
scroll down to **Repository Access**. Select **Only select repositories** and
61+
in the dropdown select the repository for your SDK. Click **Save**.
62+
63+
64+
The repository structure for a specific SDK should look similar to this:
65+
66+
```{6-11}
67+
├─ company-repo # Top-level repo for all SDKs
68+
├─ fern/
69+
├─ apis/
70+
├─ sdks/
71+
└── generators.yml # Contains settings for all SDKs
72+
├─ typescript-sdk-repo # Repository for a TypeScript SDK
73+
├─ .github/workflows/ # Contains GitHub Actions for publishing to package repositories, etc.
74+
├─ scripts/
75+
├─ src/
76+
├─ tests/
77+
└── .fernignore # Lists files that Fern shouldn't modify
78+
├─ python-sdk-repo
79+
└── go-sdk-repo
80+
```
81+
82+
Fern generates most of the SDK files listed in this example repository (`scripts/`, `src/`, `tests`,
83+
`.fernignore`, etc.), including any custom code you added. You have to manually set up `.github/workflows` to execute actions, like publishing SDK versions to a package repository.
84+
85+
For additional examples, see Cohere's [Python SDK repository](https://github.com/cohere-ai/cohere-python) and [Vapi's TypeScript SDK repository](https://github.com/VapiAI/server-sdk-typescript).
86+
87+
## Generate an SDK in your desired language
88+
89+
Once you've set up your GitHub repository structure, you can proceed with generating SDKs in your desired languages.
90+
91+
<CardGroup cols={3}>
92+
<Card title="TypeScript" icon={<img src="./images/icons/ts-light.svg" alt="TypeScript logo" className="h-6 w-6" noZoom />} href="/sdks/generators/typescript/quickstart">
93+
</Card>
94+
<Card title="Python" icon={<img src="./images/icons/python-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/python/quickstart">
95+
</Card>
96+
<Card title="Go" icon={<img src="./images/icons/go-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/go/quickstart">
97+
</Card>
98+
<Card title="Java" icon={<img src="./images/icons/java-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/java/quickstart">
99+
</Card>
100+
<Card title=".NET" icon={<img src="./images/icons/csharp-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/csharp/quickstart">
101+
</Card>
102+
<Card title="PHP" icon={<img src="./images/icons/php-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/php/quickstart">
103+
</Card>
104+
<Card title="Ruby" icon={<img src="./images/icons/ruby-light.svg" className="h-6 w-6" noZoom />} href="/sdks/generators/php/quickstart">
105+
</Card>
106+
</CardGroup>
107+
108+
</Steps>
109+
49.3 KB
Loading

fern/products/sdks/overview/typescript/publishing-to-npm.mdx

Lines changed: 94 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -11,52 +11,28 @@ you'll have a versioned package published on npm.
1111
<img src="assets/npm-packages.png" alt="Versioned package published on npm" />
1212
</Frame>
1313

14-
<Markdown src="/products/sdks/snippets/setup-fern-folder-callout.mdx"/>
14+
<Info>
15+
This page assumes that you have:
1516

16-
## Set up your GitHub integration
17+
* An initialized `fern` folder on your local machine. See [Set up the `fern`
18+
folder](/sdks/overview/quickstart).
19+
* A GitHub repository for your TypeScript SDK. See [Set up your GitHub structure](/sdks/overview/github).
20+
* A TypeScript generator group in `generators.yml`. See [TypeScript
21+
Quickstart](quickstart#add-the-sdk-generator).
1722

18-
1. Create a new GitHub repository called `company-typescript` (or something similar) for your SDK, if you haven't done so already.
19-
1. Install the [Fern GitHub App](https://github.com/apps/fern-api): Select **Configure**, then scroll down to **Repository Access**. Select **Only select repositories** and in the dropdown select the repository for your SDK. Click **Save**.
20-
23+
</Info>
2124

2225
## Configure `generators.yml`
2326

2427
<Steps>
2528

26-
<Step title="Run `fern add <generator>`">
27-
28-
Navigate to your `generators.yml` on your local machine. Your `generators.yml` lives inside of your `fern` folder and contains all the configuration for your Fern generators.
29-
30-
Add a new generator to `generators.yml`:
31-
32-
33-
```bash
34-
fern add fern-typescript-sdk --group ts-sdk
35-
```
36-
37-
Once the command completes, you'll see a new group created in your `generators.yml`:
38-
39-
```yaml {3-9}
40-
groups:
41-
...
42-
ts-sdk:
43-
generators:
44-
- name: fernapi/fern-typescript-sdk
45-
version: <Markdown src="/snippets/typescript-sdk-version.mdx"/>
46-
output:
47-
location: local-file-system
48-
path: ../sdks/typescript
49-
```
50-
51-
</Step>
52-
5329
<Step title="Configure `output` location">
5430

55-
Next, change the output location in `generators.yml` from `local-file-system` (the default) to `npm` to indicate that Fern should publish your package directly to the npm registry:
31+
In the `group` for your TypeScript SDK, change the output location in from `local-file-system` (the default) to `npm` to indicate that Fern should publish your package directly to the npm registry:
5632

5733
```yaml {6-7}
5834
groups:
59-
ts-sdk:
35+
ts-sdk: # Group name for your TypeScript SDK
6036
generators:
6137
- name: fernapi/fern-typescript-sdk
6238
version: <Markdown src="/snippets/typescript-sdk-version.mdx"/>
@@ -106,7 +82,7 @@ groups:
10682

10783
<Step title="Add repository location">
10884

109-
Add the path to your GitHub repository to `generators.yml`:
85+
Add the path to your GitHub repository to `generators.yml`, if you haven't already:
11086

11187
```yaml {11-12}
11288
groups:
@@ -118,15 +94,15 @@ groups:
11894
location: npm
11995
package-name: your-package-name
12096
config:
121-
namespaceExport: your-client-name
97+
namespaceExport: YourClientName
12298
github:
12399
repository: your-org/company-typescript
124100
```
125101
126102
</Step>
127103
</Steps>
128104

129-
## Set up npm publishing authentication
105+
## Generate an npm token
130106

131107
<Steps>
132108

@@ -184,6 +160,79 @@ groups:
184160
185161
</Step>
186162

163+
</Steps>
164+
165+
## Configure npm authentication
166+
167+
<AccordionGroup>
168+
<Accordion title="Option 1: Configure authentication via GitHub Actions">
169+
170+
Use [GitHub Actions](https://docs.github.com/en/actions/get-started/quickstart) to automatically publish new SDK versions to npm when you push code changes.
171+
172+
<Steps>
173+
174+
<Step title="Navigate to Actions in Settings">
175+
176+
Open your Fern repository in GitHub. Click on the **Settings** tab in your repository. Then, under the **Security** section, open **Secrets and variables** > **Actions**.
177+
178+
<Frame>
179+
<img src="assets/github-secret.png" alt="Adding GitHub Repository Secret" />
180+
</Frame>
181+
182+
You can also use the url `https://github.com/<your-repo>/settings/secrets/actions`.
183+
184+
</Step>
185+
186+
<Step title="Add secret for your npm Token">
187+
188+
1. Select **New repository secret**.
189+
1. Name your secret `NPM_TOKEN`.
190+
1. Add the corresponding token you generated above.
191+
1. Click **Add secret**.
192+
193+
<Frame>
194+
<img src="assets/npm-token-secret.png" alt="NPM_TOKEN secret" />
195+
</Frame>
196+
197+
</Step>
198+
199+
<Step title="Allow GitHub to run workflows">
200+
201+
Change your workflow permissions to allow GitHub to run workflows:
202+
203+
1. Click on the **Settings** tab in your repository.
204+
1. Under the **Code and automation** section, navigate to **Actions** > **General**.
205+
1. Under **Actions permissions**, select **Allow all actions and reusable workflows**.
206+
1. **Save** your settings. Now GitHub can run the actions you configure.
207+
208+
</Step>
209+
<Step title="Add token to `generators.yml`">
210+
211+
Add `token: ${NPM_TOKEN}` to `generators.yml` to tell Fern to use the `NPM_TOKEN` environment variable (which you just configured in your GitHub repo) for authentication when publishing to the npm registry.
212+
213+
```yaml {9}
214+
groups:
215+
ts-sdk:
216+
generators:
217+
- name: fernapi/fern-typescript-sdk
218+
version: <Markdown src="/snippets/typescript-sdk-version.mdx"/>
219+
output:
220+
location: npm
221+
package-name: name-of-your-package
222+
token: ${NPM_TOKEN}
223+
config:
224+
namespaceExport: YourClientName
225+
github:
226+
repository: your-org/your-repository
227+
```
228+
229+
When you regenerate your release, Fern will automatically create a workflow in your repository called `.github/workflows/ci.yml` that will automatically publish your release to npm. For an example, see Vapi's [npm publishing GitHub Action](https://github.com/VapiAI/server-sdk-typescript/blob/main/.github/workflows/ci.yml)
230+
</Step>
231+
</Steps>
232+
233+
</Accordion>
234+
<Accordion title="Option 2: Configure via environment variables">
235+
<Steps>
187236
<Step title="Configure npm authentication token">
188237

189238
Add `token: ${NPM_TOKEN}` to `generators.yml` to tell Fern to use the `NPM_TOKEN` environment variable for authentication when publishing to the npm registry.
@@ -199,20 +248,11 @@ groups:
199248
package-name: name-of-your-package
200249
token: ${NPM_TOKEN}
201250
config:
202-
namespaceExport: your-client-name
251+
namespaceExport: YourClientName
203252
github:
204253
repository: your-org/your-repository
205254
```
206255
</Step>
207-
208-
</Steps>
209-
210-
## Release your SDK to NPM
211-
212-
At this point, you're ready to generate a release for your SDK.
213-
214-
<Steps>
215-
216256
<Step title="Set npm environment variable">
217257

218258
Set the `NPM_TOKEN` environment variable on your local machine:
@@ -222,8 +262,13 @@ groups:
222262
```
223263

224264
</Step>
265+
</Steps>
266+
</Accordion>
267+
</AccordionGroup>
268+
269+
225270

226-
<Step title="Generate your release">
271+
## Release your SDK to npm
227272

228273
Regenerate your SDK and publish it on npm:
229274

@@ -232,8 +277,4 @@ groups:
232277
```
233278
Local machine output will verify that the release is pushed to your
234279
repository and tagged with the version you specified. Log back into npm and
235-
navigate to **Packages** to see your new release.
236-
237-
</Step>
238-
239-
</Steps>
280+
navigate to **Packages** to see your new release.

fern/products/sdks/overview/typescript/quickstart.mdx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,19 @@ description: Get started quickly with the Fern TypeScript SDK.
55

66
Generate a TypeScript SDK by following the instructions on this page.
77

8-
<Markdown src="/products/sdks/snippets/setup-fern-folder-callout.mdx"/>
8+
<Info>
9+
This page assumes that you have:
10+
11+
* An initialized `fern` folder on your local machine. See [Set up the `fern`
12+
folder](/sdks/overview/quickstart).
13+
* A GitHub repository for your TypeScript SDK. See [Set up your GitHub repositories](/sdks/overview/github).
14+
</Info>
915

1016
<Steps>
1117

1218
<Markdown src="/products/sdks/snippets/pass-fern-check.mdx"/>
1319

14-
### Add the SDK generator
20+
## Add the SDK generator
1521

1622
Run the following command to add the TypeScript SDK generator to `generators.yml`:
1723

@@ -37,7 +43,7 @@ This command adds the following `group` to `generators.yml`:
3743
location: local-file-system
3844
path: ../sdks/typescript
3945
```
40-
### Generate the SDK
46+
## Generate the SDK
4147
4248
Run the following command to generate your SDK:
4349

fern/products/sdks/sdks.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,9 @@ navigation:
77
- page: Quickstart
88
path: ./fern-folder.mdx
99
slug: quickstart
10+
- page: GitHub Setup
11+
path: ./github-setup.mdx
12+
slug: github
1013
- page: Adding Custom Code
1114
path: ./custom-code.mdx
1215
slug: custom-code

0 commit comments

Comments
 (0)