Front-end Web Development Deployment Syllabus

Deployment syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Deployment in Front-end Web Development, not a summary of it.

1. 1

   Hosting Platforms

   3 topics

   • Netlify
   • Vercel
   • GitHub Pages
2. 2

   CI/CD

   3 topics

   • GitHub Actions
   • Travis CI
   • CircleCI

Deployment flashcards for Front-end Web Development

24 of 50 cards from the Deployment deck — real questions with worked answers.

1. What is Netlify, and what is its primary purpose in front-end deployment?

   Netlify is a cloud platform for building, deploying, and hosting static sites and serverless functions. It connects to a Git repository, runs a build command, and serves the output over a global CDN with continuous deployment on every push.

2. In Netlify, what two key settings define how a site is built and what gets published?

   The 'build command' (e.g., npm run build), which produces the site, and the 'publish directory' (e.g., dist or build), which is the folder Netlify serves as the live site.

3. What configuration file does Netlify use, and what format is it written in?

   netlify.toml, written in TOML. It defines build settings, redirects, headers, environment context, and function directories.

4. What is a Netlify 'Deploy Preview'?

   An automatically generated, isolated deployment created for each pull/merge request, giving a unique URL to preview proposed changes before merging to the production branch.

5. How does Netlify handle client-side routing for single-page applications (SPAs)?

   With a redirect rule sending all paths to index.html with a 200 status, e.g. `/* /index.html 200`, so the SPA router can handle routes instead of returning 404s.

6. What are Netlify Functions?

   Serverless functions (AWS Lambda under the hood) that let you run back-end code without managing servers. They are deployed alongside the site, typically from a functions directory.

7. What is 'atomic deploy' in Netlify and why does it matter?

   Each deploy is published atomically: the new version goes live all at once only after the full build succeeds, so users never see a half-updated site, and instant rollback to any previous deploy is possible.

8. What is Vercel best known for, and which framework is it most associated with?

   Vercel is a cloud platform for deploying front-end apps and serverless/edge functions, best known as the creator and primary host of Next.js, with deep zero-config support for it.

9. What configuration file does Vercel use, and in what format?

   vercel.json, written in JSON. It configures routes, rewrites, redirects, headers, build settings, and function options.

10. On Vercel, what is the difference between a 'Preview' deployment and a 'Production' deployment?

    Preview deployments are created for every branch/commit (except production) for testing on unique URLs; production deployments come from the production branch (usually main) and serve the primary domain.

11. What are Vercel Edge Functions, and how do they differ from standard Serverless Functions?

    Edge Functions run on Vercel's Edge Runtime distributed globally close to users for low latency, with fast cold starts but a limited runtime API. Serverless Functions run in a full Node.js environment in a single region with more capabilities but higher latency/cold starts.

12. What Git providers can Vercel and Netlify both integrate with for continuous deployment?

    GitHub, GitLab, and Bitbucket. A push to a connected branch automatically triggers a new build and deploy.

13. What is GitHub Pages?

    A free static-site hosting service from GitHub that publishes HTML, CSS, and JavaScript directly from a GitHub repository, served at a github.io domain or a custom domain.

14. What are the three publishing sources GitHub Pages can build from?

    (1) The root of a branch, (2) the /docs folder of a branch, or (3) a GitHub Actions workflow that builds and deploys the site.

15. What is the difference between a GitHub Pages user/organization site and a project site?

    A user/org site is built from a repo named `username.github.io` and served at `username.github.io`; a project site is built from any repo and served at `username.github.io/repository-name`.

16. Why can GitHub Pages only host static sites, not server-side back-ends?

    GitHub Pages serves pre-built static files over a CDN with no server-side runtime; it cannot execute server-side languages (PHP, Node, Ruby) or maintain databases, so dynamic logic must be client-side or via external APIs.

17. What special file disables Jekyll processing on GitHub Pages, and why use it?

    An empty file named `.nojekyll` in the publish root. It tells Pages to skip Jekyll, which is needed for sites with folders/files starting with an underscore (e.g., _next) that Jekyll would otherwise ignore.

18. How do you configure a custom domain on GitHub Pages?

    Add a `CNAME` file (containing the domain) to the repo, then configure DNS at the registrar: a CNAME record to `username.github.io` for subdomains, or A records to GitHub's Pages IPs for an apex domain.

19. What is GitHub Actions?

    GitHub's built-in CI/CD platform that automates workflows (build, test, deploy) in response to repository events, defined in YAML files stored in the repository.

20. Where are GitHub Actions workflow files stored, and in what format?

    In the `.github/workflows/` directory of the repository, as YAML files (.yml or .yaml).

21. In GitHub Actions, define the hierarchy: workflow, job, step, and action.

    A workflow contains one or more jobs; each job runs on a runner and contains a sequence of steps; a step is either a shell command or an 'action' (a reusable packaged unit of code).

22. In GitHub Actions, what does the `on` key specify? Give example triggers.

    It specifies the events that trigger the workflow, e.g. `push`, `pull_request`, `schedule` (cron), `workflow_dispatch` (manual), or `release`.

23. What is a 'runner' in GitHub Actions?

    A server that executes a job. GitHub provides hosted runners (Ubuntu, Windows, macOS), or you can register self-hosted runners on your own infrastructure.

24. In a GitHub Actions job, what is the difference between `uses` and `run`?

    `uses` invokes a reusable action (e.g., `actions/checkout@v4`), while `run` executes shell commands directly on the runner.

See more Deployment flashcards →

Planning Deployment for Front-end Web Development

Deployment (Front-end Web Development) FAQ