Using Angular as Frontend with Sails.js Framework

Frontend
1

I’m getting started with Sails.js and have some confusion about frontend options. From what I understand, Sails creates a default frontend using EJS templates.

I have a few questions:

  1. Does Sails really use EJS as the default frontend templating system?
  2. What’s the purpose of the sails generate frontend npm package if there’s already a default setup?
  3. For integrating Angular as my frontend, would using sails-generate-frontend-angular be the recommended approach?

Any guidance would be helpful as I’m trying to figure out the best way to structure my application.

2

The Problem:

You’re experiencing challenges integrating a frontend framework (like Angular) with your Sails.js backend and are confused about the available frontend options and the purpose of Sails’s sails generate frontend package. You want to understand the best approach for structuring your application, especially when using Angular.

:thinking: Understanding the “Why” (The Root Cause):

Sails.js, by default, uses EJS (Embedded JavaScript) templates for its frontend. However, this is primarily for simple applications or prototyping. For larger, more complex projects, using a dedicated frontend framework like Angular, React, or Vue.js is generally recommended. The sails generate frontend package was intended to help generate some basic scaffolding, but it is now largely considered outdated and unsupported. Building your frontend as a separate project is a more modern and maintainable practice.

:gear: Step-by-Step Guide:

Step 1: Create a Separate Frontend Project:

Instead of using Sails.js for your frontend, it’s best practice to create a fully independent frontend project. This allows for better separation of concerns, enhanced scalability, and simpler integration with various frontend frameworks. For example, in the case of Angular:

ng new my-sails-angular-frontend
cd my-sails-angular-frontend

Step 2: Configure Your Sails.js Backend API:

Your Sails.js application will serve as your backend API. Ensure that you have properly configured your API endpoints to handle requests from your frontend. You will need to adjust your API routes to serve the correct data to your Angular application.

Step 3: Implement Communication Between Frontend and Backend:

Use Angular’s HttpClient (or a similar method) to make HTTP requests to your Sails.js API endpoints. This involves making API calls to fetch and send data. Handle responses appropriately, considering error handling and data transformation.

Step 4: Configure CORS (Cross-Origin Resource Sharing):

This is essential to allow requests from your separate frontend (which likely runs on a different port) to access your Sails.js backend. In your Sails.js configuration (config/cors.js), ensure you have the appropriate settings to permit CORS from your Angular application’s origin. A typical configuration might look like this (adjust the origin to match your Angular application’s URL):

module.exports.cors = {

  /***************************************************************************
  *                                                                          *
  * CORS is enabled by default.  This is for security reasons.  You'll need  *
  * to explicitly configure this setting in production.                      *
  *                                                                          *
  ***************************************************************************/

  allOrigins: true,
  origin: 'http://localhost:4200' //Example origin. Replace with your Angular app URL
};

Step 5: Test Your Integration:

Thoroughly test the interaction between your Angular frontend and Sails.js backend to ensure that data is transmitted correctly. Pay close attention to error handling and data validation on both sides.

:mag: Common Pitfalls & What to Check Next:

  • Incorrect CORS Configuration: Verify that your CORS configuration in Sails.js allows requests from the origin of your Angular application. Incorrect configuration will lead to CORS errors.
  • API Endpoint URLs: Double-check that the URLs used in your Angular HttpClient calls accurately reflect the endpoints in your Sails.js backend.
  • Data Handling: Ensure that your Angular app correctly handles the data format returned by the Sails.js API. Use appropriate data transformation and handling techniques.
  • HTTP Request Methods: Make sure your Angular app uses the correct HTTP methods (GET, POST, PUT, DELETE) for each API interaction.

:speech_balloon: Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!

3

Sails.js has evolved to prioritize API-centric architectures. Although EJS was once the default templating engine, many developers now prefer a decoupled structure, leveraging Sails as an API backend. The sails-generate-frontend packages aim to assist with frontend configurations, but they are often outdated and not well-maintained. For integrating Angular, I suggest treating Sails purely as an API server and developing your Angular application independently. This approach enhances modularity, simplifies deployment, and enables the use of the latest Angular features. Remember to set up CORS in your Sails application to allow your Angular app to communicate effectively.