DEV Community

loading...
Cover image for How to fast build Web Application with Strapi + Angular

How to fast build Web Application with Strapi + Angular

Kubdev
Hi! I am Software Dev 🇫🇷. I build apps for the BIM / CAO industry.
Updated on ・4 min read

For us, developers, starting a new web project can be a tedious job. It raises questions like:

  1. What technology should I use for the front-end?
  2. What technology should I use for the back-end?
  3. What database is the best?

Because nowadays all Javascript technologies like React, Angular and Vue are very popular for building Web applications, so we can get an answer for the first question very fast. But what about the back-end? Should I use NodeJS or .NET Core? Is it better to use a relational or non-relational database? Well, Strapi has the answer to all these questions.

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

npx create-strapi-app blog_api --quickstart
Enter fullscreen mode Exit fullscreen mode

Once the setup from the command above is finished Strapi will automatically run (NOTE: when manually start the project run the command strapi develop) and we can navigate to our admin panel on the following link: http://localhost:1337/admin. When you navigate you will able to see the registration form.

Alt Text

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: Page, Post, and Content.

To create a new Model navigate to Content Type Builder.

Alt Text

Our model Content will have:

  1. Title - type Text
  2. Value - type RichText
  3. IsPublished - type Boolean
  4. CoverImage - type Media
  5. Relation to Post (Content belong to many Posts)
  6. Relation to Page (Content belong to many Pages)

Page model will have:

  1. Name - type Text
  2. Relation to Content (Page has many Contents)
  3. Relation to Post (Page has many and belongs to many Posts)

and Post model will have:

  1. IsDeleted - type Boolean
  2. Relation to Page (Post has many and belongs to many Pages)
  3. Relation to Contents (Post has many 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]

Alt Text

Alt Text

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 Roles and Permissions tab in the menu. We can see there are by default two types of roles: Public and Authorized. We navigate to Public role and select:

Alt Text

And that's it. Our API is ready. Now we only need to make our web application.


Angular Application

Install the Angular CLI with the following command:

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

Run the following commands at the root of your strapi server to create and run a new angular app:

ng new blog-web 
cd blog-web 
ng serve
Enter fullscreen mode Exit fullscreen mode

If you navigate to http://localhost:4200/ you will able to see the new app.

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 src folder and run the following commands:

mkdir services
cd services
ng g s page
ng g s post
ng g s content
Enter fullscreen mode Exit fullscreen mode

Angular CLI will create these services so we are ready for coding. In environment.ts we will put our API URL.
Alt Text

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 post and content services.

NOTE: Before using HttpClient we need to register into app-module.ts

  1. Go to app-module.ts
  2. Import the HttpClientModule from @angular/common/http,
import { HttpClientModule } from '@angular/common/http';
Enter fullscreen mode Exit fullscreen mode
  1. Add it to the @NgModule.imports array :
imports:[HttpClientModule,  ...]
Enter fullscreen mode Exit fullscreen mode
  • post-service.ts

  • content-service.ts

Next, we will create post-component that will contain style and functionality for posts and we will use app-component for displaying our landing page. Navigate to app 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:

ng g c post
Enter fullscreen mode Exit fullscreen mode

Insert the following code into the post component :

  • post.component.html

  • post.component.css

  • 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="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/cosmo/bootstrap.min.css">
Enter fullscreen mode Exit fullscreen mode

And we are almost done. The only thing that left is to modify app-component and our blog is ready for use.

  • app.component.html

  • app.component.scss

  • app.component.ts

Congratulations, we successfully built a Blog application.
Alt Text


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.

Discussion (6)

Collapse
tycali17 profile image
tycali17 • Edited

didn't help making a usable blog but at least builds a 'hello world' version that you then can make into something workable/usable.

Collapse
mkubdev profile image
Kubdev Author

Sincerly, im confused about your POV.
This is a simple quick guide to plug Strapi + Angular. If you want to industrialize your apps, just fetch any content you want and save them to DB, then use it with Strapi.

More informations here : strapi.io/documentation/developer-...

Please, don't be upset, life is good.

Collapse
tycali17 profile image
tycali17 • Edited

Updated the post. You missed the point of the comment, but it's cool. It's funny you resorted to an argument instead of talking reasonably, I've literally been grappling with strapi for so long with no success with angular that I had to use Contentful. So as much as you wanted this article to have any sort of help, it wasted a ton of time because it stopped before any real use. Wait until you have to populate the page with images as well in a dynamic fashion, none of your code would ever suffice and I doubt Strapi as a whole suffices either at this point. If you've been where I'm at right now in development, you'd know exactly why I'm talking the way I am. Which tells me you may have just been filling a page like most writers, which is fine.

Don't get me wrong, maybe all you could have done is make an entry-level skeleton that still takes some strife to get going (or doesn't work at all, depending on needs). But for those still trying to make a great, dynamic blog and can't hack it with Angular/Strapi, try Angular + Contentful for dynamic image rendering, since NO blog has the exact same image structures set up in each and every post.

Please don't get defensive, life is good.

Thread Thread
mkubdev profile image
Kubdev Author

When i replied, your comment wasn't updated.. lol. You was upset to not find a complete example to match your context and i'm sorry for that.
Yes, it's an entry-level skeleton, nothing more; Like i said, you can develop your own strapi-plugin to do what you want and use strapi for the CMS purpose..

Contentfull is far better than Strapi though atm! :D

Username checked, i was defensive because it was your first comment on dev.to! So welcome to the community, and enjoy.

Thread Thread
tycali17 profile image
tycali17 • Edited

Thanks. You have no idea how brutal dealing with that was and making it practical for usage in Angular, people only want to provide full solutions in React ;/ but yes Contentful works dynamically with hella elbow grease. Thanks mate

Thread Thread
mkubdev profile image
Kubdev Author

Do you use the free community contentfull?
Your welcome!