<p data-default-tab="js,result" data-height="396" data-pen-title="MPWrvr" data-slug-hash="MPWrvr" data-theme-id="0" data-user="Gurmeet142">In this tutorial, I&rsquo;m going to show you how to build a blog powered by Angular and hosted on the Cosmic App Server.</p><h2>TL;DR</h2><p><a href="https://github.com/cosmicjs/angular-blog" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a><a href="https://github.com/Dev0515/Cosmo-Angular" rel="noopener noreferrer" target="_blank">.</a><br><a href="https://cosmicjs.com/apps/angular-blog" rel="noopener noreferrer" target="_blank">Check out the demo</a>.</p><h2>Prerequisites</h2><p>You&rsquo;ll need the node JS, npm and Angular cli pre-installed. Make sure you already have them before you start. You can refer to <a href="https://angular.io/guide/quickstart">Angular docs</a> on how to do this.</p><h2>Getting Started</h2><p>Here we are going to create the Angular project. We&rsquo;ll use ng cli to do it. So once you&rsquo;ll have all prerequisites installed, you&rsquo;ll need to setup the new Angular project:</p><p><code>ng new cosmic-angular</code></p><p>It will install the Angular app on your system with the name&nbsp;&ldquo;cosmic-angular&rdquo;. Now run the following commands:</p><p><code>cd cosmic-angular<br>ng serve --open</code></p><p>It will run your app on the browser on default port 4200 i.e. <a href="http://localhost:4200/"></a><a href="http://localhost:4200/">http://localhost:4200/</a></p><h2>Setting things up with Cosmic</h2><p>Start by creating the bucket and remember the bucket name:</p><p>Then create a new object type named &lsquo;blogs&rsquo; and please remember the object type slug (&rsquo;blogs&rsquo;). It will store all the blogs published. Now create a new object name &lsquo;registeruser&rsquo;, which will store the information about new users and we will also use it for logging in purpose.</p><p>You&#39;ll also need to create the Bucket write key. It&#39;s necessary to allow users upload blogs and create accounts. Open Settings page and click &#39;Generate new key&#39; on API Write Access Key then copy generated key and save the changes.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1ca843f0-c228-11e8-b221-e37a82f35b47-Screenshot%20from%202018-09-26%2013-37-49.png" class="fr-fic fr-dii"></p><h2>Angular Configuration</h2><p>Create file: src/config/cosmo.config.ts to match the following:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/f5f6456358b8e74a2df066f13ce6300a#file-cosmo-config-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/f5f6456358b8e74a2df066f13ce6300a#file-cosmo-config-ts" class="embedly-card"></a></div><p>Keep in mind that, components, services, models and configuration files should be in different folders so that they can be differentiated easily.</p><h2>Cosmic Service for Angular</h2><p>We&#39;re planning to use Cosmic Objects in more than one Angular component. In such case makes sense to create a dedicated service and store all Cosmic related things such as bucket name, write key, etc in a single place. Let&#39;s create src/app/services/cosmic.service.ts with the following contents:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/f72a7a5bef0e6cd84f1600bd062bd901#file-cosmic-service-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/f72a7a5bef0e6cd84f1600bd062bd901#file-cosmic-service-ts" class="embedly-card"></a></div><p>This service has many methods, we are explaining them:</p><ul><li>getUser(): It is used to get details of a registered user</li><li>addUser(): To register the new user</li><li>addBlog(): To save blog to Cosmic server</li><li>showAllBlogs(): To fetch all blogs saved on server</li><li>showBlogs(): Fetch blogs of logged in user</li><li>singlePostHome(): To show single selected blog</li><li>login(): Used to log user in</li></ul><h2>Cosmic Model for Angular</h2><p>Create a model under src/app/models/cosmic.model.ts with content:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/eefcc4030cbc00abb9b59dbad9df8f5e#file-cosmic-model-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/eefcc4030cbc00abb9b59dbad9df8f5e#file-cosmic-model-ts" class="embedly-card"></a></div><p>Here we declared two classes for registering user and for saving blogs on server.</p><h2>View All Blogs Component</h2><p>Create src/app/components/allblogs/allblogs.component.ts file with the following content:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/01332f41e9aac1391a7398c921a18dfa#file-allblogs-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/01332f41e9aac1391a7398c921a18dfa#file-allblogs-component-ts" class="embedly-card"></a></div><p>Here we imported the cosmic service to hit the API of Cosmic server. The main function showAllBlogs() is fetching complete data from server stored under the object &lsquo;blogs&rsquo;.</p><h2>Dashboard Component in Angular</h2><p>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:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/d65162de7eb1b8404e21129e53036e31#file-dashboard-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/d65162de7eb1b8404e21129e53036e31#file-dashboard-component-ts" class="embedly-card"></a></div><p>In this component we made some navigation Add Blog, My Blogs, All Blogs, Logout with functions addNewBlog(), viewBlogs(), viewAllBlogs() and logout() respectively.&nbsp;</p><h2>Showing Single Blog&nbsp;</h2><p>Create a new component to show the selected single post to user with name usersinglepost.component.ts. The code is:&nbsp;</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/571e358107372a86043afd47324517bb#file-usersinglepost-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/571e358107372a86043afd47324517bb#file-usersinglepost-component-ts" class="embedly-card"></a></div><p>Here we created a method post() which is fetching one blog from the server according to blog_id provided to it.</p><h2>User Registration - An Angular Part</h2><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9e436f20-c228-11e8-bbad-bb8b19df5f76-Screenshot%20from%202018-09-20%2016-23-54.png" class="fr-fic fr-dii"></p><p>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:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/a8cb7e6ebfa3f7774eb879bde77c8839#file-register-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/a8cb7e6ebfa3f7774eb879bde77c8839#file-register-component-ts" class="embedly-card"></a></div><p>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.&nbsp;</p><h2>Logging User In</h2><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/bc4837d0-c228-11e8-8563-5b3b852ee4ac-Screenshot%20from%202018-09-26%2015-37-40.png" class="fr-fic fr-dii"></p><p>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:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/3a20a7fd548855812e8776208c28809c#file-login-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/3a20a7fd548855812e8776208c28809c#file-login-component-ts" class="embedly-card"></a></div><p>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.&nbsp;</p><h2>Exactly What&rsquo;s Happening Here?</h2><p>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 server as back-end so everything is stored on this server.&nbsp;</p><p>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 .</p><p>Now you can run complete project on localhost.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d15e03c0-c228-11e8-8cd9-2fa167d223d5-Screenshot%20from%202018-09-26%2016-02-47.png" class="fr-fic fr-dii"></p><h2>Content Modeling</h2><p>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. <strong>Later we will add another object type named posts and photos</strong>, which will contain all posts published under some blogs and media uploaded for each blog or post respectively.&nbsp;</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ed0cf590-c228-11e8-b221-e37a82f35b47-Screenshot%20from%202018-09-26%2015-45-34.png" class="fr-fic fr-dii"></p><p><br></p><p>Above screenshot is showing our blogs -object type. Blogs published are shown here.&nbsp;</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ffee7c60-c228-11e8-b221-e37a82f35b47-Screenshot%20from%202018-09-26%2015-57-16.png" class="fr-fic fr-dii"></p><p>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 server in the form of different objects and these objects are categorised as object types. &nbsp;</p><h2>Deploy to Cosmic servers</h2><p>This is main step of this tutorial, in which we are going to deploy this Angular blog on Cosmic server. There are some requirements:</p><ul><li><p>You must have a public GIt repo</p><p><a href="https://devcenter.heroku.com/">Specific requirements</a> depending on your platform must be met</p></li></ul><p>Now follow the following steps:</p><h2>Modify package.json</h2><p>Here you have to specify the versions of angular cli and compiler cli that means angular version:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/59c08abbca14ac42c92d86d5898225d7#file-package-json' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/59c08abbca14ac42c92d86d5898225d7#file-package-json" class="embedly-card"></a></div><p><br></p><h2>Prepare software</h2><p>Now run the following command:</p><p><code>npm install --save express</code></p><p>now add following code to package.json</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/13852d826cdfeb95683d431ce55cbe63#file-package-json2' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/13852d826cdfeb95683d431ce55cbe63#file-package-json2" class="embedly-card"></a></div><p>Now create an app.js file and add following code:</p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/Dev0515/60f98c33c96535460e559159610652a8#file-app-js' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/60f98c33c96535460e559159610652a8#file-app-js" class="embedly-card"></a></div><p><br></p><h2>Now Build Angular App for Production</h2><p>Add the following code to app.json:</p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/Dev0515/994860a7ef8aead9ab0187cdfdb3045a#file-app-json' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/994860a7ef8aead9ab0187cdfdb3045a#file-app-json" class="embedly-card"></a></div><p>Now all tasks are completed and your app is ready to deploy on Cosmic server.</p><p><br></p><h2>Deploy it</h2><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2dc93990-c229-11e8-b221-e37a82f35b47-Screenshot%20from%202018-09-26%2013-43-06.png" class="fr-fic fr-dii"></p><p><br></p><p>Go to deploy section under settings&gt;web hosting on your Cosmic server dashboard. Add git repo and click on the deploy button.</p><h2>Conclusion</h2><p>By using the Cosmic 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.</p><p>If you have any comments or questions about building websites and apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</p>

Blogs by Gurmeet Singh

Start building today