Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.
Posted on Jan 24th 2018
We will be creating a blog using Angular 5, and Firebase in a 3 part series – our app will allow for easy creation and publishing of blog posts. A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. In order to improve the user experience, we want to render the pages server side and send the generated static content to the client side. The technology that allows us to do this is Angular Universal. Angular Universalgenerates static application pages on the server through a process called server-side rendering (SSR). It can generate and serve those pages in response to requests from browsers. It can also pre-generate pages as HTML files that you serve later.
We would recommend that you follow the tutorial step by step, copying snippets from the article into a project you create. This will help you understand both the tool as well as Angular Universal concepts better. However, the final source is also available on GitHub.
New Angular Project
If you don’t already have Angular IDE, please download and install it before starting this tutorial.
Open Angular IDE, and from the top menu select File, then New, then Angular Project. In the New Angular Project wizard, enter FireBlog as the project name, 1.6.5 as the Angular CLI version, and you can choose whatever Node and NPM versions you wish, or stick with the defaults. Click Next, then click Finish.
Project Module Directories
Our project is a simple blog built with Angular, which will use FireBase for authentication and as a database. In this project we will use at least two modules to organize our code:
Editor Module: This module will provide functionality authors to create and modify content for the blog.
Reader Module: This module will provide functionality for users who come to the blog to read an interact.
Do you need a full-stack IDE that can cover both your back-end and front-end needs? Ready to go beyond what Eclipse has to offer? Try our fullstack MyEclipse IDE, which will rock your world.
Components for Editor Module
We need at least two components for the editor module:
EditorPostsComponent to show the title, published status and other summary details for a list of all blog posts in the application.
EditorPostComponent to show the details for a single post and allows us to edit this single post.
In the top menu select File > New > Component, in the New Component dialog, enter /FireBlog/src/app/modules/editor/components as Source Folder and editor-posts as element name, and click Finish. Also create a new component in /FireBlog/src/app/modules/editor/components with element name editor-post, click Finish.
The Editor Module
For our Editor Module we will need two classes, EditorModule – which will be our feature module, and EditorRoutingModule – which will configure the routing for EditorModule.
In the project explorer, right click on the editor folder.
In the pop up menu select New > Class.
In the ‘New Typescript Class’ wizard, enter EditorModule as class name, and editor.module.ts as file name, then click Finish.
Repeat steps 1 and 2.
In the ‘New Typescript Class’ wizard, enter EditorRoutingModule as class name, and editor-routing.module.ts as file name, then click Finish.
Update the content of src/app/modules/editor/editor-routing.module.ts:
In EditorModule we import EditorRoutingModule and include it among the imports for NgModuleEditorModule. We also import EditorPostsComponent, and EditorPostComponent, which we add to the declarations for NgModule EditorModule.
Components for Reader Module
We need at least two components for the reader module:
ReaderPostsComponent to show title, published status and other summary details for a list of published blog posts in the application.
ReaderPostComponent for the read only view for a single post.
Create two components with element names reader-posts and reader-postusing FireBlog/src/app/modules/reader/components as the Source folder.
The Reader Module
For our Editor Module we will need two classes, ReaderModule which will be our feature module, and ReaderRoutingModule which will configure the routing for ReaderModule.
In the project explorer, right click on the reader folder
In the pop up menu select New > Class
In the ‘New Typescript Class’ wizard, enter ReaderModule as class name, and reader.module.ts as file name, then click Finish.
Repeat steps 1 and 2
In the ‘New Typescript Class’ wizard, enter ReaderRoutingModule as class name, and reader-routing.module.ts as file name, and then click Finish.
Reader Routing Module
Update the content of src/app/modules/reader/reader-routing.module.ts:
Similar to EditorRoutingModule, we set up an NgModule ReaderRoutingModule, to configure routing for views to be used by readers on the site, we just have two routes, the empty path which will render ReaderPostsComponent to show a list of posts available on the blog, and post/:id to read a particular blog post.
Update the content of src/app/modules/reader/reader.module.ts:
In AppRoutingModule, we have configured our ReaderModule, which imports ReaderRoutingModule to handle urls without the editor prefix and we have configured EditorModule which imports EditorRoutingModule to handle urls with the editor prefix. For example fireblog-domain.tld/post/1 will be routed through ReaderRoutingModule, while fireblog-domain.tld/editor/post/1 will be routed through EditorRoutingModule.
Now let us update the content of src/app/app.module.ts, and import AppRoutingModule and add it to our imports, also checking to ensure PageNotFoundComponent is in the declarations array.
FireBlog is a blog created using Angular 5 and FireBase. It is a technology blog, bringing you the latest updates from around the world. Never miss out on new stuff.
Now let’s update src/app/modules/editor/components/editor-posts/editor-posts.component.html with placeholder text, the full functionality will be implemented in the next post in this series:
Posts will be managed here.
Also update src/app/modules/reader/components/reader-posts/reader-posts.component.html:
Recent posts will be listed here.
Server Side Rendering
So far we’ve been setting up our app, just like we would any regular Angular application. We’re now moving on to the Universal part of this tutorial, setting up Angular Universal.
In order to implement server side rendering, we need to install some additional dependencies. Open a new terminal session in the Terminal+ view, ensuring that the FireBlog project is selected there. Enter the following commands: