Deploying to Vercel
Relevant source files
The following files were used as context for generating this wiki page:
Deploying the yeuems.io project to Vercel provides a fast, edge-optimized hosting solution for this static web application. The platform automatically serves the project's HTML, CSS, and JavaScript files to users upon a push to the connected repository.
The application functions as a static frontend interface that triggers client-side interactions and redirects via the browser. Because the project contains no server-side code, Vercel acts as a Static Site Host, delivering assets via its global CDN.
Application Structure and Entry Point
Vercel identifies the project structure to determine how to serve content. The primary entry point is the root index.html file, which orchestrates the loading of all styles and scripts.
Core Components
- HTML Entry:
index.htmldefines the DOM structure and loads external dependencies. - Styling:
css/style.cssmanages the visual layout, whilecss/spinload.csshandles the initial loading state. - Logic:
js/myJs.jscontrols the interactive flow and event handling. - Media: Local assets like
img/cuteCat.jpgandsound/duck.mp3provide the auditory and visual feedback.
Sources: index.html:1-74, js/myJs.js:1-13, css/style.css:1-29
Deployment Flow
The following diagram illustrates the lifecycle from code deployment to user interaction.
This diagram shows how Vercel processes the code push to serve a static interface that eventually redirects the user.
Sources: index.html:30-47, js/myJs.js:20-30, js/myJs.js:125-128
Frontend Dependencies and CDN Integration
The application relies on several external libraries. Vercel serves the local files, but the browser fetches the logic for popups and styling from third-party Content Delivery Networks (CDNs).
| Dependency | Purpose | Source |
|---|---|---|
| Bootstrap 4.3.1 | Responsive layout and button components | StackPath CDN |
| jQuery 3.4.1 | DOM manipulation and event handling | jQuery CDN |
| SweetAlert2 | Interactive modal dialogs and alerts | jsDelivr CDN |
| Pacifico Font | Stylized typography for headers | Google Fonts |
Sources: index.html:11-25, index.html:56-70
Interaction Logic and Resource Pathing
Vercel maintains the relative directory structure, ensuring the JavaScript code correctly locates sound and image files during execution.
Media Resource Resolution
The application references assets using relative paths. To ensure these load correctly on Vercel, the directory structure in the repository must match the expected paths in myJs.js.
// Example of asset referencing in myJs.js
function firstQuestion() {
Swal.fire({
title: textConfig.text1,
text: textConfig.text2,
imageUrl: "img/cuteCat.jpg", // Relative path to image
background: '#fff url("img/iput-bg.jpg")',
});
}
Sources: js/myJs.js:33-46, js/myJs.js:58, js/myJs.js:64
User Execution Flow
The interaction follows a specific sequence once Vercel serves the files to the client browser.
The sequence diagram details the transition from the initial server request to the final external redirection logic.
Sources: js/myJs.js:20-30, js/myJs.js:100-129, css/spinload.css:2-10
Environment Configuration
Deployment to Vercel requires no specific environment variables as all configurations are hardcoded in js/myJs.js. The textConfig object manages all displayed strings and navigation targets.
| Config Key | Value / Target | File Reference |
|---|---|---|
text1 | "He luu cậu!" | js/myJs.js:2 |
text11 | "Tối nay tớ qua đón..." | js/myJs.js:11 |
| Redirect URL | https://www.facebook.com/lekientrung.info/ | js/myJs.js:127 |
Sources: js/myJs.js:1-13, js/myJs.js:126-128
Summary
Deploying yeuems.io to Vercel transforms the local static files into a globally accessible interactive site. Vercel automates the hosting of the root index.html and its associated js and css directories. The application logic resides entirely on the client side, utilizing SweetAlert2 for interaction and standard browser APIs for redirection. The deployment succeeds by maintaining the relative file paths defined in the project structure for media and script assets.