In this second part of our full-stack tutorial blog post series you will start building the Hackernews clone by creating the frontend with angular-cli and the backend with Graphcool. Missed the introduction & set-up for this tutorial series? Read it here.

Note: This is a cross-post from HowToGraphQL, a tutorial site covering a wide range of topics all around GraphQL.

Creating the App

If you haven’t already, you need to install angular-cli using npm:

Next, you can use it to bootstrap your Angular application:

This will create a new directory called hackernews-angular-apollo that has all the essential configuration setup.

Make sure everything works by navigating to the directory and starting the app:

This will open a browser and navigate to http://localhost:4200 where the app is running. If everything went well, you'd see the following:

Next, go ahead and move the graphcool folder into the hackernews-angular-apollo directory to manage everything in one place.

Your project structure should now look as follows:

Prepare Styling

This tutorial is about the concepts of GraphQL and how you can use it from within an Angular application, so we want to spend the least time on styling issues. To ease up usage of CSS in this project, you’ll use the Tachyons library which provides some CSS classes.

Open src/index.html and add a second link tag right below the two existing ones that pull in Tachyons:

Since we still want to have a bit more custom styling here and there, we also prepared some styles for you that you need to include in the project.