How to create a simple company website with Cosmic JS 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 JS


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 JS 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 JS API. See how simple is to request a single page object from Cosmic JS:

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

Note that, for nested objects, Cosmic JS 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 JS 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 JS, 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 JS, all that is left to do is to create the templates and extend the configuration to meet your needs.

Was this article helpful?

Thank you! Your input helps us improve our articles and resources. If you have any other questions or comments, please contact support.

You may also like

Cosmic JS makes it easy to deploy your websites and applications to the web. You can deploy an app from any git repository to the Cosmic App Server from any Bucket. Cosmic JS uses Dokku (Docker + Heroku-like deployment) to deploy your app from any GitHub, BitBucket or any other public repo.
Why should you migrate your CMS? What's the big deal about Cosmic? This article should answer some questions you have about cosmicJS and what the pros and cons are of using an API-driven Content Management System
In this tutorial, we're going to build a digital shrine to the great musical artists of our time and to listening to music by album - the way great artists meant it to be listened to! In the process, you'll learn a little bit about Cosmic JS, React, CSS Grid, Flexbox, Material UI and Spotify's aweso
The relationship between content and code has come to an end.
You have the ability to add Quick Links to Your Cosmic JS Bucket Dashboard. Quick Links are a great way to easily navigate to other websites, shared resource documents, CRMs, task management software or team collaboration tools directly from your Cosmic JS Bucket Dashboard.
5 Website Boilerplates: React, Node.js, Vue, Nuxt.js and Next.js