Welcome to Part 9 of Build a Full Stack Reddit Clone with Spring boot and Angular series. In Part 8, we completed building the backend API part. We saw how to implement JWT Invalidation and Logout using Refresh Tokens.
What are we building?
In this article, we will start building our Front end application. We will use the latest angular version – Angular 9 (at the time of writing this article).
I will be using Visual Studio code for this tutorial, you can download it here – https://code.visualstudio.com/download
If you are a visual learner like me, then check out the Video version of this tutorial:
Download Source Code
The source code of this project, is hosted on Github –
Backend – https://github.com/SaiUpadhyayula/spring-reddit-clone
Frontend – https://github.com/SaiUpadhyayula/angular-reddit-clone
Download Angular CLI
After installing Visual Studio Code or your favorite IDE, make sure to install Angular CLI
Create a new application
After you have installed Angular CLI, you can generate the application by typing the below command:
ng new angular-reddit-clone
After that open the newly created application in VS Code.
Install Bootstrap
Now let’s install the latest version of bootstrap for our application
npm install –save bootstrap
Once the bootstrap is installed in our project, we have to inform the CLI to include bootstrap files in the final bundle it creates. By default Angular CLI won’t include the bootstrap CSS files in the bundle it creates when running the application.
We can add the location of the Bootstrap CSS inside the “styles” array of the angular.json file.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],Now let’s start the application by running the following command:
ng serve
Angular CLI should start our application at http://localhost:4200
Troubleshooting startup problems
Based on the Angular CLI Version you are running you may encounter the below error after running ng serve command:
Schema validation failed with the following errors:
Data path “.builders[‘app-shell’]” should have required property ‘class’.
Error: Schema validation failed with the following errors:
Data path “.builders[‘app-shell’]” should have required property ‘class’
You may have to update the “@angular-devkit/build-angular” dependency in your package.json file based on your Angular CLI version
Angular CLI v8.3.19 -> 0.803.19
Angular CLI v8.3.17 -> 0.803.17
Angular CLI v7.3.8 -> 0.13.8
Angular CLI v6-lts -> 0.8.9Once I update the build-angular version to 0.13.9 I was able to start the application.
This is how our application should look like
Create Header Component
Now let’s create our first component ie. Header Component
ng g c header
This should create the following output:
Now let’s open the header.component.html file and paste the below html code:
header.component.html
<header>
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
<div class="flex-grow-1">
<a aria-label="Home" class="logo" routerLink="/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="reddit-icon-svg">
<g>
<circle fill="#FF4500" cx="10" cy="10" r="10"></circle>
<path fill="#FFF"
d="M16.67,10A1.46,1.46,0,0,0,14.2,9a7.12,7.12,0,0,0-3.85-1.23L11,4.65,13.14,5.1a1,1,0,1,0,.13-0.61L10.82,4a0.31,0.31,0,0,0-.37.24L9.71,7.71a7.14,7.14,0,0,0-3.9,1.23A1.46,1.46,0,1,0,4.2,11.33a2.87,2.87,0,0,0,0,.44c0,2.24,2.61,4.06,5.83,4.06s5.83-1.82,5.83-4.06a2.87,2.87,0,0,0,0-.44A1.46,1.46,0,0,0,16.67,10Zm-10,1a1,1,0,1,1,1,1A1,1,0,0,1,6.67,11Zm5.81,2.75a3.84,3.84,0,0,1-2.47.77,3.84,3.84,0,0,1-2.47-.77,0.27,0.27,0,0,1,.38-0.38A3.27,3.27,0,0,0,10,14a3.28,3.28,0,0,0,2.09-.61A0.27,0.27,0,1,1,12.48,13.79Zm-0.18-1.71a1,1,0,1,1,1-1A1,1,0,0,1,12.29,12.08Z">
</path>
</g>
</svg>
<span class="reddit-text">
Spring Reddit Clone
</span>
</a>
</div>
<div class="flex-grow-1 float-right">
<a routerLink="/signup" class="float-right signup mr-2">Sign up</a>
<a routerLink="/login" class="float-right login mr-2">Login</a>
</div>
</nav>
</header>We have a header tag obviously and inside we have a navbar tag where to the right side we have the links for Signup and Login buttons and on the left side we have the SVG icon for Reddit and the logo text- Spring Reddit Clone.
Now open the app-component.html file and replace the contents inside the file with below:
<app-header></app-header>And now when you go to your browser, this is how the home page looks like:
As you can see it is not so pretty, let’s add the below CSS code by opening the header.component.css file
header{
border-radius: 1px solid;
}
.reddit-icon-svg{
height: 50px;
padding: 8px 8px 8px 0;
width: 50px;
}
.reddit-text{
font-weight: 700;
height: 50px;
width: 50px;
}
.logo{
text-decoration: none;
}
.login, .signup{
background-color: transparent;
border-color: #0079D3;
color: #0079D3;
fill: #0079D3;
border: 1px solid;
border-radius: 4px;
box-sizing: border-box;
text-align: center;
letter-spacing: 1px;
text-decoration: none;
font-size: 12px;
font-weight: 700;
letter-spacing: .5px;
line-height: 24px;
text-transform: uppercase;
padding: 3px 16px;
opacity: 1;
}
.signup{
background-color: #0079D3;
border-color: #0079D3;
color: aliceblue;
}
.signup:hover{
opacity: 0.6;
}Once you save the contents and go to the browser, you can see that our home page looks much nicer and similar to the Reddit application.
Conclusion
So this is it for the Part 9 of Build a Full Stack Reddit Clone with Spring boot and Angular series, we saw how to set up our application in Angular and create the header of our application, in the next post we will see how to implement Signup functionality in our Angular application.
I will see you in the next blog post. Until then Happy Coding Techies!
