Squidex
  • Welcome to Squidex
  • Getting Started
    • Squidex Cloud
    • Installation Instructions
      • Platforms
        • Install on Kubernetes
        • Install on AWS (Deprecated)
        • Install on AWS EC2 using Docker
        • Install on Azure
        • Install on Azure using ARM
        • Install on Google Cloud Platform (GCP)
        • Install on Docker
        • Install on Heroku
        • Install on IIS
        • Install on Render
        • Install on Vultr
      • Configuration
        • Deploying the Image Resizer Service
      • Troubleshooting and Support
        • Diagnose Runtime Issues
        • Restoring Deleted Apps
      • Install Identity (Deprecated)
      • External Identity Providers
        • Azure AD (OAuth) with Squidex
    • Contributing and Developing
      • Building
      • Developing
      • Extensions
        • Custom Rule Action
      • Contributing
      • Architecture
      • Translating
      • Squidex Docs Program
    • Roadmap
    • Quick Start Guides
      • Vue.js Blog with Squidex
      • React.js Blog with Squidex
      • Angular Blog with Squidex
  • Documentation
    • Introduction and Use Case
    • Concepts
      • Apps
      • Teams
      • Schemas
        • Field Rules
      • Content
        • Scheduled Publishing
      • Assets
        • Querying Assets
      • Localization
      • Migrations
      • Roles & Permissions
      • Rules
        • Publish an Event to Azure Queues using Rules
        • Populate Elasticsearch Index
      • Backups
      • Subscriptions
        • App Subscriptions v/s Team Subscriptions
      • Notifications
      • Dashboard
      • Workflows
    • Software Development Kits
      • TypeScript
      • .NET
        • Version v14 (and Earlier)
        • Version v15 (and Later)
      • PHP
      • Java
    • Developer Guides
      • API
        • Authentication
        • Postman
        • Queries
        • Assets
      • Automation Tools (CLI)
      • Scripting
        • Scripting Helper Methods
      • Embed Content
      • Custom Workflows
      • Custom Editors
      • Custom Sidebars
      • Preview Content
      • Rule Formatting
        • Simple
        • Script
        • Liquid
      • Tutorials
        • Building a Blog with Squidex and Next.js
  • Next
    • Squidex 3.0: API Compatibility
Powered by GitBook
On this page
  • Prerequisites
  • Creating the Squidex App
  • Creating a Client in the Squidex App
  • Deploying the Angular Blog
  • Deploying to Netlify
  • Running the code locally

Was this helpful?

  1. Getting Started
  2. Quick Start Guides

Angular Blog with Squidex

Quickly Deploy a Simple Angular Blog with Squidex

PreviousReact.js Blog with SquidexNextIntroduction and Use Case

Last updated 2 years ago

Was this helpful?

This article provides you with instructions on how to quickly deploy an Angular blog with Squidex Cloud. The same approach can also be used for a self-hosted Squidex. For installation instructions click .

Prerequisites

  • Account at (or a self-hosted Squidex).

  • Account at .

  • Account at .

  • For local deployment / development:

    • Node.js 16 or above.

    • NPM 8 or above.

Creating the Squidex App

For this quick-start, you can create the App with pre-populated schemas directly in Squidex. To do this follow the steps below:

  1. Navigate to and login. (If you do not have an account, create one).

  2. Click Starter Sample Blog (1), give it a unique Name (2) such as angular-blog-with-squidex-[your_initials] and click Create (3).

  3. Click on the newly created App to navigate into it. You should make a note of the App Name as it will be required later in the instructions.

Creating a Client in the Squidex App

In this step, let's create a client that will be used by the Angular code to talk to Squidex. When an App is created, there is a default client already present however, it has an Owner role by default and it's not recommended to use this as a best practice.

  1. Navigate to Settings (4) > Clients (5) in the App. Next enter a Name for the client (6) and click Add Client (7).

  2. This creates a new client with the role of Editor. Copy (8) the Client Id and Client Secret as they will also be required along with the App Name later in the instructions.

You are now ready to use this App with the code.

Deploying the Angular Blog

You can deploy the Angular code using various methods such as self-hosting and as a Docker container, in Kubernetes etc. You can also deploy them to various modern, fast and developer-friendly serverless platforms such as Netlify. The instructions here cover the latter:

Deploying to Netlify

Netlify is a platform that helps you quickly build and deploy sites to a global network with a host of features and you can get stated for free!

When you click the Deploy to Netlify button below, the following steps will occur:

  1. Next, you will be asked to connect to your GitHub account. This step is required as the deployment process will clone the code to a repository in your own account.

  2. Finally, you will be prompted to enter a name for the repository and the environment variables for the Squidex App. Enter the values noted down from before. Your values will be different than the values in the screenshot.

  3. Next, Netlify will deploy the App and provide a URL to access the App. (Netlify runs the App in a Starter plan which is free).

Running the code locally

  1. Start by cloning the Angular sample blog code to your machine git clone https://github.com/sangramrath/squidex-angular-blog-starter.git

  2. Next, create the environment variables files using the example file available i.e. .env.example. To separate your variables from development and production you can create .env.dev and .env.prod. Update the .env.dev file with your values of App Name, Client ID and Client Secret noted down earlier. For the URL use https://cloud.squidex.io if using Squidex Cloud or the URL to your Squidex instance, e.g. http://localhost:5000 if you run it locally. The final file may look something like this:

  3. Run npm install to install the node modules and setup the project.

  4. Run npm start to compile and run it in development mode. This will serve the App at http://localhost:4200/. (sample screenshot below):

    The development mode supports hot-reload for any live changes.

  5. Access your App locally, it should display your content fetched from Squidex. The Starter Sample Blog App at Squidex has only one post.

If you wish to run the sample code locally, proceed with these steps , otherwise continue to deploy the blog to an online platform.

You will be redirected to Netlify and prompted to sign in. (If you do not have an account visit and create an account first).

Click to get started.

https://app.netlify.com/signup
here
here
cloud.squidex.io
app.netlify.com
github.com
https://cloud.squidex.io
Deploy to Netlify Button
Creating the Starter Sample Blog App on Squidex
Accessing the Squidex App
Create a client for the Angular App
Copy the Client Id & Client Secret
Configuring the Netlify site
Environment file example
Successfully running Angular App
Blog running locally