Skip to main content

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!