Basic Web Deployment

This is a short introduction to help you deploy and test web page(s) on local web server (XAMPP) and public web servers (Google Cloud Platform and UVa Home Directory).
(Please tell me if you find any errors or omissions in the document —Upsorn Praphamontripong, 30-December-2019)

Deploy on XAMPP

XAMPP is an open source package that is widely used for PHP development. XAMPP contains MariaDB, PHP, and Perl; it provides a graphical interface for SQL (phpMyAdmin), making it easy to maintain data in a relational database.

If you have not installed XAMPP, please refer to XAMPP-setup to install and set up XAMPP.

Assuming that you have already set up XAMPP

  • Start the PHP environment ("Apache Web Server")

Reminder: be sure to stop the server when you are done. Leaving the servers running consumes energy and may later prevent the servers from starting.

To deploy your web page

  • Create a directory for your project in  XAMPP/htdocs/ folder
    Put your HTML files under  XAMPP/htdocs/your-project/
  • Create a directory called "images" (or assets, or any name of your choice) in  XAMPP/htdocs/your-project/
    Put any image files in  XAMPP/htdocs/your-project/images/
    Think about how you would like to organize your files for future access
  • Create a directory called "styles" in  XAMPP/htdocs/your-project/
    Put any style or CSS files in  XAMPP/htdocs/your-project/styles/
    Think about how you would like to organize your files for future access
  • Create a directory called "js" in  XAMPP/htdocs/your-project/
    Put any JavaScript files in  XAMPP/htdocs/your-project/js/
    Think about how you would like to organize your files for future access

To test your web page

  • Access your web page via a web browser. Your URL will be similar to
        http://localhost/your-project/yourfile.html
  • Access the index.html file via a web browser. Your URL should be
        http://localhost/your-project/index.html   or  
        http://localhost/your-project (to improve the usability)

Deploy on Google Cloud Platform (GCP)


Redeem and use your Google coupon. Do not enter your credit card. (If you have not received an email with the link to redeem a coupon, please notify the course instructor via email.)

To deploy your web page

  • Assuming that you already have a Google account. Go to the Google Cloud Console and login to your account
  • Create a new project for your web page(s) or website
    • Click the "Select a project" dropdown icon (next to "Google Cloud Platform")
      dropdown to select a project

    • Select  New Project
      dropdown to select a project

      This will prompt a screen allowing you to create a new project. Enter your  Project Name (e.g., cs4640s20), be sure the  Billing account is associated with the Google coupon you redeemed. Then, click  CREATE.
      image showing how to create a new project

  • Create a Google Storage Bucket
    • Access the project you just created
    • Click the Navigation Menus (a "hamburger menu" icon, top left of the screen), then select  Storage
      image showing how to create a bucket

    • On the  Storage/Browser screen, click  Create bucket option
      image showing how to create GCP bucket

    • On the  Create a bucket screen, enter your bucket's name (for example, webpl-demo). The bucket serves as your root folder; i.e., the main context directory of your web app / website. Click  continue. You may need to click  Choose where to store your data  to expand the option.
      image showing how to create a bucket

    • Select  Region for  Location type, and select  us-east4 for  Location; then click the  Create button
      image showing how to create a bucket

    • You may access the bucket you just created from the  Browser screen
      image showing how to create a bucket

  • Deploy web page(s)
    • Go to the bucket you just created (click on the bucket name, webpl-demo)
    • Select the  Upload Files option to upload your file(s) or the  Upload folder option to upload your folder(s).
      image showing how to upload files and folders to GCP storage

      The folder structure should be consistent with how your web resources (html, css, js, images, media, data files) are organized.

To test your web page

  • For development purpose, you may click the file name
    image showing how to test a web page on locally

    Note: clicking the file name opens the page on a web browser in a local mode; that is, only you have access to it (similar to how you open an .html file from a file system on your computer).

  • To make your page(s) publicly available, you need to set the bucket's permissions. On the Browser screen, locate your bucket. To set "Public" access, click the "three-veritical dots" option on the right,
    image showing how to set permission on a bucket

    Select  Edit bucket permissions
    image showing how to set permission on a bucket
    Do not export to cloud

    On the  INFO PANEL screen, click the  Add members button
    image showing how to set permission on a bucket

    Enter  allUsers in the  New members textbox and select a role as  Storage Object Viewer, then click the  Save button.
    image showing how to set permission on a bucket

    Now, your bucket is publicly available
    image showing how to set permission on a bucket

    If you need to delete members, for example, enter  allUsers in the  Filter tree  textbox. Once the member is found, click a "trash" icon. Alternatively, you may select the  Role / Member >> Storage Object Viewer  to locate the members to be deleted.
    image showing how to set permission on a bucket

  • Access your web page via a web browser. Your URL will be similar to
        https://storage.googleapis.com/your-bucket-name/yourfile.html
    (for example, https://storage.googleapis.com/webpl-demo/bootstrap-example.html)

  • Alternatively, on the  Browser screen, locate your file, click a "hyperlink" icon under  Public access column.
    image showing how to set permission on a bucket


Deploy on UVa Home Directory

To deploy your web page

  • Login to your account (UVa Home Directory)
  • Upload all your files to  myweb/html  folder

To test your web page

  • Access your web page via a web browser. You URL will be similar to
        http://people.virginia.edu/~Your-UVA-ComputingID/your-project/yourfile.html