Computer Science
Grade 10
20 min
Deploying a Simple Web Application: Sharing Your Creation
Learn how to deploy a simple Flask web application to a platform like Heroku or PythonAnywhere.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain the purpose of web deployment and define key terms like 'server', 'hosting', and 'domain name'.
Differentiate between a local development environment and a live production server.
Prepare a simple static web application for deployment.
Use Git to push their project code to a remote repository like GitHub.
Deploy a static website using a hosting service like GitHub Pages or Netlify.
Identify and debug common deployment issues such as broken links or failed builds.
Ever built an awesome website on your computer and wished your friends and family could see it? 🤔 Let's learn how to put your creation on the internet for everyone to access!
This tutorial will guide you through the process of 'deployment'—ta...
2
Key Concepts & Vocabulary
TermDefinitionExample
DeploymentThe process of taking your finished code from your computer and placing it on a publicly accessible server so that anyone can visit it through the internet.After finishing your 'To-Do List' web app, you deploy it to a service like GitHub Pages. Now, you can send a URL like `your-username.github.io/todo-app` to anyone, and they can use your app.
Web ServerA powerful computer that is always on and connected to the internet. Its job is to store your website's files (HTML, CSS, JS) and 'serve' them to users when they visit your website's address.When you type `www.google.com` into your browser, you are sending a request to Google's web servers, which then send back the Google homepage files to your computer.
Hosting PlatformA...
3
Core Syntax & Patterns
The Git-Based Deployment Workflow
1. Develop Locally -> 2. `git add .` -> 3. `git commit -m 'message'` -> 4. `git push` -> 5. Hosting Platform Auto-Deploys
This is the standard modern workflow. You work on your code on your own machine. When you're ready to update the live site, you commit and push your changes to a remote repository (like GitHub). The hosting platform detects this push and automatically starts a new deployment.
Relative vs. Root-Relative Paths
Use relative paths (`./style.css`, `../images/pic.png`) or root-relative paths (`/style.css`, `/images/pic.png`) for assets.
When deploying, the file structure on the server might be different. Avoid using absolute local paths like `C:\Users\YourName\...` as they will not exist on the server...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A deployed React app on Netlify works, but an API call fails with a 'Mixed Content' error in the browser console. The API call works on the local machine. The deployed site's URL is `https://my-app.netlify.app` and the API endpoint in the code is `http://api.example.com/data`. What is the most likely cause and solution?
A.The API key is missing. It must be added as an environment variable.
B.The deployed site is secure (HTTPS), but it's trying to fetch data from an insecure endpoint (HTTP). The API URL must be changed to HTTPS.
C.Netlify is blocking the external API call. A configuration file must be added to allow it.
D.The `npm run build` command was not run, so the API calling code is not present in the deployed version.
Challenging
You want to deploy a static site using GitHub Pages, but you want to keep your source code (e.g., Sass files, unminified JS) in the root directory and only deploy the clean, built files from a `/docs` folder. How do you configure this in your GitHub repository settings?
A.Create a special file named `.deploy-docs` in the root of the repository.
B.Rename the repository to `username.github.io/docs`.
C.In the repository's 'Settings' -> 'Pages' section, change the 'Source' from 'Deploy from a branch' to 'Deploy from a folder' and select the `/docs` folder.
D.In the repository's 'Settings' -> 'Pages' section, keep the source as the `main` branch, but change the folder from `/root` to `/docs`.
Challenging
A React app deployment fails on Netlify during the `npm run build` step with an error about a missing module. The module is correctly listed in `package.json`, and the app runs perfectly on a developer's local machine after running `npm install`. What is the most likely reason for this discrepancy?
A.The developer forgot to `git push` the latest changes.
B.The developer installed the module locally but forgot to save it to `package.json` using the `--save` or `--save-dev` flag, so the file is not in the committed version.
C.Netlify's servers are temporarily down.
D.The `package-lock.json` file is out of sync with `package.json`, and the developer has not committed the updated lock file.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing Free