Skip to content

Commit

Permalink
fix: add better quickstart
Browse files Browse the repository at this point in the history
  • Loading branch information
riderx committed Jan 19, 2025
1 parent 5d2a129 commit 8651b86
Show file tree
Hide file tree
Showing 16 changed files with 558 additions and 23 deletions.
1 change: 1 addition & 0 deletions _redirects
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ docs/plugin/know-issues docs/plugin/known-issues/ 200
/sitemap.xml /sitemap-index.xml 301
/sitemap-index.xml/ /sitemap-index.xml 301
/sitemap-0.xml/ /sitemap-0.xml 301
/docs/plugin/cloud-mode/getting-started/ /docs/getting-started/quickstart 302
41 changes: 26 additions & 15 deletions astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ export default defineConfig({
status: 302,
destination: '/docs/plugin/cloud-mode/getting-started/',
},
'/docs/plugin/cloud-mode/getting-started/': {
status: 302,
destination: '/docs/getting-started/quickstart',
},
},
i18n: {
locales,
Expand Down Expand Up @@ -82,19 +86,38 @@ export default defineConfig({
},
sidebar: [
{
label: 'Home',
label: 'Welcome to Capgo',
link: '/docs/',
},
{
label: 'Getting Started',
link: '/docs/plugin/cloud-mode/getting-started/',
label: 'Quickstart',
collapsed: false,
autogenerate: { directory: 'docs/getting-started' },
},
{
label: 'Capgo CLI',
collapsed: true,
items: [
{ label: 'Commands', link: '/docs/cli/commands' },
{
label: 'Migrations',
collapsed: true,
autogenerate: { directory: 'docs/cli/migrations' },
},
],
},
{
label: 'Live Updates',
collapsed: true,
autogenerate: { directory: 'docs/live-updates' },
},
{
label: 'General Information',
link: '/docs/general-information/',
},
{
label: 'Plugin',
collapsed: true,
items: [
{ label: 'Overview', link: '/docs/plugin/overview' },
{
Expand Down Expand Up @@ -135,18 +158,6 @@ export default defineConfig({
},
],
},
{
label: 'CLI',
collapsed: true,
items: [
{ label: 'Commands', link: '/docs/cli/commands' },
{
label: 'Migrations',
collapsed: true,
autogenerate: { directory: 'docs/cli/migrations' },
},
],
},
{
label: 'Public API',
collapsed: true,
Expand Down
6 changes: 6 additions & 0 deletions src/content/docs/docs/cli/overview.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
title: Overview
draft: true
---

Overview
42 changes: 42 additions & 0 deletions src/content/docs/docs/getting-started/add-an-app.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
title: "Add an App"
description: "Add an app to your Capgo account, and install the plugin in your app"
sidebar:
order: 2
---

import { YouTube } from 'astro-embed';
import { Aside } from '@astrojs/starlight/components';

## Introduction to Capgo
<YouTube id="NzXXKoyhTIo" title="Capgo in 15 min" />

## Live updates are 3 step away

### Create your account

Visit our registration page at [https://web.capgo.app/register](https://web.capgo.app/register).

![onboarding screenshot](/onboard.webp "onboarding screenshot")

### Install capgo with the CLI

Use the Magic commands to get started

```bash
npx @capgo/cli@latest init [APIKEY]
```

This command will guide you through the setup process.

### Simply follow the prompts

In the CLI, you will be presented with a series of questions. Provide the necessary answers to complete the automated setup.

<Aside type="tip">
By following these steps, you'll be up and running in no time. If you need any further assistance during the process, our support team is here to help. Happy onboarding!
</Aside>

### Enjoy the magic of Capgo!

Test your app and learn later on how to use power features of Capgo.
83 changes: 83 additions & 0 deletions src/content/docs/docs/getting-started/deploy.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
---
title: Deploy a Live Update
sidebar:
order: 3
---
import { Steps } from '@astrojs/starlight/components';

Use Capgo's Live Updates feature to update the UI and business logic of your app remotely, in real-time. Push JS bundle updates directly to your users without going through the app store to instantly fix bugs and ship new features.

This guide assumes you've completed the [Capgo Quickstart](/docs/getting-started/quickstart) and have already:

<Steps>

1. Installed the `@capgo/capacitor-updater` SDK in your Capacitor app

2. Configured your app ID and update channel in `capacitor.config.ts`

3. Added in your code the `CapacitorUpdater.notifyAppReady()` method

</Steps>

If you haven't done those steps yet, please go back and complete the quickstart first.

## Uploading a Bundle

With the Capgo SDK installed and configured, you're ready to upload your first live update bundle:

1. Build your web assets:
```shell
npm run build
```

2. Upload the bundle to Capgo:
```shell
npx @capgo/cli@latest upload --channel=Production
```
This will upload a new bundle version to the channel specified in the command.

### Troubleshooting Uploads

If your upload fails, double check:
- Your app ID in `capacitor.config.ts` matches your app in the Capgo dashboard
- You're running the upload command from the root of your Capacitor project
- Your web assets are built and up to date

If you're still having trouble, try running with the `--tus` flag if you have low internet connection or big bundles, or reach out to Capgo support.

## Receiving an Update on a Device

Once your bundle is uploaded, you can test the live update on a device:

1. Sync your app to the device:
```shell
npx cap sync ios
```

2. Open another terminal and run the following command to check the update status:
```shell
npx @capgo/cli@latest app debug
```

3. Run your app locally:
```shell
npx cap run ios
```
Or open the iOS/Android project in Xcode/Android Studio and do a native run.

4. Keep the app open for about 30 seconds to allow the update to download in the background.

5. The logs will take a few seconds to update and show the update status.

6. Close and reopen the app. You should see your live update applied!

Refer back to the [Capgo Quickstart](/docs/getting-started/quickstart#receiving-a-live-update-on-a-device) for more details on testing live updates.

## Next Steps

Congrats on deploying your first live update with Capgo! 🎉

To learn more, review the rest of the [Capgo Live Updates documentation](/docs/live-updates). Some key topics to check out next:
- [Targeting Updates with Channels](/docs/live-updates/channels)
- [Customizing Update Behavior](/docs/live-updates/update-behavior)
- [Live Update Rollbacks](/docs/live-updates/rollbacks)
47 changes: 47 additions & 0 deletions src/content/docs/docs/getting-started/quickstart.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
---
title: Overview
sidebar:
order: 1
next: false
prev: false
---

import { Card, CardGrid, Steps } from '@astrojs/starlight/components';


The quickstart tutorial will walk you through the key concepts of Capgo! Concepts that will be explored include:

<Steps>

1. Adding an app to your Capgo account

2. Integrating Capgo with your CI/CD

3. Triggering bundle upload on Capgo by pushing commits

4. Configuring and customizing the Capgo bundle publishing

5. Setting up your app to enable live updates via Capgo

6. Deploying live updates to your app from Capgo

</Steps>

Simply follow the guide step-by-step, or navigate directly to the documentation for the component that interests you.


<CardGrid stagger>
<a href="/docs/getting-started/add-an-app/" ><Card title="Start the Tutorial" icon="rocket" >
Follow the quickstart tutorial and get up and running with Capgo in no time!
</Card></a>
<a href="/docs/getting-started/deploy/"><Card title="Easy to integrate" icon="pencil">
Integrate Capgo with your CI/CD and trigger bundle uploads on Capgo by pushing commits.
</Card></a>
<a href="/docs/getting-started/live-updates"><Card title="Live Update Docs" icon="setting">
Update your app remotely in real-time without app store delays.
</Card></a>
<a href="/docs/getting-started/trouble-shooting"><Card title="Trouble Shooting" icon="open-book">
Common issues and how to solve them.
</Card></a>
</CardGrid>

124 changes: 124 additions & 0 deletions src/content/docs/docs/getting-started/troubleshooting.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
---
title: Troubleshooting
sidebar:
order: 5
next: false
prev: false
---

Here are some common issues you might encounter while using Capgo and how to resolve them.

## Live Updates

### Debugging Updates

If you're encountering issues with live updates, the Capgo debug command is a helpful tool for troubleshooting. To use it:

1. Run the following command in your project directory:
```shell
npx @capgo/cli@latest app debug
```

2. Launch your app on a device or emulator and perform the action that should trigger an update (e.g. reopening the app after uploading a new bundle).

3. Watch the output of the debug command. It will log information about the update process, including:
- When the app checks for an update
- If an update is found and what version it is
- Download and installation progress for the update
- Any errors that occur during the update process

4. Use the debug logs to identify where the issue is occurring. For example:
- If no update is found, double check that your bundle was uploaded successfully and the app is configured to use the correct channel.
- If the update downloads but doesn't install, make sure you've called `CapacitorUpdater.notifyAppReady()` and that the app was fully closed and reopened.
- If you see an error message, look up that specific error in the Capgo docs or reach out to support for help.

The debug command is especially useful for identifying issues with the update download and installation process. If the logs show the expected update version was found but not ultimately applied, focus your troubleshooting on the steps after the download.

### Debugging with Native Logs

In addition to the Capgo debug command, the native logs on Android and iOS can provide valuable troubleshooting information, especially for issues on the native side of the update process.

#### Android Logs

To access the Android logs:

1. Connect your device or start your emulator
2. Open Android Studio and select "View > Tool Windows > Logcat"
3. In the Logcat window, filter the logs to just your app's process by selecting it from the dropdown at the top
4. Look for any lines that include `Capgo` to find the SDK logs

Alternatively, you can use the `adb logcat` command and grep for `Capgo` to filter the logs.

The Capgo SDK will log key events during the update process, such as:
- When an update check is initiated
- If an update is found and what version it is
- When the update download starts and completes
- When the update installation is triggered
- Any errors that occur during the native update steps

Common Android-specific issues you might see in the logs include:
- Network connectivity problems preventing the update download
- File permissions errors when saving or reading the update bundle
- Out of storage space for the update bundle
- Failure to restart the app after the update is installed

#### iOS Logs

To access the iOS logs:

1. Connect your device or start your simulator
2. Open Xcode and go to "Window > Devices and Simulators"
3. Select your device and click on "Open Console"
4. In the console output, look for any lines that include `Capgo` to find the SDK logs

You can also use the `log stream` command in the terminal and grep for `Capgo` to filter the logs.

Similar to Android, the Capgo SDK will log key iOS-side events:
- Update check initiation and result
- Download start, progress, and completion
- Installation trigger and result
- Any errors during the native update process

iOS-specific issues you might identify in the logs include:
- SSL certificate problems when downloading the update
- App transport security blocking the update download
- Insufficient storage space for the update bundle
- Failure to properly extract or apply the update bundle

On both platforms, the native logs provide a lower-level view into the update process, with more details on the native implementation. They are especially useful for identifying issues that occur outside of the Capgo JavaScript layer.

When troubleshooting a tricky live update problem, it's a good idea to capture both the Capgo debug logs and the native logs for a comprehensive picture of what's happening. The two logs together will give you the best chance of identifying and resolving the issue.

### Upload failures

If your bundle upload fails, double check:
- Your app ID in `capacitor.config.ts` matches your app in the Capgo dashboard
- You're running the upload command from the root of your Capacitor project
- Your web assets are built and up to date

If you're still having trouble, try running with the `--tus` flag if you have low internet connection or big bundles, or reach out to Capgo support.

### Updates not applying

If you've uploaded a bundle but aren't seeing the changes on your device:
- Make sure you've called `CapacitorUpdater.notifyAppReady()` in your app code as shown in the [quickstart](/docs/getting-started/quickstart)
- Check that your device is connected to the internet and the Capgo debug logs show the update was downloaded
- Try fully closing and reopening the app, as updates are only applied on a fresh launch
- Look for any errors in the native logs that might indicate a problem applying the update

Refer to the [deploying live updates](/docs/getting-started/deploy) guide for more details on the update process. If you're still stuck, use the `npx @capgo/cli@latest app debug` command and native logs to get more visibility into what's happening.

## SDK Installation

If you're having trouble installing the Capgo SDK, make sure:
- Your app is using a supported version of Capacitor (4.0 or newer)
- You've followed the [quickstart](/docs/getting-started/quickstart) steps in order, including syncing your app after installing the SDK

## CI/CD Integration

For issues with triggering Capgo uploads from your CI/CD pipeline:
- Double check your Capgo authentication token is set up correctly
- Make sure you're running the upload command after your web assets are built
- Check that the upload command is using the correct channel name for your target environment

See the [CI/CD integration](/docs/cicd-integration) docs for more troubleshooting tips. You can also use the `npx @capgo/cli@latest app debug` command to confirm if your CI/CD-triggered updates are being received by the app.
Loading

0 comments on commit 8651b86

Please sign in to comment.