Skip to main content

react

To begin setting up the client, you should have an updated version of Node.js. Once you have Node.js installed, create a new React application using Vite from the root project folder. Alternatively you can use your preferred React framework.

cd my-app
npm create vite@latest my-app-frontend -- --template react-ts

Next, cd into the newly created directory and install all dependencies, including the Squid React SDK

cd my-app-frontend
npm install
npm install @squidcloud/react

Now it is time to connect the new React app with the Squid platform. For the SDK to function properly, you will need four configuration options:

  • appId : The ID of your Squid application. This is generated automatically by Squid, and is separate from the name that you've given to your application. The Application ID can be found in the application overview in the console.
  • region : Your region is determined by the cloud provider and region that you selected when creating an application. Currently, the only supported region is us-east-1.aws . More will be coming soon.
  • environmentId : Can be set to either dev or prod. When you create a new application, Squid automatically sets up these dev and prod environments for you. Use the dev environment for your development and testing. The prod environment is for when you're ready to take your application live. To learn more, check out the environments documentation.
  • squidDeveloperId : Your Squid Developer ID is a unique user ID for each developer. It is located in the application overview page of the console.

You'll need to wrap your application in a single SquidContextProvider component with these configuration options. Initialize the Squid provider by updating the src/main.tsx file with the following snippet. For local development, use the dev environmentId:

Client code
import { SquidContextProvider } from '@squidcloud/react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <SquidContextProvider
    options={{
      appId: 'YOUR_APP_ID',
      region: 'YOUR_REGION', // example: 'us-east-1.aws'
      environmentId: 'dev | prod', // choose one of 'dev' or 'prod'
      squidDeveloperId: 'YOUR_SQUID_DEVELOPER_ID',
    }}
  >
    <App />
  </SquidContextProvider>
);

Your client side is now configured and ready to use Squid! To run the client in development mode, use

npm run dev
Running your project locally

You should run both the client and backend projects simultaneously when developing locally. Follow the steps above to run the client, and revisit the previous page to learn how to run the backend.

Next we can customize the client and start developing with Squid!