Deploy Static applications (Angular, React,...) on Zephyr Cloud

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

25 Jan 2025

13 snippets

32 mins

v.19

Giorgio Boa

FullStack Developer @ Qarik
Microsoft MVP

Fabio Biondi

Google Developer Expert
Microsoft MVP

# 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?

Creation of Angular and React projects using ViteJS

Versioning on GitHub repository

Deploy Static applications on Zephyr Cloud

(Deploy) Versioning on Zephyr Cloud

# Create Angular & React projects using ViteJS

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:

Project Name: for example demo-zephyr

Framework: Angular

Variant: Analog

Template: Minimal

Analog SFCs: No (this is a new way to write Angular components currently only supported by Analog)

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

# 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:

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:

# 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.

You will be directed to the GitHub report page. Copy the git remote add command (the whole line)

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:

# 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/

Back to the Angular/React project and run the build again:

terminal

The project build will be generated:

and it will be automatically deployed on Zephyr that also assign a custom URL (the last line of next screen):

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).

Now back to the Zephyr dashboard, refresh the page and you should see your project in the list:

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

learn-by-do-ing: this is the GitHub organization name

demo-zephyr: GitHub repository name

demo-zephyr: the application name in package.json

Click the project name, as shown in the previous screen,to access the project page:

# Versioning

The Versions page shows all the deployed project versions, currently only one.

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:

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

Back to Zephyr, refresh the Versions page and you'll see the new version you have just deployed:

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.

Send your feedback

# Introduction

# What will you learn in this article?

# Create Angular & React projects using ViteJS

# Install dependencies

# Update the Angular / React template

Angular -> Analog

# Install and configure Zephyr plugin

Angular

React

# Build

# Create a Git Repository

# Deploy on Zephyr Cloud

# Versioning

# How to assign a custom domain?