Skip to main content

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!