For us, developers, starting a new web project can be a tedious job. It raises questions like: What technology should I use for the front-end? What technology should I use for the back-end? What database is the best? Because nowadays all Javascript technologies like , and are very popular for building Web applications, so we can get an answer for the first question very fast. React Angular Vue But what about the back-end? Should I use or ? Is it better to use a or database? Well, Strapi has the answer to all these questions. NodeJS .NET Core relational non-relational What is Strapi? Strapi is an open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks. With all the plugins and features Strapi gives the developers the ability for customization and extensibility. Strapi is also very Developer-Friendly by providing an API that can be easily accessed either via REST or GraphQL endpoint. In this article, we are going to build a simple web application using Strapi and Angular. First, we are going to set up and build our . API Install Strapi Requirements: 12.x and npm 6.x Node.js Create a new project npx create-strapi-app blog_api --quickstart If we want to customize our application to use the specific database we need to run the command without argument. By default, Strapi is using . --quickstart sqlite Once the setup from the command above is finished Strapi will automatically run (NOTE: when manually start the project run the command ) and we can navigate to our admin panel on the following link: . When you navigate you will able to see the registration form. strapi develop http://localhost:1337/admin When we finish with registering our first user, we can start building our API. First, what we need to do for our Blog Application is to define the models that we will have. We will define three models: , , and . Page Post Content To create a new Model navigate to Content Type Builder. Our model will have: Content Title - type Text Value - type RichText IsPublished - type boolean CoverImage - type Media Relation to (Content belong to many ) Post Posts Relation to (Content belong to many ) Page Pages model will have: Page Name - type Text Relation to ( has many ) Content Page Contents Relation to ( has many and belongs to many ) Post Page Posts and model will have: Post IsDeleted - type boolean Relation to ( has many and belongs to many ) Page Post Pages Relation to ( has many ) Contents Post Contents As soon as we define our models we are ready to create some pages, contents, and posts. We can simply do that by navigating to each model and click Add new [name-of-the-model] Now, when we have models and data into our database we need to give access to our visitors of blog application. To do that we need to navigate to tab in the menu. We can see there are by default two types of roles: and . We navigate to role and select: Roles and Permissions Public Authorized Public And that's it. Our API is ready. Now we only need to make our web application. Angular Application For creating our Angular application we will use Angular CLI. Install the Angular CLI with the following command: npm install -g @angular/cli Run the following commands to create and run a new angular app: ng blog-web 
cd blog-web 
ng serve new If you navigate to you will able to see the new app. http://localhost:4200/ Now, we can start with styling our application and access data from our API. First, we will create services and API calls to get our data from Strapi. Navigate to folder and run the following commands: src mkdir services
cd services
ng generate service page
ng generate service post
ng generate service content Angular CLI will create these services so we are ready for coding. In we will put our API URL. environment.ts Navigate to page service and insert the following code: page-service.ts We created two methods: one for getting all pages and one for getting page by id. We will make the same for and services. post content NOTE: Before using we need to register into HttpClient app-module.ts Go to app-module.ts Import the from , HttpClientModule @angular/common/http { HttpClientModule } import from '@angular/common/http' Add it to the array. @NgModule.imports imports:[HttpClientModule,  ...] post-service.ts content-service.ts Next, we will create that will contain style and functionality for posts and we will use for displaying our landing page. Navigate to folder and create a new folder called components. Here, we will store all components that we use in our blog application. With the following command we can generate a new component: post-component app-component app ng generate component post Insert the following code into the post component. post.component.html post.component.scss post.component.ts Because we are using bootstrap classes we need to include bootstrap into our project as well. We can do that by adding the following into index.html <link rel= href= > "stylesheet" "https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css" And we are almost done. The only thing that left is to modify and our blog is ready for use. app-component app.component.html app.component.scss app.component.ts Congratulations, we successfully built a Blog application. Conclusion Feel free to continue working on your blog. You can try various scenarios navigation, styling e.t.c. Play with models into Strapi and API calls from your Angular application. The source code of this tutorial is available on . I hope you enjoyed through this adventure. Github Also published on https://blog.codechem.com/the-power-of-strapi-building-web-application-has-never-been-easier

CodeChem

How to Set Up a Xamarin Forms App with SQLite Local Storage

Work with us!

Nominated for 2022 - HackerNoon Contributor of the Year - Algorithms

Nominated for 2022 - HackerNoon Contributor of the Year - Mvp

Too Long; Didn't Read

Make resilience your competitive advantage

Introduction to Strapi : Headless CMS for Building Web Applications

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Using Weights and Biases to Perform Hyperparameter Optimization

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Using Weights and Biases to Perform Hyperparameter Optimization

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps