Capacitorで__CAPGO_KEEP_1__プロジェクトを変換

Introduction

Bolt.new is an innovative AI-powered development platform that can generate full-stack web applications using various frameworks like React, Vue, Svelte, and more. But what if you want to bring your Bolt.new creation to mobile devices? In this comprehensive tutorial, we’ll show you how to export your Bolt.new project and transform it into native mobile apps using Capacitor.

Bolt.newプロジェクトがReact、Vue、またはサポートされている別のフレームワークを使用している場合、このガイドはカメラ、ストレージ、プッシュ通知などのデバイス機能にアクセスできるネイティブのiOSおよびAndroidアプリを作成するのに役立ちます。

開始する前に: 要件 & 時間

予想時間: 完全なセットアップに 3-5 時間

システム要件:

iOS開発: macOS 12.0+ (必須、ワークアラウンドなし)搭載のMac
Android開発: Windows/Mac/LinuxのどのOSでも
フリースペース: 開発ツール用に20-30GB
iOS開発: 8GB RAMの最低要件、16GBの推奨

予算が必要:

Apple Developer: 1年あたり$99 (iOS App Store向け)
Google Play: 1回の$25の費用
Cursor Pro: $20/月 (任意、開発を高速化)

インストールするもの:

Node.js & npm
Xcode (Macのみ、iOS向け)
Android Studio (Android向け)
さまざまなコマンドラインツール

なぜBolt.newアプリをモバイルに変換するのですか?

クロスプラットフォームのアクセス: AI生成アプリをモバイルアプリストアにデプロイ
: カメラ、GPS、ファイルシステム、他にネイティブ機能を使用: ネイティブコンテナがウェブビューよりもパフォーマンスが良いため
: ネイティブストレージソリューションを使用してオフラインで作業: ネイティブプッシュ通知サポートを使用してユーザーをエンゲージ
Various command-line toolsなぜBolt.newアプリをモバイルに変換するのですか?
クロスプラットフォームのアクセス: AI生成アプリをモバイルアプリストアにデプロイ

Why Capacitor Over Expo?

モバイル開発のオプションを検討している場合、Capacitor は、特にウェブファースト開発の場合、エクスポに比べて大きな利点を提供します。

一つのコードベース、3つのプラットフォーム:既存のReact、Next.js、またはVue.jsウェブサイトは、ゼロの変換が必要なiOS、Android、そしてウェブアプリケーションになります。
再構築が必要ありません:Bolt.newプロジェクトをそのまま取り上げることができます - エクスポのように別のフレームワークに書き直す必要はありません。
ウェブファーストの真実なアプローチ:エクスポはモバイルファーストでウェブは汚いので、Capacitor はウェブを第一級の市民として扱います。
シームレスな開発:ウェブ開発の熟練したツールとワークフローを引き続き使用できます。
フレームワークの自由:ウェブフレームワーク (React、Vue、Svelte、Next.js、など) と互換性があります - エクスポのように React Native にロックされていません。

The Key Difference:

Capacitor: Build your website → Add mobile support (same codebase)
__CAPGO_KEEP_0__: Build for mobile → Try to make web work (different approach, often clunky)

Since your Bolt.new project is already a web application, Capacitor lets you extend it to mobile without changing a single line of code.

Capgo

Get Cursor - Your AI-Powered Code Editor

Get Cursor - Your AI-Powered Capgo Editor To work efficiently with your Bolt.new project, we’ll use, an intelligent code editor that simplifies development:

, an intelligent Capgo editor that simplifies development: カーソル.sh と、利用しているOSのインストーラーを取得してください
インストールプロセスを実行してください
カーソルが準備できたら、カーソルを起動してください

カーソルを起動してください

カーソルを最大限に活用するには、初期設定が必要です:

カーソルプロを検討してください

- フリーベース版は機能しますが、プロ($20/月)を購入すると、以下の機能が利用可能になります: 無制限のAIアシスタンス
- プレミアムモデル(GPT-4、Claude)
- 即時レスポンス
- Consider Getting Cursor Pro for more features and better performance.
- プレミアムサポート
設定アクセス と Command+, (Mac) または Ctrl+, (Windows)

カーソル設定

AI機能を有効化 - AIアシスタンスが有効になっていることを確認してください:

モデルを許可する

AIモデルを選択 - クラウドまたはGPT-4を推奨します:

カーソルモデルを選択

実行コマンドの有効化 - Let Cursorが自動でコマンドを実行するようにします:

コマンドの実行を許可する

ステップ 2: Bolt.newプロジェクトをエクスポートする

さて、Bolt.newプロジェクトをCursorに取り込んでみましょう。

プロジェクトをダウンロードする

ブラウザでBolt.newプロジェクトを表示する
Boltのインターフェースで ダウンロード または エクスポート ボタンを探します

__CAPGO_KEEP_0__に含まれるZIPファイルをダウンロードしてください
__CAPGO_KEEP_0__をコンピューター上のフォルダに展開してください

Bolt.new プロジェクトファイル

Cursorで開く

__CAPGO_KEEP_0__を展開した後、Cursorでプロジェクトを開いてください

Cursorで使用 File > Open Folder Cursorで
__CAPGO_KEEP_0__を選択してください
Cursorはプロジェクトを読み込んでいます

Cursorで開く

代替: GitHubからクローン

Bolt.newをGitHubに接続した場合に

Press Shift+Command+P (Mac)または Shift+Ctrl+P (Windows)を押す
「Git: Clone」を検索する
リポジトリのURLを入力する
保存する場所を選択する

Cursorでクローンする

ステップ 2: プロジェクトのフレームワークを特定する

Bolt.newは、異なるフレームワークを使用してプロジェクトを生成できます。まず、どのフレームワークを使用しているかを特定しましょう。

package.jsonを確認する

を開く package.json プロジェクトが使用するフレームワークを確認するには:

__CAPGO_KEEP_0__

Bolt.new で使用できるパッケージ.json の検査

Bolt.new で使用できるプロジェクトの種類:React + Vite
: 最も一般的な設定Vue + Vite
: Vue.js アプリケーションSvelte
: Svelte アプリケーションNext.js
: フルスタックの React アプリケーションPlain JavaScriptアプリ

Step 3: 開発ツールのインストール

オプション A: Cursor AIが全てを管理する

Enter Command+K (Mac)で Ctrl+K (Windows)で

Cursor AIに次のリクエストを入力してください:

Install all necessary development tools including Node.js, then install project dependencies and start the dev server

Cursor AIは自動的に:

Node.jsとnpmのインストールが必要な場合はインストール
macOS用のHomebrewの設定
プロジェクトのすべての依存関係のインストール
開発サーバーの起動

Homebrewをインストール

オプション B: 手動インストールプロセス

AIアプローチが問題を発生させる場合、または手動コントロールを好む場合は:

最初にCursorのターミナルを開きます （Mac）または Shift+Command+T （Windows） Shift+Ctrl+T macOSユーザー向け:

Windowsユーザー向け:

# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via Homebrew
brew install node

# Move to your project folder
cd your-bolt-project

# Install project packages
npm install

# Launch development server
npm run dev

Node.jsインストーラーをダウンロードする

nodejs.org Complete the installation wizard
with
Cursorのターミナル内で:

cd your-bolt-project
npm install
npm run dev

Bolt.newアプリケーションがローカルで実行中

あなたのBolt.newアプリケーションは、通常 http://localhost:5173 Viteプロジェクトの場合

ステップ 4: モバイル用ビルドの設定

あなたの設定はあなたのプロジェクトのフレームワークに基づいて変わります。

オプション A: カーソル AI を使用した自動設定

カーソル AI に設定を任せる:

Configure my Bolt.new project for mobile deployment with proper build settings

カーソルはあなたのフレームワークを検出して適切な設定を適用します。

オプション B: フレームワークごとの手動設定

React + Vite プロジェクトの場合:

編集 vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
})

For Vue + Vite Projects:

を変更する vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
})

For Next.js Projects

に追加する package.json scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "static": "next build && next export"
  }
}

を更新する next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

Step 5: 作品をビルドする

Bolt.newアプリのプロダクションビルドの作成にまで

オプション A: Cursor AIでビルドする

Cursorに尋ねるだけ

Build my Bolt.new project for production deployment

Cursorは、フレームワークに応じて適切なビルドコマンドを実行します。

オプション B: 手動でビルドする

Viteベースのプロジェクト (React/Vue/Svelte):

npm run build

__CAPGO_KEEP_0__

Next.jsアプリケーション:

npm run static

ビルドの成功を確認

正しい出力を生成したことを確認してください:

Viteプロジェクト: 以下のフォルダを確認してください dist directory
Next.jsプロジェクト: 以下のフォルダを確認してください out directory

Bolt.newビルド出力

Step 6: Capacitor をあなたの Bolt.new プロジェクトに追加する

ウェブアプリケーションをネイティブモバイルアプリケーションに変換しましょう。

オプション A: カーソル AI を使用したクイックセットアップ

押してください Command+K (Mac) または Ctrl+K (Windows) を押して、以下のことを要求してください:

Add Capacitor to my project and set up iOS and Android platforms

カーソル AI はすべてのセットアッププロセスを管理します。

オプション B: ステップバイステップのマニュアルセットアップ

Capacitor のコマンドラインツールをインストールする

npm install -D @capacitor/cli

Capacitor プロジェクトを初期化する

npx cap init

Capacitor の初期化 (Bolt)

あなたは以下の情報を入力する必要があります:

アプリ名: Bolt.new プロジェクト名を入力してください
Bundle ID: 以下の形式で入力してください com.yourcompany.yourapp

手動セットアップを続行 - 必要なパッケージをインストール:

npm install @capacitor/core @capacitor/ios @capacitor/android

モバイルプラットフォームのサポートを追加:

npx cap add ios
npx cap add android

Capacitor プラットフォームが Bolt に追加されました

何が起こったのですか?

Bolt.new プロジェクトの構造は次のようになりました:

your-bolt-project/
├── src/           # Your app source (React/Vue/etc)
├── public/        # Static files  
├── dist/          # Build output (Vite)
├── out/           # Build output (Next.js)
├── ios/           # iOS Xcode project (NEW!)
├── android/       # Android Studio project (NEW!)
├── capacitor.config.ts  # Mobile configuration
└── package.json   # Dependencies

重要な注意事項:

Web code は次の場所に残っています - ここで編集してください src/ - ここで編集してください
ios/ そして、生成される - 編集しないでください android/ 変更後は、常に実行してください
各プラットフォームには独自のビルドプロセスがあります npx cap sync
ステップ 7: __CAPGO_KEEP_0__ を構成する

Capacitor を自分のフレームワークに合わせて構成する時間です。

Time to configure Capacitor for your specific framework.

カーソルの助けを求めます:

オプション B: 手動構成

Configure capacitor.config.ts for my Bolt.new project build output

Viteベースのアプリケーション用:

Next.jsアプリケーション用:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

ステップ 8: ビルドと同期

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

各プラットフォームには独自のビルドプロセスがあります

モバイルデプロイ用にアプリを準備します。

オプション A: カーソル AI を使用

カーソルに伝えます:

Build my project and sync it with Capacitor for mobile deployment

オプション B: 手動プロセス

次のコマンドをシーケンスで実行します:

npm run build
npx cap sync

Capacitor sync Bolt complete

ステップ 9: ネイティブ IDE を開く

アプリのネイティブ開発環境にアクセスします。

iOS 開発

オプション A: カーソル AI を介して

Open my iOS project in Xcode

オプション B: ターミナルコマンド

npx cap open ios

Xcode を使用して Bolt プロジェクトを開く

Android 開発

オプション A: カーソル AI を使用

Open my Android project in Android Studio

オプション B: ターミナルコマンド

npx cap open android

Android Studio で Bolt プロジェクトを開く

ステップ 10: モバイルアプリをビルドして実行する

iOS で実行

Xcode の設定 (初回のみ)

ターゲットを選択:
- プレイボタン横のデバイスセレクターをクリック
- テスト用: iPhone シミュレータを選択
- 実機用: iPhone を USB で接続
Code 証明書を設定する:
- 左側のサイドバーでプロジェクト名をクリックしてください
- 「署名と機能」タブに移動してください
- 「署名を自動的に管理する」機能を有効にします
- Apple IDでサインインしてください
- 注意: 実機はApple Developer Program ($99/年)が必要です
アプリをビルドしてください:
- ▶️ プレーヤーボタンをクリックしてください
- 最初のビルド: 5-10 分 (長く待ってください!)
- 上部の進行状況バーを確認してください

iOSのトラブルシューティング:

「アカウントが見つかりません」: Xcode で Apple ID を追加 > 設定 > アカウント
“Failed to build”: ビルドフォルダをクリーン (Shift+Command+K) して再試行
シミュレータの問題: シミュレータを再起動 (デバイス > 再起動)

iOS 上の Bolt アプリ

Android 上の実行

Android Studio の初回設定

SDK の設定 (自動)
- Android Studio は欠落しているコンポーネントを検出します
- 「SDK をインストールする」ボタンをクリックしてください
- このプロセスは ~2-3GB のファイルをダウンロードします
仮想デバイスを作成:
- AVD マネージャーを開く (ツールバーの電話アイコン)
- 「+ 仮想デバイスを作成」ボタンをクリック
- 「Pixel 6」を選択 (良いデフォルト)
- システムイメージをダウンロードするように求められたら
- デフォルトのオプションでセットアップを完了
アプリを実行:
- ドロップダウンからエミュレータを選択
- 緑の▶️実行ボタンをクリック
- 最初のビルド: 10-15 分
- エミュレータは自動的に起動します

Androidのトラブルシューティング:

「Gradleの同期が失敗しました」: 保存されたファイル > キャッシュを無効化
遅いエミュレータ: AVD設定でハードウェアアクセレレーションを有効化
ビルドエラー: Gradleを更新するための提案された修正を適用

BoltアプリがAndroidで実行中

検証チェックリスト

ビルドが成功したら、確認してください:

✅ アプリがクラッシュせずに起動する ✅ Bolt.newのコンテンツが正しく表示される ✅ ボタンとインタラクションが正常に動作する ✅ コンソールに赤いエラーが表示されない

まだ問題が残っている場合? エラーメッセージは、ほとんどの場合、正確に何が間違っているかを教えてくれるので、きちんと読んでください。

ステップ 11: ライブリロードを有効にする (開発用)

ホットリロードを使用して開発ワークフローを高速化します。

オプション A: カーソルを使用した自動セットアップ

カーソルを尋ねる:

Enable live reload for my Capacitor app development

カーソルは、すべてを自動で設定します。

オプション B: 手動設定

ローカル IP アドレスを取得する:

# macOS
ipconfig getifaddr en0

# Windows  
ipconfig

更新 capacitor.config.ts:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist', // or 'out' for Next.js
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
    cleartext: true,
  },
};

export default config;

設定を適用:

npx cap copy

ライブリロードが有効です - Bolt

ステップ 12: ネイティブ機能を追加する

__CAPGO_KEEP_0__を搭載したBolt.newアプリを、デバイス固有の機能で強化します。

オプションA: AIパワード統合

Cursorからのリクエスト:

Add native share, camera, and geolocation features to my Bolt.new app

Cursorはプラグインをインストールし、統合codeを作成します。

オプションB: マニュアルプラグインインストール

人気のnativeプラグインをインストール:

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

Reactプロジェクト用のユーティリティファイルを作成:

// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export const shareContent = async (title, text, url) => {
  await Share.share({
    title,
    text,
    url,
    dialogTitle: 'Share with friends',
  });
};

export const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  return image;
};

export const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

コンポーネントで使用:

// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';

function MyComponent() {
  const handleShare = () => {
    shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
  };

  const handleCamera = async () => {
    try {
      const photo = await takePicture();
      console.log('Photo taken:', photo);
    } catch (error) {
      console.error('Camera error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleShare}>Share App</button>
      <button onClick={handleCamera}>Take Photo</button>
    </div>
  );
}

export default MyComponent;

Cursor AIでSync:

マニュアルコマンド:

Sync my native feature changes to all platforms

ネイティブ機能を追加したBolt

npx cap sync

__CAPGO_KEEP_0__

Step 13:

App Icons and Splash Screens

Option A: Cursor AI Setup

Request:

Create app icons and splash screens for my mobile app

Option B: Manual Asset Creation

Get the assets tool:

npm install -D @capacitor/assets

Prepare your graphics:
- Create assets/icon.png (1024x1024px)
- Create assets/splash.png (2732x2732px)
Generate all sizes automatically:

npx capacitor-assets generate

__CAPGO_KEEP_0__

最適化ビルド

Vite プロジェクトの場合、ビルドを最適化してください:

// vite.config.js
export default defineConfig({
  plugins: [react()], // or vue()
  base: './',
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

最終ビルド

オプション A: カーソル AI でビルド

Create the final production build and prepare for app store deployment

オプション B: 手動ビルドプロセス

npm run build
npx cap sync
npx cap copy

トラブルシューティングの一般的な問題

フレームワーク固有の問題

React/Vite プロジェクト

が設定されていることを確認してください base: './' Vite の設定ファイルで
すべての import が相対パスを使用していることを確認してください
確認してください dist __CAPGO_KEEP_0__フォルダが正しく生成されていることを確認してください

Vue Projects

モバイル用途のために、Vue Routerがハッシュモードを使用していることを確認してください
アセットが正しく参照されていることを確認してください
モバイルコンテキストでコンポーネントのラジーロードが正常に動作していることを確認してください

Next.js Projects

静的エクスポートが正しく設定されていることを確認してください
静的コンテキストでダイナミックインポートが正常に動作していることを確認してください
APIルートが使用されていないことを確認してください (または適切に処理されていることを確認してください)

ビルドエラー

ビルドエラーが発生した場合

node_modulesをクリアし、再インストールしてください:

rm -rf node_modules package-lock.json
npm install

Bolt.newプロジェクトのモバイル互換性のための依存関係を確認してください
モバイルデプロイ用にすべての相対パスが正しいことを確認してください

Assetsが欠けている

アセットの読み込みに関する問題の場合:

すべてのアセットがpublicフォルダ内にあることを確認してください
画像やファイルの相対パスを使用してください
ビルドプロセスが必要なすべてのアセットをコピーしていることを確認してください

まとめ

あなたはBolt.newプロジェクトをネイティブモバイルアプリケーションに成功的に変換しました。AIで生成されたウェブアプリは今、以下のことができます:

iOSおよびAndroidデバイス上でネイティブに実行できます
デバイスの機能、カメラ、GPS、ストレージなどにアクセスできます
アプリストアで配布
最適化されたモバイルユーザー体験を提供

次のステップ

ライブアップデート: Implement Capgo 即時オーバー・ザ・エア更新用
分析: モバイル分析を追加してユーザーの行動を追跡
パフォーマンス: アプリのモバイルパフォーマンスを監視して最適化
テスト: __CAPGO_KEEP_0__でさまざまなデバイスと画面サイズをテストしてください。

Bolt.newの新しい作成は、モバイルエコシステムに準備されています!

リソース

Capgoがモバイルアプリにリアルタイム更新を提供する方法を学びましょう。 __CAPGO_KEEP_0__の無料アカウントに登録してください。今日。

Bolt.newプロジェクトをCapacitorでネイティブモバイルアプリに変換し続けましょう。

Bolt.newを使用している場合 CapacitorのBolt.newプロジェクトをネイティブモバイルアプリに変換する ネイティブプラグインの作業計画を立てるには、__CAPGO_KEEP_0__と接続する Capgo プラグインディレクトリ Capgo プラグインディレクトリの製品ワークフロー Capacitor プラグインによってCapgo Capacitor プラグインによってCapgoの実装詳細プラグインの追加または更新プラグインの追加または更新の実装詳細 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフロー、そして Capgoネイティブビルド Capgoネイティブビルドの製品ワークフロー.

Transform Your Bolt.new Project into Native Mobile Apps with Capacitor

Introduction

開始する前に: 要件 & 時間

なぜBolt.newアプリをモバイルに変換するのですか?

Why Capacitor Over Expo?

Capgo

Get Cursor - Your AI-Powered Code Editor

カーソルを最大限に活用するには、初期設定が必要です:

ステップ 2: Bolt.newプロジェクトをエクスポートする

プロジェクトをダウンロードする

Cursorで開く

代替: GitHubからクローン

ステップ 2: プロジェクトのフレームワークを特定する

package.jsonを確認する

Step 3: 開発ツールのインストール

オプション A: Cursor AIが全てを管理する

オプション B: 手動インストールプロセス

ステップ 4: モバイル用ビルドの設定

オプション A: カーソル AI を使用した自動設定

オプション B: フレームワークごとの手動設定

For Next.js Projects

Step 5: 作品をビルドする

オプション A: Cursor AIでビルドする

オプション B: 手動でビルドする

ビルドの成功を確認

Step 6: Capacitor をあなたの Bolt.new プロジェクトに追加する

オプション A: カーソル AI を使用したクイックセットアップ

オプション B: ステップバイステップのマニュアルセットアップ

何が起こったのですか?

Capacitor を自分のフレームワークに合わせて構成する時間です。

カーソルの助けを求めます:

Viteベースのアプリケーション用:

各プラットフォームには独自のビルドプロセスがあります

オプション A: カーソル AI を使用

オプション B: 手動プロセス

ステップ 9: ネイティブ IDE を開く

iOS 開発

Android 開発

ステップ 10: モバイル アプリをビルドして実行する

iOS で実行

Xcode の設定 (初回のみ)

Android 上の実行

Android Studio の初回設定

検証チェックリスト

ステップ 11: ライブ リロードを有効にする (開発用)

オプション A: カーソルを使用した自動セットアップ

オプション B: 手動設定

ステップ 12: ネイティブ機能を追加する

オプションA: AIパワード統合

オプションB: マニュアルプラグインインストール

コンポーネントで使用:

Cursor AIでSync:

Step 13:

App Icons and Splash Screens

最適化ビルド

最終ビルド

トラブルシューティングの一般的な問題

フレームワーク固有の問題

React/Vite プロジェクト

Vue Projects

Next.js Projects

ビルドエラー

Assetsが欠けている

まとめ

次のステップ

リソース

Bolt.newプロジェクトをCapacitorでネイティブモバイルアプリに変換し続けましょう。

ステップ 10: モバイルアプリをビルドして実行する

ステップ 11: ライブリロードを有効にする (開発用)