Set up the client

After completing the backend initialization, it is now time to set up our client. Continue on to this next step of the tutorial by creating a new client project.

This quickstart requires a Squid backend project running locally. If you haven't set up your backend project, view the backend setup steps and return to this page once backend setup is complete.

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!

Typescript

To begin setting up the client, you should have an updated version of Node.js. Once you have Node.js installed, create a my-app-frontend directory from the root directory for your Typescript files.

mkdir my-app-frontend

Next, cd into the new directory and install Typescript. With Typescript now installed, we can initialize the Typescript project as well:

cd my-app-frontend
npm install typescript --save-dev
npx tsc --init

This will generate a tsconfig.js file for your project. Next, install the Squid Client SDK, along with any other dependencies for the project:

npm install @squidcloud/client
npm install

Now it is time to connect the Typescript project 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.

When initiating a new instance of Squid, you will need to provide these four configuration options. Create an index.ts file in the frontend directory. We will create a main function which contains the squid object:

Client code

import { Squid } from '@squidcloud/client';

function main() {
  const squid = new Squid({
    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',
  });
}

Your client side is now configured and ready to use Squid! To run the client in development mode, first compile the Typescript file. You will need to compile the file after any changes are made by running

npx tsc

To run the script, run

node index.js

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.

With the setup out the way, we can now begin to code with Squid + Typescript!

Angular

To begin setting up the client, you should have an updated version of Node.js. Once you have Node.js installed, install the Angular SDK and create a new Angular application from the root project folder.

cd my-app
npm install -g @angular/cli
ng new my-app-frontend --interactive false --style scss --routing

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

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

Now it is time to connect the new Angular 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 was generated automatically in a .env file during backend initialization and can also be located in the application overview in the console.

You'll need to import the SquidModule and provide it with these configuration options. Use the following code snippet in my-app-frontend/src/app/app.module.ts, with the dev environmentId for local development:

Client code

import { SquidModule } from '@squidcloud/angular';

...

@NgModule({
  imports: [
    SquidModule.forRoot({
      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'
    }),
    ...
  ],
})

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

ng serve

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!