Originally written by Gurmeet Singh for Cosmic JS Developer Articles In this tutorial, I’m going to show you how to build a blog powered by Angular and hosted on the Cosmic JS App Server. TL;DR . Download the GitHub repo . Check out the demo Prerequisites You’ll need the node JS, npm and Angular cli pre-installed. Make sure you already have them before you start. You can refer to on how to do this. Angular docs Getting Started Here we are going to create the Angular project. We’ll use ng cli to do it. So once you’ll have all prerequisites installed, you’ll need to setup the new Angular project: ng new cosmic-angular It will install the Angular app on your system with the name “cosmic-angular”. Now run the following commands: cd cosmic-angular   ng serve --open It will run your app on the browser on default port 4200 i.e. http://localhost:4200/ Setting things up with Cosmic JS Start by creating the bucket and remember the bucket name: Then create a new object type named ‘blogs’ and please remember the object type slug (’blogs’). It will store all the blogs published. Now create a new object name ‘registeruser’, which will store the information about new users and we will also use it for logging in purpose. You’ll also need to create the Bucket write key. It’s necessary to allow users upload blogs and create accounts. Open Settings page and click ‘Generate new key’ on API Write Access Key then copy generated key and save the changes. Angular Configuration Create file: src/config/cosmo.config.ts to match the following: Keep in mind that, components, services, models and configuration files should be in different folders so that they can be differentiated easily. Cosmic Service for Angular We’re planning to use Cosmic JS Objects in more than one Angular component. In such case makes sense to create a dedicated service and store all Cosmic JS related things such as bucket name, write key, etc in a single place. Let’s create src/app/services/cosmic.service.ts with the following contents: This service has many methods, we are explaining them: getUser(): It is used to get details of a registered user addUser(): To register the new user addBlog(): To save blog to Cosmic server showAllBlogs(): To fetch all blogs saved on server showBlogs(): Fetch blogs of logged in user singlePostHome(): To show single selected blog login(): Used to log user in Cosmic Model for Angular Create a model under src/app/models/cosmic.model.ts with content: Here we declared two classes for registering user and for saving blogs on server. View All Blogs Component Create src/app/components/allblogs/allblogs.component.ts file with the following content: Here we imported the cosmic service to hit the API of cosmic JS server. The main function showAllBlogs() is fetching complete data from server stored under the object ‘blogs’. Dashboard Component in Angular Create dashboard component in component section for logged in users. Here make some navigation for user to add blog, view his own posts, view all posts and for logout too. path of this component will be: src/app/components/dashboard/dashboard.component.ts, and content will be: In this component we made some navigation Add Blog, My Blogs, All Blogs, Logout with functions addNewBlog(), viewBlogs(), viewAllBlogs() and logout() respectively. Showing Single Blog Create a new component to show the selected single post to user with name usersinglepost.component.ts. The code is: Here we created a method post() which is fetching one blog from the server according to blog_id provided to it. User Registration — An Angular Part This is the main part in which you will have to make a register component to register the user, and also it should check the duplicate user at the same time. Path is: src/app/components/register/register.component.ts. The content is: Here is the main function named register(), which is registering the new user. In which firstly we are checking for duplicate user, and if username already exists it will show a message otherwise it will create new account and navigate to login page. Logging User In In this component, we will log the user in by matching provided user details in registeruser object available on server. The content of login.component.ts is: In login() function we are calling the cosmic server and login() function present there. It is matching the records on cosmic server and saving the user details on local storage to keep the user login. Exactly What’s Happening Here? On this blog, at home page you will get all blogs from all users. And you can read one single blog by clicking Read More button. Here you can register a new account and after successful register you can login. Since we are using cosmic JS server as back-end so everything is stored on this server. After login, you will be navigate to dashboard on which you can publish a blog, read your own blogs, check all blogs from all users and finally you can logout . Now you can run complete project on localhost. Content Modeling You should create different object types for different types of data. In our case, we created an object type names blogs and second registerusers. Blogs with contain all blogs published on our blog and register user will store data of users registered. , which will contain all posts published under some blogs and media uploaded for each blog or post respectively. Later we will add another object type named posts and photos Above screenshot is showing our blogs -object type. Blogs published are shown here. This picture is showing all objects present on our server. There are two object types are shown, named: blogs and registerusers. So we store all data on cosmic js server in the form of different objects and these objects are categorised as object types. Deploy to Cosmic JS servers This is main step of this tutorial, in which we are going to deploy this Angular blog on cosmic JS server. There are some requirements: You must have a public GIt repo depending on your platform must be met Specific requirements Now follow the following steps: Modify package.json Here you have to specify the versions of angular cli and compiler cli that means angular version: Prepare software Now run the following command: npm install --save express now add following code to package.json Now create an app.js file and add following code: Now Build Angular App for Production Add the following code to app.json: Now all tasks are completed and your app is ready to deploy on Cosmic JS server. Deploy it Go to deploy section under settings > web hosting on your Cosmic server dashboard. Add git repo and click on the deploy button. Conclusion By using the Cosmic JS app server you can quickly deploy your app to hosting by using your public git repo. Here you are free free from worries of server configuration and software installation. If you have any comments or questions about building websites and apps with Cosmic JS, and . reach out to us on Twitter join the conversation on Slack

Fetch

Heroku

Slack

Twitter

QuickStart an Angular Blog using a CMS API

Integrating Cosmic-powered Content with Hubspot

Follow me on Twitter

Read My Stories

Too Long; Didn't Read

How to Build a Blog Using Angular and Cosmic JS

How to Build a Blog Using Angular and Cosmic JS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Things to Know When Building a Content-Driven Application

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

16 JavaScript Protips [2020 Edition]

5 Things to Know When Building a Content-Driven Application

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

16 JavaScript Protips [2020 Edition]

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps