DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workkloads.

Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • How to Secure Your Angular Apps: End-to-End Encryption of API Calls
  • GenAI-Powered Automation and Angular
  • Mastering Scalability and Performance: A Deep Dive Into Azure Load Balancing Options
  • Angular Best Practices For Developing Efficient and Reliable Web Applications

Trending

  • Problems With Angular Migration
  • How To Replicate Oracle Data to BigQuery With Google Cloud Datastream
  • Measuring the Impact of AI on Software Engineering Productivity
  • Beyond Microservices: The Emerging Post-Monolith Architecture for 2025
  1. DZone
  2. Testing, Deployment, and Maintenance
  3. Deployment
  4. Azure Deployment Using FileZilla

Azure Deployment Using FileZilla

In this step-by-step guide, focus on the FileZilla FTP client as a means to publish your Angular UI application to Azure.

By 
ABUFAIZUR RAHMAN R ALI user avatar
ABUFAIZUR RAHMAN R ALI
·
Oct. 01, 24 · Tutorial
Likes (1)
Comment
Save
Tweet
Share
4.6K Views

Join the DZone community and get the full member experience.

Join For Free

In today's digital landscape, deploying web applications to the cloud is a common practice. Azure provides various deployment options, including GitHub, Azure DevOps, Bitbucket, FTP, or a local Git repository.

In this step-by-step guide, we will focus on the FileZilla FTP client as a means to publish your Angular UI application to Azure. Follow these steps to make your Angular app accessible to the world.

Prerequisites

  • An Angular UI application ready for deployment
  • An Azure Web App set up and configured
  • FileZilla FTP client installed on your local machine

Step 1: Download and Install FileZilla

Before you can use FileZilla to publish your Angular app to Azure, you need to download and install the FileZilla FTP client. 

Follow these steps:

  1. Visit the official FileZilla website.
  2. Click on the "Download FileZilla Client" button to access the download page.
  3. On the download page, you will see versions for different operating systems (Windows, macOS, Linux). Choose the version that corresponds to your operating system and click the download link.
  4. Once the download is complete, run the installer file you downloaded.
  5. Follow the installation wizard's prompts to install FileZilla on your computer.

Step 2: Build Your Angular Application

Ensure your Angular application is built for production. Open your terminal/command prompt and navigate to your Angular project's root directory. Run this command:

Visual Studio Code Terminal Window

Visual Studio Code Terminal Window


ng build --prod


This will generate a production-ready build of your Angular app in the dist folder.

Step 3: Configure Azure FTP Credentials

To connect to your Azure Web App via FTP, obtain FTP credentials:

  1. Log in to the Azure Portal.
  2. Navigate to your Azure Web App's "Settings."
  3. Under "Deployment Center," select the FTPS credentials. Note down the FTP server address(FTPS endpoint), FTPS username, and password.

Azure Portal - Web Application | Deployment Center

Azure Portal - Web Application | Deployment Center

Step 4: Launch FileZilla

Open the FileZilla FTP client on your computer.

Step 5: Connect to the Azure Web App

Configure FileZilla to connect to your Azure Web App using the FTP credentials obtained in Step 3:

  • In FileZilla, go to "File" > "Site Manager."
  • Click "New Site" and name it (e.g., "Azure FTP").
  • Choose "FTP - File Transfer Protocol" as the protocol.
  • In the "Host" field, enter the FTP server address.
  • Set the "Encryption" to "Use explicit FTP over TLS if available."
  • Enter your FTP username and password.

FileZilla-Site Manager

FileZilla-Site Manager
  • Click "Connect" to save the site and connect to Azure.

Step 6: Upload Your Angular App

With FileZilla connected to Azure, upload your Angular app:

  • In FileZilla, navigate the left pane to your local "dist" folder.
  • In the right pane, locate the remote directory on Azure where you want to upload your app (usually something like "/site/wwwroot").
  • Select all files and directories within your local "dist" folder and drag them to the remote directory on Azure. FileZilla will start uploading.
Select all files to move to Azure
Select all files to move to Azure

Step 7: Monitor Upload Progress

FileZilla displays upload progress in the "Queued files" section at the bottom of the window. Wait for the upload to complete.

Step 8: Verify Deployment

Once the upload is complete, your Angular app should be published on your Azure Web App. You can access it using the URL provided for your Azure Web App in the Azure Portal.

Files uploaded successfully
Files uploaded successfully

Conclusion

In this guide, you've learned how to publish an Angular UI application to Azure using FileZilla.

This straightforward process allows you to easily deploy your Angular app to the cloud for public access. Be sure to keep your FTP credentials secure, and remember to update your deployed app as needed to ensure it reflects the latest changes and features.

File Transfer Protocol UI AngularJS azure Web application

Opinions expressed by DZone contributors are their own.

Related

  • How to Secure Your Angular Apps: End-to-End Encryption of API Calls
  • GenAI-Powered Automation and Angular
  • Mastering Scalability and Performance: A Deep Dive Into Azure Load Balancing Options
  • Angular Best Practices For Developing Efficient and Reliable Web Applications

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!