Deploy your App

Push your backend to Squid and your frontend to Netlify

Once your frontend and backend are running locally, the next step is deploying them so others can use your application. This guide covers deploying your Squid backend to the cloud and your frontend to Netlify.

How the pieces connect

Your frontend and backend share the same application credentials: App ID, Region, and Environment ID. These values are what link them together:

• The backend reads them from its .env file at deploy time.
• The frontend reads them from environment variables (prefixed with VITE_ if using Vite) at build time.

When both are configured with the same appId, region, and environmentId, the frontend automatically communicates with the correct deployed backend.

Start with dev

Deploy to dev first. This gives you a shared staging environment your team can test before going live. Once confirmed, repeat the steps for prod.

---

Step 1: Deploy the backend to Squid

From your backend directory, run:

squid deploy

This deploys your backend to the dev environment. The required credentials (appId, region, apiKey, environmentId) are read from your backend's .env file automatically.

Once deployed, your backend is live in the cloud. Your frontend no longer needs the squidDeveloperId parameter, which is only used for local development.

Deploy to production

When you're ready to go live, deploy to prod:

squid deploy --environmentId prod --apiKey YOUR_PROD_API_KEY

Find your prod API key and the full deploy command in the Squid Console: go to your Application Overview page and click Deploy backend in the Backend project section.

注記

If squid deploy fails, ensure the Squid CLI is installed: npm install -g @squidcloud/cli

---

Step 2: Deploy the frontend to Netlify

Streamline Your Application Deployment with Squid and Netlify. With the Squid Netlify integration, you can automate application builds and deployment. Changes to both the frontend and the Squid backend are automatically deployed when you update your application repository.

Connect your repository

1. Push your project to a GitHub repository.
2. In the Netlify console, click Add new site, then Import an existing project, and select your repository.
3. Set the build settings for your frontend. For a Vite-based frontend:
   • Base directory: frontend
   • Build command: npm run build
   • Publish directory: frontend/dist

Add the Squid integration

1. In Netlify, go to Integrations and search for Squid. Click Enable from a site and select your site.
2. Enter your Squid Region, API key, and Environment ID. These must match the environment you want to deploy (use the prod API key for your production site).
3. Set the Environment variable prefix to VITE_ (required for Vite apps).

Enable auto-deploy

1. In the Auto-Deploy section, enable Auto deploy. From this point on, pushing changes to your repository automatically redeploys both your frontend and Squid backend.
2. Set the Backend directory to the path of your backend relative to the base directory (e.g., ../backend).
3. Click Save. Your app is now live.

注記

Note that only production (prod) builds will trigger a Squid backend deploy. This setting can be disabled at any time.

---

Removing squidDeveloperId for production

During local development, your frontend includes a squidDeveloperId to route requests to your locally running backend:

<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, // local dev only
  }}
>

For deployed environments, the squidDeveloperId should not be set. Since this value comes from VITE_SQUID_DEVELOPER_ID in your .env.local file, it won't be present in the Netlify build unless you explicitly add it, so the deployed frontend will automatically connect to the deployed backend.

注意

Never expose your squidDeveloperId in production builds or commit it to version control. It is for local development only.

---

Undeploying your backend

If needed, you can remove your backend from an app. In the Squid Console, go to the Application Overview page, then scroll to the bottom of the page and click Undeploy Backend.

For more details on environments and environment variables, see Environments.