Frontend と Backend のセットアップ

single command で application の frontend と backend を作成・実行します

⏱ 2:41

frontend と backend を setup すると、pre-configured default を含む完全な実行可能 project structure が作成され、すぐに custom logic と user experience の構築を開始できます。

Frontend と Backend を Setup する理由

frontend と backend component の両方を setup すると、application に合わせた custom experience を構築できます。

creation script（以下を参照）は、pre-configured default を使用して両 component を生成するため、追加 setup なしで直ちに deploy できます。

• Frontend: Squid Client SDK を使用して、exact need に適合する personalized user interface を作成します。
• Backend: custom business logic、security rule、third-party integration、automated workflow など、Squid Backend SDK を使用して advanced functionality を実装します。

前提条件

開始前に、以下を確認してください。

• Node.js が install 済みであること（version 16 以降を推奨）
• npm または yarn package manager
• Squid CLI - npm を使用して install できます。

npm install -g @squidcloud/cli

permission error が発生した場合は、permission 修正に関する npm 公式 guideを参照してください。

Frontend と Backend を初期化する

1. Application Overview page に移動します。

2. Backend Project section を見つけます。

3. Initialize Project を click し、Backend and Frontend を選択します。

4. Frontend と Backend project の両方を生成する command を copy します。

5. application 用の新しい directory を作成します。

mkdir ExampleApp

6. copy した command を実行して backend と frontend project を作成します。command は次の form です。

npx @squidcloud/cli init-sample -t backend-and-frontend example-app --appId YOUR_APP_ID
--apiKey YOUR_API_KEY --environmentId dev --squidDeveloperId YOUR_DEVELOPER_ID --region us-east-1.aws

Backend と Frontend を開始する

script の実行が完了すると app の directory が作成され、その中に次の main directory を含む完全な project structure が作成されます。 /frontend /backend

Backend を開始する

cd backend

backend development server を実行します。

squid start

Frontend を開始する

cd frontend

frontend development server を実行します。

npm run dev

frontend は http://localhost:5173（または terminal に表示された別の port）で実行されます。

Setup の理解

script は以下の file を自動的に作成します。

• .env.local: frontend root folder に配置
• .env: backend root folder に配置

どちらにも、以下の application variable が含まれます。

• appId: Squid Console 上の application の unique identifier
• region: app を host する cloud region（例: us-east-1.aws）
• environmentId: development には dev、production には prod を使用
• squidDeveloperId: local development 用の developer ID

これらの environment variable は Squid SDK および deployment に使用されます。

local で実行中の backend version で frontend を実行するには、frontend Squid Client SDK configuration に Squid Developer ID を含める必要があります。

Client code

<SquidContextProvider
  options={{
    appId: import.meta.env.VITE_SQUID_APP_ID,
    region: import.meta.env.VITE_SQUID_REGION,
    environmentId: import.meta.env.VITE_SQUID_ENVIRONMENT_ID,
    squidDeveloperId: import.meta.env.VITE_SQUID_DEVELOPER_ID,
  }}
>
  <App />
</SquidContextProvider>

次のステップ

frontend と backend を setup したら、以下を実行できます。

1. 最初の executable を構築する - frontend が backend logic を invoke する方法については、Executables section を参照してください。
2. data を操作する - integrated database を使用して data を read・write する方法については、Database Docsを確認してください。