5 Technical Tips for Responsive Web App Development Using Bootstrap 4 and Angular 5

Dev Technology is using Google’s Angular framework for front-end web development on a variety of projects. As such, we offer some of the following tips for improving your Angular 5 with Bootstrap 4 Responsive Web Application development projects:

TIP #1: Use the Angular CLI for quickly creating new projects, adding new modules, automating test harness generation, etc. from the Command Line Interface. The Angular CLI makes Angular Project Development and Management much faster and easier than trying to build a project from scratch.

TIP #2: Use Microsoft’s Visual Studio Code for Typescript and other file type editing. This Code Editor is free and provides nice syntax highlighting and auto-completion. It facilitates importing modules from a wide array of programming languages. I also really like Visual Studio Code for its TypeScript linting.

TIP #3: Take a Mobile-First approach to developing your web application. This means, you should constantly look at your burgeoning web application through the eyes of a mobile device, first-and-foremost, throughout the development process. This can be important because getting your web application to look nice and useable on mobile devices is often harder than on a Desktop Web Browser. Here are some tips on how exactly to do that:

  • Download the Android Studio IDE from Google and launch an Android Emulator (i.e., run Tools > Android > AVD Manager, create a Virtual Device. Choose an Android OS version >= 4.1). According to this link, Android Browsers starting with Jelly Bean (4.1) and higher are supported.
The Android Studio AVD Manager for Creating and Running an Android Simulator
  • Start your Angular 5 local server from the command line using the –host= directive as this will allow your Android Simulator Web Browser to connect to your local ng server (e.g., `ng serve –host=`).
  • Edit the polyfills.ts file to enable all of the es6 imports. This is needed for the Android Web Browser to work with your Web App. For example:
Enable es6 imports in polyfills.js
  • Use `ipconfig /all` or `ifconfig -a` to determine the IP address of your local machine and then point your Android Simulator’s Web Browser to that web address. Once loaded, the browser should automatically refresh itself whenever you make code changes. This makes for fast, agile code iterations.
Android 6.0 Simulator Showing Web App Under Development.

TIP #4: A quick way to integrate Bootstrap 4 into your project is by simply including the CDN URL in your main index.html file. For example:

Including the Bootstrap 4 CDN URLs in your project’s main index.html

Once Bootstrap is integrated into your project, you can leverage this framework for User Interface Responsiveness and aesthetics across a wider variety of screen form factors, from Desktop to Mobile.

TIP #5: Leverage a Jenkins CI/CD Pipeline for building, testing and deploying your code on a continuous basis whenever new code is checked-in to your code repository. By also leveraging Docker Containers as part of your build and deploy strategy, you can further reduce environment headaches by helping to ensure that your Responsive Web Application runs similarly in all user environments.

For a more in-depth look at some of these tips in action, take a look at our ‘DHS Form G28’ project in GitHub.