How to create a simple company website with Cosmic and Angular

Community Articles
Community Articles How to create a simple company website with Cosmic and Angular

* This article will assume some basic knowledge of Angular so it can focus on the specific task of requesting and showing data from Cosmic


Take a look at the repository and install the app

What is this app about?

A typical company website is just a set of pages structured in a more or less simple navigation. We want to create a website that allows the user to create any number of pages and decide the structure for the navigation, without the need to wait for a code release. For that, we are going to rely on Cosmic and create the structure to hold this project. On this example, our bucket will have the following object types:

  • Pages. This is a simple object, with no additional metafields.
  • Navigation. It will hold a collection of Pages.
  • Presets. This is a configuration object with a list of attributes that will help us start our app. It will hold the value for the homepage and the main navigation that we will use for the menu of our site.

Using the API

Now that we defined the structure of our data, we need to create our Angular app (I recommend using the Angular CLI) and create a service to make our calls to the Cosmic API. See how simple is to request a single page object from Cosmic:

get a single page and save it to the stream to keep it cached for the session

Note that, for nested objects, Cosmic will not return the full tree, so sometimes you will need to concatenate calls to make the most of our service, e.g.: When fetching the main presets, you would probably want to include the navigation pages.

this call will combine the result of getNavigation into the result of getPreset

Our api calls need to be authenticated with a read key, we can include that on each method, but the easiest may be to create an interceptor. This will intercept all http requests, so we check if it's a Cosmic request and append the read key where necessary.

intercept and append the read or write parameters

Routing to the pages

At this point, our website does nothing, the first thing it needs to do is to know how to load its first page. We need to create a routed module for the Pages, and set it to load on the root. Once inside the module, on its own routing, we will set a route for the parameter :slug to load the Page Component. And what happens when there is no route specified? This will be our most common scenario, for that, we set an empty route with a Guard.

A guard will be executing when matching a route and before loading the component, so we will use it to fetch the main presets from Cosmic, and redirect the app to the homepage we stablished.

from Angular 7.1, canActivate can return either a boolean or an UrlTree


Now we have a route configuration that will load the Page component, and this is the way to load a page using the slug from the parameter list:

now we can use the page object on our template

With this, we have a way to navigate via url, but we should also load a menu so the user can see the pages available. For that, we will add a menu component on the core module, as it will be shared throughout the app. Our menu will be composed of a navigation list, a logo and the company name; all of this is defined on the presets, so the menu will have a call like this:

note that we specifically ask to include the navigation by adding "true" as a parameter to the method

All of this would allow you to quickly create a website using Angular and Cosmic, all that is left to do is to create the templates and extend the configuration to meet your needs.

You may also like

To demonstrate how easy it is to get started with Cosmic, we'll utilize the Cosmic CLI to quickstart a React Auth App. This app shows implementation of Authentication in ReactJS, NextJS and NodeJS using the Cosmic API. This app has all the basic modules like signin, signup, view/edit profi
See how easy it is to create a browser based video game when using Cosmic to manage all of your data.
Cosmic allows developers to deploy their codebases to the Cosmic App Server for staging, testing and demo purposes, and is now offering new production deployment options available with some of your favorite deployment services.
Cosmic has powerful content modeling and delivery tools to help you build apps faster, together. Cosmic lets you manage all your content, data and files and is unopionated as to the format of content you're uploading. The Cosmic Editor allows you to upload rich media such as video, images and
Filtering data is one of the most common feature of any data facing application, wheather it's a fron-end app or a back-end application. The Filter function is used to find records in a table or a dataset that meets certain criteria.
In basically one Saturday, I was able to move from a confining WordPress instance for my blog to a blazing fast new blog fueled by Cosmic. This flexibility is going to enable me to improve my blog how I want to, serve my content how I want to, design my workflow how I want to.

Get Started with Cosmic

Build personal projects for free. Add your team at unbeatable prices.
Start Building Talk to Sales