Deploy PHP Apps to Azure with VS Code on Chromebook Using FileZilla

by

HTML and CSS form the foundation of the web, as they are what the browser processes—HTML structures the content, CSS adds style, and PHP powers dynamic functionality behind the scenes.

If you're working in anything web-related, having a website is a must! It’s your online presence, and without one, you could be missing out on great opportunities.

For this demo, hopefully, you already have a Linux development environment set up on your Chromebook. In this example, the dev environment is named "container." You’ll also need VS Code installed in your Chromebook’s Linux development environment. Don’t worry—installing VS Code is simple! You can follow the step-by-step guide in this blog post.

For this demo, we’ll be using Azure’s Free F1 instance of a web app. Azure is designed with small businesses in mind and offers an intuitive experience. To access the free tier instance, a pay-as-you-go subscription is required—but don’t worry, you won’t be charged unless you choose to scale up the instance.

In this demo, we’ll set up a workflow by installing the Azure extension, resolving the OS keyring issue for VS Code, and installing a graphical SFTP client. After that, we’ll connect to the Azure web app instance via SFTP, create index.php, and upload it to the Azure instance.

You’ll discover how developing a website or web app on a Chromebook Plus is not only practical but also reduces frustration and minimizes computing maintenance.

Installing the Azure Resources Extension in VS Code

Let's open Visual Studio Code and head over to the Extensions tab.

Extensions in VS Code

Now, let's install the Azure Resources extension in VS Code. Simply type "Azure Resources" in the search field.

Installing Azure Resources

Next, click the "A" icon under the Extensions tab, then select Sign in to Azure.

Sign into Azure

Fixing the OS Keyring Issue in VS Code on a Chromebook

When signing into Azure from the Azure Resources extension, VS Code may be unable to resolve the OS keyring.

OS keyring couldn't be identified

Avoid using weaker encryption. Simply click the X at the top right of the modal window, then close VS Code.

Now, open the Terminal by clicking the launcher button in the bottom left corner.

Open terminal.

According to the troubleshooting guide, we need to install kwallet5. Open the Terminal and search for kwallet5. Then, copy and two-finger tap to paste the following command into the Terminal.




  sudo apt search kwallet5

searching for kwallet5

The Terminal indicates that the package to install is libpam-kwallet5.

Now, let's install libpam-kwallet5. Copy the command below, two-finger tap to paste it into the Terminal, and press Enter.




   sudo apt install libpam-kwallet5
   

installing libpam-kwallet5

To clear the Terminal window, simply type clear and press Enter.




   clear

Now, let's launch VS Code from the Terminal and set kwallet5 as the password store.

According to the troubleshooting guide, even if you install the kwallet6 package, you can still use kwallet5 as the setting for the password-store parameter.

Copy and paste the following command into the Terminal to open VS Code with kwallet5 for password storage.

Keep in mind that whenever you want to connect to Azure's App Service, you'll need to launch VS Code using the following Terminal command.




   code --password-store="kwallet5"
   

Open vs code with code command

Keep the VS Code window open, and then open the Files app to create a project folder inside the Linux container.

Creating a Project Folder Using the Files App on Chromebook Plus

Open the Files app by launching the Launcher and typing Files in the search bar. You can also copy and two-finger tap to paste "files".

The folder we’re creating will be used for the initial test handshake with a graphical FTP client called FileZilla.




    files
  

Open Files

In the Files window, click Linux files, then click the three-dot menu button and select New folder.

Click new folder

Rename the folder to "a-business-website".




  a-business-website
   

Rename project folder

Open the folder in VS Code by clicking File in the top menu, then selecting Open Folder....

Open Folder...

In the pop-up window, select "a-business-website".

Select the folder

Click "Yes, I trust the authors" to proceed.

Yes, I trust the authors

Now, let's connect VS Code to the App Service.

In this scenario, we'll perform a test connection. An Azure account with a subscription already set up, and we'll try using the free tier for testing.

Once the Azure extension is selected, you'll see three options available.

Let's sign-in

Creating a Web App container in Azure

In the Azure portal, let's create a resource. Organizing resources inside resource groups makes management easier and helps keep track of costs more effectively.

Resource and Resource Groups

For this example, I've created a resource group named "test-static-app-service".

Next, inside the resource group, click Create.

Click Create

In the Marketplace, search for "Web App" and click Create.

Create Web App

Set the name to "simple", choose Code for publishing, select PHP 8.3 as the runtime stack, and pick a nearby region from the dropdown menu.

Configure Web App's Shared Virtual Instance

Scroll down and select the F1 Free Tier plan.

Configure Web App's Shared Virtual Container

At the bottom of the portal page, click Review and Create, then click Create. This will start provisioning the "simple" instance.

Creating the container

At the bottom of the portal page, click Review and Create, then click Create. This will start provisioning the "simple" instance.

Enable SFTP and SCM

Installing FileZilla: A Graphical FTP Client on Chromebook Plus

While you can use Git, it can be a bit overwhelming when working on an initial small business website.

Let's install FileZilla FTP using the Chromebook Plus Terminal.

Open the Terminal on your Chromebook Plus and enter the following command.




   sudo apt install filezilla

Installing graphical ftp client

Open FileZilla by searching for the app in the Launcher.




   filezilla

Open filezilla

Take a moment to notice that the folder created earlier, "a-business-website", is visible. You'll need to click on this folder when uploading files from it.

Realization after opening

Copying and Pasting SFTP Credentials into FileZilla

Visit the Azure portal to copy your FTP credentials.

Open the Site Manager in FileZilla by clicking File, then selecting Site Manager.

Realization after opening

In the Site Manager, click New Site.

Site Manager New site

Simply press Enter to proceed, keeping the site name as "New site", due to an interface anomaly.

Just press enter

To copy the SFTP credentials, visit the Deployment Center inside the "simple" resource.

copy sftp credentials

Paste the SFTP credentials by using a two-finger tap on the Chromebook touchpad.

pasting sftp credentials

After saving the password and clicking Connect, click OK to trust the SFTP server certificate.

pasting sftp credentials

Congratulations! You now have a successful SFTP connection to a remote SFTP server in an Azure cloud web app instance.

Successfull sftp connection

Uploading index.php via SFTP to the Remote Azure Web App Instance

In FileZilla, navigate to the left panel, expand home and container, then click on the a-business-website folder. The two left window frames display local files.

Browse to local folder in filezilla

Open the Site Manager by navigating to File → Site Manager, then click Connect. Next, two-finger tap on hostingstart.html and select Download.

Download remote file using filezilla

In VS Code, create a new file named index.php.

Create New File

In VS Code, name the file index.php.

Rename the file to index.php

Copy the following HTML document markup and paste it into index.php in VS Code.




        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Testing sftp upload</title>
    </head>
    <body>
        <h1>Testing static website</h1>
        
        <p>Testing sftp upload. Todays Date is <?php echo date('l jS \of F Y h:i:s A'); ?></p>
    </body>
    </html>

In VS Code, click on index.php in the left pane, then paste the HTML document markup.

Paste html markup

In the FileZilla FTP client, upload the index.php file created in VS Code.

sftp index dot php file

To view the changes, go to the Azure portal, open the Web App resource, and click the link under Default Domain.

Click Default Domain Link

When you visit the Default Domain link, you should see the following page.

Displaying the html markup

Now you have a complete workflow for building and managing your static business website using your Chromebook! Remember, your initial website doesn’t need to be fancy—it can simply be a plain HTML document. As you identify your business needs, you can gradually improve it. The most important thing is that your content and data belong to you, giving you complete control over your website.

For further reading on building your PHP website, I recommend Chapter 8, as it explains how to structure a static PHP application by breaking sections apart using PHP file imports. A great resource for this is Larry Ullman’s 2011 publication, PHP for the Web: Visual QuickStart Guide.

For a higher-level managerial perspective on HTML and CSS, I recommend HTML and CSS: Design and Build Websites.

References:

"php date function" (https://www.php.net/manual/en/function.date.php)

PHP Date Function
Z Data Tech https://www.zdatatech.com/logo/zdatatech-logo.png Last modified: March 21, 2025
Advertisement