Send your feedback

EMAIL
ADD CODE SNIPPET
ADD IMAGE/SCREENSHOTS
VOTE
Deploy Static applications (Angular, React,...) on Zephyr Cloud
Deploy Static applications (Angular, React,...) on Zephyr Cloud

How to deploy front-end applications built with ViteJS in few seconds

 
Fabio Biondi
Fabio Biondi
Google Developer Expert
Microsoft MVP
techs
 

# Introduction

Zephyr Cloud is a platform to accelerate your development workflow by providing a simple way to deploy and manage your applications, cloud agnostic, framework agnostic and bundler agnostic.
To make it short, we can deploy front-end applications in a few seconds.
Zephyr Cloud platform includes many other features and one of the most interesting is definitely the *management and simplification of deployment of MicroFrontend based architectures.
We recommend you to visit the official website and read the documentation for more info about what zephyr offers.

# What will you learn in this article?

1
Creation of Angular and React projects using ViteJS
2
Versioning on GitHub repository
3
Deploy Static applications on Zephyr Cloud
4
(Deploy) Versioning on Zephyr Cloud

# Create a project using ViteJS: Angular, React, ...

First we create a new Angular project using Vite .
Work with any framework
We have tried the whole procedure using both, Angular and React, and they work perfectly. Anyway you could use any other front-end framework supported by ViteJS (Svelte, Vue, ..) and it should work fine.
So, let's create the project running Vite .
terminal
Select following choices during the installation process:

1
Project Name: for example demo-zephyr
2
Framework: Angular
3
Variant: Analog
4
Template: Minimal
5
Analog SFCs: No (this is a new way to write Angular components currently only supported by Analog)
6
Tailwind: No
Vite is required
Zephyr currently only supports the Angular / Analog variant, as the (default) "Angular -> Angular" variant still does not fully support all ViteJS features. The support will probably be added very soon!
No audio
Other Front-End Frameworks / Libraries
We have also tried React -> TypeScript and perfectly works. So we invite you to try it with Vue, Svelte and so on ...

# Install dependencies

Go to the project folder and install all its dependencies:
terminal
Run the project locally:
terminal
A live reload web server will be started where you can try the application on http://localhost:5173
Terminal

# Update the Angular / React template

Since we will be doing several deployments, it may be convenient to display the project version in the HTML template so that it is immediately clear which version is currently online.
So we update the HTML template of the root component in order to display the version number starting from V.0.0.1.

Angular -> Analog

Open src/app/pages/index.page.ts and replace all the content with the following one. We simply print the V.0.0.1 version:
src/app/pages/index.page.ts
The result:
Terminal
React version
You can replicate the same steps in React by editing the src/App.tsx file (or jsx if you're using JavaScript):
src/App.tsx

# Install and configure Zephyr plugin

Now we have to install the plugin of Zephyr for ViteJS: vite-plugin-zephyr .
This plugin is used to deploy on the Zephyr Cloud platform automatically after each build.
Install the plugin:
terminal
Add the plugin to Vite configuration, updating vite.config.ts:

Angular

vite.config.ts

React

vite.config.ts

# Build

When we run the build command we will receive an error from the Zephyr plugin.
It’s all right. Don’t worry. The reason is that we need to connect the project to a Git repository.
terminal
Here is the error that notifies us that git information are needed:
Terminal
 

# Create a Git Repository

Create a repository on your GitHub account. The name you use for the repository is not important. Choose what you prefer.
Terminal
You will be directed to the GitHub report page. Copy the git remote add command (the whole line)
Terminal
Back to your Angular/React project, create the first commit and associate it to the repository:
terminal
Go back to your GitHub project, refresh the page and you should see your source code:
Terminal

# Deploy on Zephyr Cloud

The first step to deploy on Zephyr Cloud is to create a new account:
    1. Visit Zephyr Cloud
    1. Click on Get Started
    1. Create (and confirm) the account
    1. Sign-In
You will then be redirected to the Zephyr Cloud dashboard: https://app.zephyr-cloud.io/
Terminal
Back to the Angular/React project and run the build again:
terminal
The project build will be generated:
Terminal
and it will be automatically deployed on Zephyr that also assign a custom URL (the last line of next screen):
Terminal
The application has been successfully deployed on the Zephyr Cloud platform.
Is this the first deploy?
The first time you build and the Zephyr plugin tries to upload, the browser will be opened and you will be prompted to login.
To view your application's build, click on the generated URL (available in the terminal, as shown on the previous screen).
Terminal
Now back to the Zephyr dashboard, refresh the page and you should see your project in the list:
Terminal
How the path is generated
From the screenshot above you can see that the path is created in this way:
learn-by-do-ing / demo-zephyr / demo-zephyr

1
learn-by-do-ing: this is the GitHub organization name
2
demo-zephyr: GitHub repository name
3
demo-zephyr: the application name in package.json
Click the project name, as shown in the previous screen,to access the project page:
Terminal

# Versioning

The Versions page shows all the deployed project versions, currently only one.
Terminal
So, to verify that the version system works, update your application and make a new deployment.
Open the Angular application again and edit the template using the label: 0.0.2
src/app/pages/index.page.ts
Run the build again:
terminal
A new deployment will be made and a new URL will be assigned to the application:
Terminal
Click the URL to open the application page and you should see the updated version:
Hard reload may be needed to clear the browser's cache
Terminal
Back to Zephyr, refresh the Versions page and you'll see the new version you have just deployed:
Terminal
More Tips
    1. You should also note that the latest deployment is always assigned to the latest_fabio_biondi tag.
    1. You can rollback and re-deploy any previous version just clicking the "Deploy" button of each version

# How to assign a custom domain?

You may be interested in the next article about NameCheap and CloudFlare integration in Zephyr.

Did you like this content?

Your feedback is very important to us!
25
Jan
2025
Fabio Biondi
Fabio Biondi
Google Developer Expert
Microsoft MVP
 
Latest books & video courses