Skip to main content

Project structure

Best practices for the development structure of your local environment.​

The Squid backend project manages the business logic to connect your client apps to the services. While it is completely separated from the frontend app, it can be helpful to store the backend and frontend projects close together for development purposes.

The following is a suggested structure for your fullstack app:

your-app-name/
  frontend/
  backend/

Similarly, you can store other backends that utilize Squid in sibling directories. Your application might look more like this:

your-app-name/
  backend/
  other-backend-service/
  related-microservice-using-squid/

Having the Squid backend code and other application code stored in sibling directories clearly displays the connection between the two at a glance. However, the applications are entirely separate so they aren't required to be in sibling directories--it is only a recommendation for ease of development. All of your applications can be stored in separate locations and repos.

Structuring multiple frontends​

For apps that share a backend, you can use a structure like this:

your-app-name/
  frontend-admin/
  frontend-user/
  backend/

If your frontend applications are in separate repos, then you can also keep your backend in its own separate repo while still sharing it with the frontend apps.

Managing common code and types​

In some cases, your frontend and backend (or backend and Squid backend) might share common code or types, which can be handled using TypeScript paths. The directory structure of your application could look like the following:

frontend/
common/
backend/

Then in the tsconfig.json for your frontend and backend apps, include the common folder in your paths:

{
  ...
    "paths": {
      "myapp-common": ["../common/src"]
    }
  ...
}

To view an example of shared types with TypeScript paths in a Squid application, view the Archer app on GitHub.

Alternatively, you can managed shared resources with NPM workspaces.

Squid backend assets directory​

The assets directory of the backend stores files to deploy to the Squid server along with your code. These files are secure and can only be accessed by your backend application. Use the assets directory to store images, template files, or any other files that your code depends on.

The directory location is /src/public.

It's important to keep all necessary assets in this directory to ensure that your code runs correctly on the Squid server. If you need to include large assets, consider using a content delivery network (CDN) or hosting them on a separate server.

To reference an asset in your backend project, use the assetsDirectory attribute followed by the file name. The following example shows how to access a filed called email-template.html in a Squid Executable:

Backend code
import { executable, SquidService } from '@squidcloud/backend';

export class ExampleService extends SquidService {
  @executable()
  async sendEmail(email: string): Promise<void> {
    const templateFile = `${this.assetsDirectory}/email-template.html`;
    console.log(`Sending email with the ${templateFile} template...`);
  }
}