Templates (Astro)

A Template is a pre-designed structure or framework used to create consistent content within a project. It provides a standardized format with placeholders, allowing users to quickly generate new documents or components. Templates save time, ensure uniformity, and make the creation process more efficient.

Step 1: Log In to Your Account

• Go to flyonui.com and log in using your credentials.

Step 2: Navigate to the Templates Page

• Visit the Templates page to explore different types of templates.

Step 3: Download the Templates(.zip)

• Click the “Download –> Asrto” button to get the .zip file and extract the file.

**Template Name**/
├── public/
│   └── assets/
│       └── img/              # Images and favicon
├── src/
│   ├── components/           # Astro components
│   │   ├── shared/           # Reusable components
│   │   ├── navbar.astro
│   │   ├── footer.astro
│   │   ├── ...
│   ├── layouts/
│   │   └── layout.astro      # Layout
│   ├── pages/
│   │   └── index.astro       # Landing page
│   ├── styles/               # Global styles
│   ├── types/                # TypeScript types
│   ├── utils/                # Utility functions
│   └── config.ts             # Site configuration
├── astro.config.mjs          # Astro configuration
├── package.json
└── tsconfig.json

If you do not have pnpm installed, follow the steps below to get started:

1. Install Node.js(if not already installed): Visit Node.js website and download the latest LTS version.

2. Install pnpm: Run the following command in your terminal:

   npm install -g pnpm

1. Install dependencies: This will install node_modules in your file automatically.

pnpm install

2. Start development: The site will be available at http://localhost:4321

pnpm run dev

3. Build for production: The built site will be in the dist/ folder with relative asset paths for easy deployment.

pnpm run build

4. Preview the production build: This will preview the built site locally.

pnpm run preview

• pnpm install : Installs dependencies
• pnpm run dev : Starts local dev server at localhost:4321
• pnpm run build : Build production site with type-checking and relative paths
• pnpm run preview : Build and preview production site locally
• pnpm run format : Format all files with Prettier
• pnpm run format:check : Check if files are formatted correctly
• pnpm run astro ... : Run Astro CLI commands

Edit src/config.ts to customize your site:

export const siteConfig = {
  creatorName: 'FlyonUI',
  demoName: 'Restaurant',
  templateName: 'Restaurant Landing Page',
  // ... more settings
};

To declare your file path Aliases, go to tsconfig.json file and declare your new alias.

For example: Let’s say you want a new alias called @hooks/* that maps to src/hooks/*. simply edit compilerOptions.paths

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@layouts/*": ["./src/layouts/*"],
      "@styles/*": ["./src/styles/*"],
      "@utils/*": ["./src/utils/*"],
      "@types/*": ["./src/types/*"],
      "@hooks/*": ["./src/hooks/*"]   // <-- Add this line
    }
  }
}

1. Start by installing the desired library via your terminal or command line interface. You can do this using npm or yarn as follows:

pnpm install flatpickr

This will add the library to your node_modules directory and include it in your package.json dependencies.

2. After installation, verify that the library is present in your package.json under the dependencies section, and check that it has been successfully added to the node_modules directory.

You can check package.json for a corresponding entry:

"dependencies": {
  "flatpickr": "~4.6.13"
}

3. Next, you’ll need to include the library in the astro.config.mjs configuration file. Open this file and add the library to the list of assets in alphabetical order, ensuring that the build process knows to include it in the final output.

For example:

.....
plugins: [tailwindcss()],
    optimizeDeps: {
      include: ['flyonui', 'flatpickr']
    },
.....

For example:

.....
/* tailwind intersect */
@import 'tailwindcss-intersect';

/* tailwind motion */
@plugin 'tailwindcss-motion';

/* Flatpickr */
@import 'flyonui/src/vendor/flatpickr.css';
.....

5. Finally, reference the installed library in your HTML or JavaScript files. Add the corresponding <script> into your client-script.astro file iside the <script>..</script> tag to include the library from the node_modules/ directory.

For example:

<script>
import 'flyonui/flyonui.js';
import 'tailwindcss-intersect/dist/observer.min.js';
// Add your libs like this
import 'flatpickr/dist/flatpickr.js'
</script>`

Astro makes deployment pretty straightforward. You have two common options:

1. Static (pre-rendered) deployment – host on any static host (Netlify, GitHub Pages, Cloudflare Pages, S3, etc.)

2. Vercel deployment – first-class support with automatic builds

pnpm install

Make sure your astro.config.mjs is set for a static site (this is the default):

// astro.config.mjs or astro.config.ts
import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'static', // this is usually default; add it if you changed it earlier
});

pnpm build

This will generate a dist/ folder with your production-ready static files.

pnpm run preview

GitHub Pages:

• Commit your code
• Use an action to build Astro and publish dist/ to gh-pages branch.

Note: Whatever platform you use, the “publish directory” or “output directory” should be set to dist.

Make sure your astro.config.mjs is set for a server site:

// astro.config.mjs or astro.config.ts
import { defineConfig } from 'astro/config';

export default defineConfig({
  output: 'server', // change to 'server' for Vercel deployment
});