Deployment

Congratulations, it's time to ship to production.

When you run the dev server for DashTail Alpine, the application compiles and processes its source files, generating a dist (distribution) folder. This folder contains the final static files necessary for deployment. Let’s break this down step by step:

Understanding the Build Process

Running the Dev and Watch Server to Build the Dist Folder

When you start the development server and watch server for file changes (e.g., using npm run dev and npm run watch ), the project compiles source files dynamically.

run the following command to build the dist folder

npm run build

This allows real-time development with hot reloading, meaning changes in your code reflect immediately in the browser without manually refreshing.

HTML templates (processed from Nunjucks or another templating language) CSS files (compiled from Tailwind CSS or other preprocessors) JavaScript files (optimized and bundled) Images and other assets (compressed and copied to the output folder) All these processed files are placed inside the dist folder.

Creating the Dist Folder

The Purpose of the Dist Folder The dist folder is a self-contained, ready-to-deploy package of your application. It contains static HTML, CSS, and JavaScript files that can be hosted on any web server without requiring additional server-side processing. Unlike dynamic frameworks that rely on a backend, DashTail Alpine is a static site, meaning it doesn’t need a Node.js, PHP, or database connection to run once built.

Deploying DashTail Alpine

Since DashTail Alpine builds static HTML files, deployment is straightforward. You can host it on various platforms that support static sites, such as:

Netlify – Drag and drop the dist folder or use Git-based deployment. Vercel – Similar to Netlify, with Git integration for auto-deployment. GitHub Pages – Push the dist folder to a GitHub repository and enable GitHub Pages. Cloudflare Pages – Optimized for speed and security. Any traditional hosting service – Upload the contents of the dist folder via FTP to services like Bluehost, Hostinger, or Namecheap.

How It Works in Production

Once deployed, visitors to your site will access the pre-built HTML files directly. Since the application is static, it loads quickly and has fewer security vulnerabilities than a dynamic application. There’s no need for backend configurations, making it an excellent choice for lightweight dashboards, landing pages, or documentation sites. Would you like instructions on deploying it to a specific hosting platform? 🚀