Full-Stack To-Do List application with Node, NestJS, Angular 2+, Postgres, Liquibase and Docker (Part 9 of 9)

No Worky!

You might have noticed already that if you try to add a ToDo Item, there are HTTP errors thrown in the console:

You’ve failed me.

This is because of two things:

1. Our Web App expects the API to be exposed on api/v1.
2. It looks like our application might have a CORS issue.

Lucky for us, we’ve chosen NestJS as our API Framework, and NestJS makes making these two changes extremely simple.

Open up ./api/src/main.ts and replace bootstrap() with the following:

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors();
  app.setGlobalPrefix('api/v1');
  await app.listen(3000);
}

Sweet! A clean console!

Now let’s try adding a ToDo Item!

Hachi Machi!

So friggin’ pumped, bro.

A Warning

Just to cover our bases here, this ‘fix’ for the CORS issue is not great for every situation. In this POC it’s totally acceptable to open up our API, because we’re developing locally and not deploying this app.

Opening up your API for CORS can lead to a ton of bad things in a real-world scenario. The main focus of this project is how to integrate all of these technologies in a sensible way. I would caution you to do more research on CORS before deploying an API like this in a production environment. 👨‍🔬 👩‍🔬

Recap

We’re nearing the end of the journey. Now we’ve got:

• A containerized Postgres Database
• A containerized pgAdmin service wired up to our Postgres Database
• Liquibase CLI installed and configured
• Liquibase tracking our changes in the DB
• A barebones NestJS API Application
• A barebones Angular SPA Application
• A single Changeset in our Changelog that creates our ToDo Table
• Our API is wired up to our Postgres Database
• Angular Material installed in our SPA app
• CRUD operations supported on our API
• The Components and Services we need to make the SPA Application work
• A wide open development API that allows us to develop our App

Next Steps

Although this does tell the full end-to-end experience of developing a PLANN stack application, our app is pretty basic.

What if our user went to a different device, such as their phone? They would have no way of knowing what ToDo Items were completed or not.

The checkbox state is 100% client-side. That’s kind of useful, but I think we can do better.

Let’s see if we can use Liquibase to update our ToDos Table to add a new column for whether the task is completed or not!