# 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

# 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
.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
:
vite.config.ts

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:
-
- Visit Zephyr Cloud
-
- Click on Get Started
-
- Create (and confirm) the account
-
- 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
1
learn-by-do-ing
: this is the GitHub organization name2
demo-zephyr
: GitHub repository name3
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
-
- You should also note that the latest deployment is always assigned to the
latest_fabio_biondi
tag.
- You should also note that the latest deployment is always assigned to the
-
- 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.