Configure the Angular CLI to serve your application over a secure HTTPS connection locally

Angular CLI logo.
Angular CLI logo.
Image credits: Author

Securing the web has turned into one of the primary goals for browser developers over the years. Providing a private and secure channel of communication is at the forefront of this endeavor. Such a secure channel needs to guarantee confidentiality, integrity, and authenticity — attributes that can only be achieved by encrypting the communication.

HTTPS is one of the key building blocks for a secure web. It encrypts nearly all the information sent between a client and a web service, thereby providing for a secure connection for both your users and your website to communicate. HTTPS became so important that…


No hassle, built-in vanilla JavaScript Array methods to find elements

Image Credits: Author

Locating an element in a list or array is a common task in software development. The goal is to either find the given element’s location or to determine that the element is not part of the collection altogether.

Earlier versions of JavaScript offered a limited set of array search methods. Typically in those versions, when performing a search, a for loop would be the main resource to iterate through the elements and check them individually.

There is nothing wrong with our good old for loop. …


Generate trusted self-signed SSL certificates to enable HTTPS in your local development

Hands holding a device whose screen reads “SECURE SSL ENCRYPTION.”
Hands holding a device whose screen reads “SECURE SSL ENCRYPTION.”
Photo designed by Freepik.

Have you ever found yourself in a position where you needed to add HTTPS to your app running on localhost or some other local domain such as local.my-app.com?

Web browsers have subtle differences when running HTTP vs. HTTPS pages. For instance, on an HTTPS page, any attempts to load JavaScript from an HTTP URL will be blocked. This means that if you’re developing locally using HTTP, you might add a script tag that works just fine on your development machine, but it breaks when you deploy your app to staging or production, which will be running under HTTPS. Sigh…

Worry…


Do you want to set custom host and port to override ng serve default configurations? Let’s do it!

Photo by Blake Connally on Unsplash

ng serve is quite a powerful and handy tool to use when working with Angular 2+. It will build and serve your Angular project via a development server, rebuilding on file changes, and reloading the connected pages.

Angular CLI will auto-generate all the necessary configuration to build and run your project when it is created. Working with the out-of-the-box configuration is just fine in many cases. In some other situations, such as developing and running multiple concurrent Angular projects on the same machine can become a bit of a hassle.

One might say:

Just stop one application and start the…


Do you like using Sass but you think it is too much work to set it up for your project? I am glad to say that it is not!

CSS alone can be a lot of fun, but in larger and/or more complex projects stylesheets can become quite large and hard to maintain. When we face these types of situations, a preprocessor can be of help. Sass lets you use features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that make writing CSS fun again.

CSS preprocessors allow us to write clean, organized, and…


Tooltips are user-triggered messages which display a text label identifying an element, such as a description of its function, or provide additional information about the feature included in it.

Google’s Material Design tooltip section includes:

Tooltips display informative text when users hover over, focus on, or tap an element.

A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop). Continuously display the tooltip as long as the user long-presses or hovers over the element.

Angular Material Tooltip

The Angular Material tooltip provides a text label that is displayed when the user hovers over…

Hicaro Adriano

Software Developer. Angular, NodeJS and Golang enthusiast. Passionate for learning new things.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store