This month, we published tutorials on the way to create a weblog with Nuxt.js and the way to create a blog with next.js with Strapi. however as the saying goes, appropriate matters are available threes!

So we decided to also create a tutorial for Angular builders on the way to create a blog the use of Strapi and Apollo, and we are hoping you will experience using it.

in case you are familiar with our blog, you should have already found out how to create a blog with Gatsby, Nuxt.js or next.js. but what if you will rather use Angular? allow me to inform you that I was given that included as nowadays, we are going to learn how to do it learn with Angular Training .

The goal right here is so that you can create a blog internet site using Strapi as the backend, Angular for the frontend, and Apollo for inquiring for the Strapi API with GraphQL.

The source code is to be had on GitHub right here.

To comply with this academic, you will want to have Strapi and Angular established in your laptop, but don't worry, we're going to install these together!

his tutorial uses Strapi v3.0.0-beta.17.8.

You need to have node v.12 installed and that's all.

Create a blog-strapi folder and get inside!

mkdir blog-strapi && cd blog-strapi

Back-end setup

So that's the easy part. Since the beta.9, we have an awesome package create strapi-app that allows you to create a Strapi project in seconds without installing Strapi globally so let's try it out. Learn more from Angular Certification 

Note: for this tutorial, we will use yarn as your package manager.

yarn create strapi-app backend --quickstart --no-run.

This single command line will create all you need for your back-end. Make sure to add the --no-run flag as it will prevent your app from automatically starting the server because SPOILER ALERT: we need to install some awesome Strapi plugins.

Now that you know that we need to install some plugins to enhance your app, let's install one of our most popular. The graphql plugin:

yarn strapi install graphql

Once the installation is completed, you can finally start your Strapi server strapi dev and create your first Administrator.

Don't forget that Strapi is running on http://localhost:1337.

Nice! Now that Strapi is ready, we are going to create your Angular application.

Well, the easiest part has been completed, let's get our hands dirty developing our blog!

Install the Angular CLI by running the following command:

npm install -g @angular/cli

Create an Angular frontend project, and accept to add Angular routing:

ng new frontend

Now your project is all set, you can dive in it and run the server:

cd frontend  

ng serve 

As you may need humans to study your weblog or to make it "lovely & quite" we will use a popular CSS framework for styling: UiKit and also Apollo to question Strapi with GraphQL:

Dependencies setup

make sure you are in the frontend folder earlier than going for walks the subsequent instructions:

deploy apollo-angular by way of walking the following command:

ng upload apollo-angular

pass in src/app/graphql.modules.ts and alter the uri const:

const uri = 'http://localhost:1337/graphql';

This manner, Apollo will name this cope with, which is the GraphQL course of your Strapi API.

UIkit is a lightweight and modular front-stop framework for growing rapid and effective net interfaces.

installation UIkit by way of jogging the following command:

Open your angular.json record and add the following code within the first scripts array. It must appear to be this:

"scripts": [ 

"node_modules/jquery/dist/jquery.min.js", 

"node_modules/uikit/dist/js/uikit.min.js", 

"node_modules/uikit/dist/js/uikit-icons.min.js" ]

Open your src/style.css and paste the following code:

/* You can add global styles to this file, and also import other style files */ 
@import "../node_modules/uikit/dist/css/uikit.min.css"; 
@import "../node_modules/uikit/dist/css/uikit.css"; 
@import "../node_modules/uikit/dist/css/uikit-core.css"; 
@import url("https://fonts.googleapis.com/css?family=Staatliches"); 
a { text-decoration: none; 
} 
h1 { font-family: Staatliches; font-size: 120px; 
}
 #category { font-family: Staatliches; font-weight: 500;
 } 
#title { letter-spacing: 0.4px; font-size: 22px; font-size: 1.375rem; line-height: 1.13636; 
} 
#banner { margin: 20px; height: 800px; 
} 
#editor { font-size: 16px; font-size: 1rem; line-height: 1.75;
 } 
.uk-navbar-container { background: #fff !important; font-family: Staatliches; 
}
 img:hover { opacity: 1; transition: opacity 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
 }