You're reading from Vue.js 3 Design Patterns and Best Practices

Product type Book

Published in May 2023

Publisher Packt

ISBN-13 9781803238074

Pages 296 pages

Edition 1st Edition

Languages

JavaScript

Concepts

Design Patterns

Author (1):

Pablo David Garaguso

Table of Contents (16) Chapters

Preface

Chapter 1: The Vue 3 Framework

Chapter 2: Software Design Principles and Patterns

Chapter 3: Setting Up a Working Project

Chapter 4: User Interface Composition with Components

Chapter 5: Single-Page Applications

Chapter 6: Progressive Web Applications

Chapter 7: Data Flow Management

Chapter 8: Multithreading with Web Workers

Chapter 9: Testing and Source Control

Chapter 10: Deploying Your Application

Chapter 11: Bonus Chapter - UX Patterns

Final words

Index

Why subscribe?

Other Books You May Enjoy

Appendix: Migrating from Vue 2

Deploying Your Application

Working on and developing our application would come to a sad end if we could not publish the final product. While quite straightforward, presenting our application on the internet does require attention to a few details and being familiar with some terms and hosting possibilities.

In this chapter, we will learn about the following:

What is involved in publishing a web application on the internet
Considerations for building our application for deployment
Becoming familiar with the terms and processes to register a domain
Configuring a web server to host our Single-Page Application (SPA) or Progressive Web Application (PWA)
Securing our web application's server with Let’s Encrypt

The main purpose of this chapter is to give you the tools to understand the steps needed to publish and secure a website, and by extension, also our SPA or PWA.

Technical requirements

This chapter is mostly informative, but a few configuration files have been uploaded to the book’s repository as examples, which can be found here: https://github.com/PacktPublishing/Vue.js-3-Design-Patterns-and-Best-Practices/tree/main/Chapter10.

What is involved in publishing a web application?

Publishing a Vue 3 web application is not that much different from doing so for any other website, save for a few key differences. In this chapter, we will consider a clean installation, meaning that we will procure all the elements involved by ourselves. At its most basic, we need to consider the following:

A domain name for our site/application
The destination path for our application
The hosting service or type
The web server software
Procuring a security certificate

The preceding items also give us a simple formula for our preparations. Let’s go one by one, explaining each necessary term and concern as we move forward.

Domains, Domain Name Servers (DNS), and DNS records

Every computer connected to a network receives a unique identificatory address to distinguish it from the others on the same network. These are called Internet Protocol (IP) addresses, and nowadays, there are two in operation...

Considerations for building our application for deployment

Once we have our domain/subdomain, we need to decide (or know) on which path the application will be located. The path is what follows the domain, in segments separated by a forward slash (/) – for example, mydomain.com/store/product.html. These sections are called “paths” because they follow the same directory structure as mirrored in the local storage. Our application will be served through a web server. These amazing pieces of software are built around the concept of serving files following the directory structure (folder/subfolder/file...). Internally, our server will match a domain request to the files in a local directory. Here is where we need to know whether the Vue application will be placed at the root, or on a path (directory), as we need to indicate this for the build process if we are using Vue Router in the web history mode (review Chapter 5, Single-Page Applications, if you need a refresher...

Web server options and configurations

When is time to upload our application to a server, we are faced with many options, based on the type of service and web server application provided. This combination of items is usually referred to as the “hosting” server, which includes the operating system, machine configuration, architecture type, and especially, the web server software. Here is a list of some of the most common options for each category:

Transferring your files to the server

Armed now with the domain pointing to our server and the configurations in place, it is time to upload our distribution files. Depending on your choice of hosting, this could be done through a web interface, a File Transfer Protocol (FTP) application, or secure transfer over the Secure Shell Protocol (SSH). For the last two options, it is recommended to use an application that takes care of the heavy lifting. An excellent option is to use FileZilla (https://filezilla-project.org/), which handles the aforementioned protocols. It is available for Linux, Windows, and macOS.

As we mentioned in Chapter 9, Testing and Source Control, you can also configure your VPS/server to pull the source code from a remote repository using Git. In this case, the application folder will be configured to point to the /dist folder in the local repository. We could, for example, open a remote terminal to the server, trigger a synchronization (pull), and then bundle...

Protecting your web application with Let’s Encrypt

Internet addresses are included at the very beginning of the protocol being used. By default, all web navigation is done using the Hypertext Transfer Protocol (HTTP), which, while foundational, is not considered secure. When an encryption layer between the client and the server is provided, then the communication is done over HTTPS (the S standing for Secure). This encryption layer is provided and validated by a certifying authority, so the certificate must be bought from such one. Hosting providers usually have the option to buy and install one on their servers, but there is also a free and reliable alternative provided by the Let’s Encrypt foundation (https://letsencrypt.org/).

To install a Let’s Encrypt certificate, you need shell access to your server. If not, then you must rely on the service provided by the hosting. The list of certified hosting providers compatible is here: https://certbot.eff.org/hosting_providers...

Summary

In this chapter, we covered the basics for publishing our Vue application in its own public space on the internet. We also learned important concepts for understanding instructions when buying and reserving a domain and setting DNS records if and when prompted to do so. We also learned about how to accommodate our bundle configuration when using the HTML5 history mode in Vue Router, the different types of online hosting we can hire, options for copying our distribution files onto the production server, and guidelines for securing our website with a free Let’s Encrypt certificate to serve our applications over HTTPS. All of these are important skills, and you will benefit from having the experience of executing these skills at least once.

With the deployment of our application, we have covered in this book the main steps and topics to construct a Vue 3 application, from the introduction of the framework all the way to testing our individual components and installing...

Review questions

What is a top-level domain, and how is it different from a domain?
Is there a limit to the number of subdomains we can create for our domain? Why?
What is a DNS? What are DNS records?
What are the options currently for publishing your web application on the internet?
What considerations in our code and web server do we need to make when using Vue Router in web history mode?
What are some common web servers found in shared hosting and VPSes?
What is certbot and what does it do?

The rest of the chapter is locked

You have been reading a chapter from

Vue.js 3 Design Patterns and Best Practices

Published in: May 2023 Publisher: Packt ISBN-13: 9781803238074

A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.

Unlock this book and the full library FREE for 7 days

Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of

Start free trial

Renews at $15.99/month. Cancel anytime}

Authors (1)

Pablo David Garaguso

Pablo David Garaguso was born in Argentina, and graduated from computer sciences in CAECE University Mar del Plata, and also an MBA in CEMA University in Buenos Aires. He worked as Computer Consultant and Manager in multiple positions in South America and Europe for almost 20 years. He currently works as a Solutions Architect and full-stack engineer for FamilySearch Int. in Finland. His systems and applications are used in Latin America, Europe, Africa, and other parts of the world.

See other products by Pablo David Garaguso

Personalised recommendations for you

Based on your interests and search pattern

C++ Programming for Linux Systems

This book covers the essential system programming tools and helps you explore the features of C++20. It emphasizes important details to maintain code quality and tackle everyday challenges of developing software for high performance, optimization, and more.

Sep 2023 9 hours 36 minutes

Expert C++

Discover advanced programming techniques, the latest features of C++17 and C++20, and best practices for memory management, debugging, testing, and large-scale application design with Expert C++. Ideal for experienced developers advancing to proficient programmers and building professional-grade C++ applications.

Aug 2023 20 hours 8 minutes

iOS 17 Programming for Beginners

iOS 17 Programming for Beginners, Eighth Edition is your comprehensive guide to learning the art of iOS app development. Whether you dream of creating the next chart-topping app or simply want to enhance your programming skills, this book is your trusted companion on this exciting journey.

Oct 2023 20 hours 8 minutes

Developer Career Masterplan

Written by industry experts that have spent the last 20+ years helping developers grow their career path towards senior developer positions and beyond. This book provides a comprehensive guide, sharing examples and stories from their global careers. By the end, you’ll have the knowledge to create a clear career progression plan as a technical professional.

Sep 2023 10 hours 20 minutes

Refactoring with C#

In Refactoring with C#, you’ll explore the process of safely refactoring modern .NET code using Visual Studio features, advanced unit tests, AI assistance, and custom Roslyn analyzers.

Nov 2023 14 hours 28 minutes

Python Real-World Projects

Amplify your developer journey by curating a dynamic project portfolio that outshines traditional resumes. Delve into the Python realm through immersive projects, mastering core concepts while constructing comprehensive modules and applications. From data acquisition prowess to impactful data visualization, Python Real-World Projects arms you with essential skills to beat the competition.

Sep 2023 15 hours 56 minutes

The MVVM Pattern in .NET MAUI

The MVVM Pattern in .NET MAUI enables developers to master MVVM principles and effectively apply them to .NET MAUI. This book uses real-life examples and covers complex problems to help you successfully apply MVVM with .NET MAUI to confidently develop robust and high-performing cross-platform apps.

Nov 2023 12 hours 52 minutes

Extending Microsoft Business Central with Power Platform

Extending Business Central with the Power Platform is a step-by-step guide for Business Central professionals to create solutions that automate business processes, explain complex workflow approvals, and integrate with hundreds of other systems, without traditional development. It’ll guide you in customizing Business Central with Power Platform.

Aug 2023 15 hours 16 minutes

Extending Microsoft Business Central with Power Platform

Aug 2023 15 hours 16 minutes

Quantum Computing Algorithms

The book emphasizes intuitive ideas behind quantum algorithms in ways that other books don’t cover, striking a careful balance between no math and too much math. To get the most from this book, you should be comfortable with basic algebra and writing simple computer code. No prior understanding of quantum physics is needed to get started.

Sep 2023 11 hours 24 minutes

Python – Complete Python, Django, Data Science and ML Guide

Unlock Python's full potential with this 50+ hour course! From programming to web and game development, data manipulation, and machine learning, gain the skills required to succeed in various Python-related careers. With practical tasks, hands-on experience, and a strong foundation in Python, you'll be ready to tackle real-world challenges and take advantage of the many opportunities this versatile language offers.

Nov 2023 50 hours 30 minutes

Python – Complete Python, Django, Data Science and ML Guide

Nov 2023 50 hours 30 minutes

Operating system	Linux or Windows	For our Vue 3 application, this choice is inconsequential
Hosting type	Shared	Our application will reside in a server in a private area of the storage but will share all the resources with other applications. Access to configuration is usually done through a web control panel
	Virtual Private...