Skip to content

Get Started with Coalesce: Simplifying Frontend and Backend Setup

In our first episode of The Coalesce Podcast, we dive into the basics of using Coalesce, a powerful framework that simplifies web development. In this blog post, we’ll break down the key steps discussed in the podcast, giving you a clear guide to get started with Coalesce, from setting up your environment to launching your first project.

WATCH: Coalesce Podcast 001: Getting Started

https://github.com/IntelliTect/Coalesce

https://intellitect.github.io/Coalesce

Coalesce, developed by IntelliTect, streamlines repetitive web development tasks by providing a customizable framework that takes care of much of the boilerplate code. Whether you’re building a small app or a large-scale project, Coalesce minimizes the time spent on setting up backend APIs, handling data models, and creating frontend interfaces. This allows you to focus on designing and implementing the core features of your app.

This guide will walk you through the steps discussed in the podcast to help you get up and running quickly with Coalesce. Whether you’re new to the framework or looking to streamline your workflow, Coalesce offers a straightforward way to kick-start your project with minimal hassle.

Steps to Set Up and Use Coalesce:

Introduction to Coalesce:

Coalesce is a framework that simplifies backend tasks like APIs and data models, while also allowing for quick frontend setup. It was initially created to handle complex forms without manual backend coding, such as IntelliTect’s ICMS project for Vanessa Behan, which required managing numerous fields.

Framework and Language:

Coalesce uses Vue.js for frontend development and C#/.NET Core for the backend. It originally used Knockout.js but switched to Vue for better compatibility. Entity Framework (EF) is included by default for database management and data access, although using EF is optional.

Setting Up the Environment:

Before you begin, make sure to install:

  • .NET SDK (latest Long-Term Support version).
  • Node.js (LTS version).
  • Preferred IDE: We recommend using VS Code for frontend work (Vue and TypeScript) and Visual Studio for backend tasks (C#/.NET Core).
  • Plugins: Install the Vue official plugin and TypeScript plugin for Vue in VS Code.

Project Setup (Command Line):

Rather than listing out specific commands, we recommend referring directly to the official documentation for the most up-to-date instructions on creating your project.

Visit the Coalesce Documentation: Creating a Project for the latest details.

Using IDE and Command Line:

  • Open the project in your preferred IDE. At IntelliTect, we typically use VS Code for TypeScript and Vue code, and Visual Studio for backend C# code.
  • Be sure that when running any commands, you’re in the correct project directory for that command. For example, to use the code . command in VS Code, ensure you’re in the project folder you want to open.

Running the Project:

  1. Install NPM packages by navigating to the web project folder and running:
npm ci

This installs the required frontend dependencies.

2. Run database migrations by going to the data project folder and running:

dotnet ef migrations add <migration_name>Code language: HTML, XML (xml)

This ensures your database is set up correctly based on your models.

3. Start the project by navigating to the web directory and running:

dotnet run
  1. This launches the app.

Explore the Generated App:

Once the app is running, you’ll see:

  • A homepage with basic content.
  • Admin pages where you can manage your models and data.
  • A pre-generated Widget model for demonstration purposes.

Managing Models in the App:

  • To create or edit models, visit the Admin page and access the Widget model. You can make modifications directly through this interface.
  • Don’t forget to run migrations after making changes to your models, so the database is updated accordingly.

Built-in Features:

Coalesce comes with several built-in features to simplify development:

  • Basic CRUD operations for managing models.
  • Search and filters for navigating data.
  • Custom Vue components for frontend customization.
  • Advanced security features to protect your app.
  • Audit logging for tracking changes.

For more details, check out the Coalesce documentation.

With Coalesce, web development is faster and more efficient, allowing you to focus on building core features without getting bogged down by repetitive tasks. Whether managing data models, setting up APIs, or designing user interfaces, Coalesce helps streamline the process, getting your project up and running quickly.

As you grow more familiar with the framework, you’ll discover even more flexibility and power for a variety of use cases. The steps outlined here will get you started, but there’s much more to explore and customize as your project grows.

Happy coding!

~Grant & Meg