Single Page App (Angular 5, Bootstrap 4 & Node.js)

1. Home
2. Blog
3. Engineering Titbits
4. Single Page App (Angular 5, Bootstrap 4 & Node.js)

Single Page App (Angular 5, Bootstrap 4 & Node.js)

A beginners guide on how to create a single page app using Angular 5, Bootstrap 4, Node.js® and NPM.

If you’ve been scouring the web in desperate search for a complete tutorial on building a single-page app using the latest and greatest technology, then lucky you — you’ve found the right place! At Secnix Systems, we use this technology on a daily basis delivering robust solutions to a wide range of clients. In this tutorial we will be using the following tech to create our first app from scratch:

Angular 5 – frontend framework – click here to learn more about Angular
Bootstrap 4 – frontend component library – click here to learn more about Bootstrap
Node.js® & NPM – dev environment – click to learn more about Node.js®

Step 1: Getting started

First, you will need a dev environment setup on your machine. If not already installed, you will need to install Node.js® & NPM. You can check if you already have Node.js® & NPM installed by opening up terminal (Mac/Linux) or command prompt (Windows) and running the following commands:

> node -v
> npm - v

If Node.js® & NPM is already installed you will see the version numbers displayed after running the above commands, if not you can download Node.js® & NPM here and run the commands again to check they are installed.

Step 2: Install Angular CLI

Second, install the Angular CLI as it is the fastest and easiest route to creating an Angular app project that works with just a couple of commands. This method also follows the Angular code of best practice.

> npm install -g @angular/cli@latest

Step 3: Create the Angular app project via Angular CLI

Now we have the dev environment setup and Angular CLI installed, and we are ready to create our first app. Type the command `ng new …` with the name you want to give the app. In this tutorial, we will name our first app project “my-first-app” so we will type the command `ng new my-first-app`. This will automatically create the folder structure, files and dependencies for the app project.

> ng new my-first-app

Step 4: Install Bootstrap 4

Next, we need to install Bootstrap 4.

A) Before installing Bootstrap, we must first make sure we are in the directory of our newly created Angular app.

> cd my-first-app

B) Now we are in the project directory, we need to run the following commands to install the Bootstrap 4 framework:

> npm install bootstrap@latest --save
> npm install jquery@latest --save
> npm install popper.js@latest --save

C) Importing Bootstrap 4 styles (CSS) and scripts (JS). Open the project directory in your editor of choice. We want to configure the “.angular-cli.json” file by adding the additional bootstrap resources to the styles and scripts already in the “.angular-cli.json” file. Please see the example below.

     "styles": [
       "styles.css",
       "../node_modules/bootstrap/dist/css/bootstrap.min.css"
       ],
     "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/popper.js/dist/umd/popper.min.js",
       "../node_modules/bootstrap/dist/js/bootstrap.min.js"
       ],

Step 5: Test Bootstrap

A) Now to test the angular app and bootstrap loading. We will run the following command to serve the app and watch for any changes `ng serve –watch`.

> ng serve --watch

Once webpack has compiled successfully, we can open our web browser and visit http://localhost:4200/. We are using Chrome and can inspect the working page and see within the tags that our Bootstrap CSS is now loading.

B) To take it a step further, fetch Bootstrap 4 component code from https://getbootstrap.com/docs/4.0/components/. For convenience, we will use the dropdown navbar code to test our app.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
<div class="collapse navbar-collapse" id="navbarNavDropdown">
    
<ul class="navbar-nav">
      
<li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>

      
<li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>

      
<li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>

      
<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>

<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>

      </li>

    </ul>

  </div>

</nav>

Open the “app.component.html” file under the app projects “src” folder.

Now, replace all the existing code with the Bootstrap 4 component code. In this tutorial, it is the dropdown navbar code we are using.

If we visit http://localhost:4200/ again, we can see our app page has updated automatically now showing the Bootstrap 4 navbar.

Conclusion

In this article, we have shown how to create a single-page application using Angular, Bootstrap, and Node.js®. In the next article, we will continue connecting with Firebase. We hope you have enjoyed this titbit, and we look forward to you joining us for the next phase!