Astro template webpage

  📦 SETUP • ⚙️ CONFIGURATION • ️️️🛰️ FEATURES

               

About

Table of content

• About
• Features
• Requirements
• Installation
• Configuration
  • Site configuration
  • Environment varaibles
  • i18n configuration
• Usage
• Scripts
• Browser support

( Back to top )

Features

• Astro - Astro Framework
• Typescript - Extremely strict type checking
  • Absolute imports - No more bad imports
• Sass - Css framework for ui development
  • BEMIT - Arquitecture for sass
  • Mobile firts - Best performance for css
  • Reset - Reset css for match style between browsers
  • Join media queries - Join media queries for small file size
  • Vendor prefixes - Vendor prefixes for all support
  • Remove unused css - Remove unused css in build
• Clean arquitecture - For clean code and scalablility
• SEO - SEO meta data, open graph and more
  • Sitemap - Sitemap generator
  • RSS - RSS generator
  • Open graph - Advanced open graph SEO
  • Robot - Robot txt configuration
  • Canonical - Auto canonical url
  • Google search console - For SEO stadistics
  • Google analytic - For analytics of the webpage
• i18n - Internationalization and translations
• Linter - Linter and formatting all kind of files
  • Eslint - Litner and formatting ts and js files
  • Stylelint - Linter css files
• Git - Control version and more
  • Github issue template - Github issues organization
  • Githooks - Git hook for validate code quality
  • Changelog - Changelog and realese for github
  • Sematic release - Automatization of releases
• Configuration - Vscode, env variables and more
  • Vscode configuration - Vscode recommendations, extensions and more
  • Env validation - Enviroment variables validation
  • Htaccess snipets - Differents htaccess for all kind of situations
• Components
  • Image - Ready to use optimize image component
  • Show - Ready to use conditional render component
  • For - Ready to use for map components
  • Link - Ready to use for redirect external and internal links
• Performance
  • Web worker (partytown) - For lazy-loaded large libraries
  • Bundler analizer - Analize your bundle size
  • Compress - Compress images, font, css, js, and html
  • Non blocking - Non blocking js, css and more
  • Font optimization - Font transformation and declaration
• Bun - Fast package manager
• Perfect lighthouse score - Because performance matters

( Back to top )

Requirements

• node >= 20.10.0
• git >= 2.38
• bun >= 1.1.0
• aws cli >= 2.17.8

( Back to top )

Installation

After cloning the repo run this command to install all the dependencies.

Bun

bun i

( Back to top )

Configuration

The configuration needed for this project is to set up the env variables and also the site configuration object here are the examples:

Site configuration

This file is located in src/global/configuration/site_configuration.ts

• siteName - Global title of the webpage
• description - Global description of the webpage
• autor - Author object that appears in a meta tag
  • author.name - Name of the author
  • author.email - Email of the author
  • author.web - Web of the author
• copyright - Copyright of the owner of the website
• googleAnalyticId - Id of the google analytics
• defaultLocale - Default locale of the webpage
• languages - Object with all the languages you want to support
  • example - languages: { en: 'English' }

Evironment varaibles

This environment variables are located in src/global/env/**.env

file: .example.dev.env

PORT=4321
BASE_URL=http://localhost:$PORT

file: .example.prod.env

BASE_URL=

file: .example.staging.env

PORT=4321
BASE_URL=http://localhost:$PORT

i18n configuration

1.- To start using i18n in this project you have to add the languages you want to support in the configuration file src/global/configuration/site_configuration.ts, here you will find an object with the key languages, also remenber to ser the default language to your preferences, you can set the languages like this:

const siteConfiguration =
{
  defaultLanguage: 'en',
  languages:
  {
    en: 'English',
    es: 'Español'
  }
}

2.- Next you will create in the src/pages a directory called [language], here you will duplicate and put all the pages of your project, this is an example:

- /pages
  - /[language]
    - about-us.astro
    - index.astro
  - 404.astro
  - about-us.astro
  - index.astro

3.- The pages inside this directory will need to add an aditionnal validation for know if the language is correct and it is listeng in the configuration, you can add tis like this

pages/[language]/index.astro

---
import { getStaticLanguage } from '@global/util/language';

export const getStaticPaths = getStaticLanguage;
---

4.- Next you will create the translation files, we recommend to use ts files instead of json but you can aslo use json files

const aboutUsLocale =
{
  en:
  {
    welcome: 'Hello world',
  },
  es:
  {
    welcome: 'Hola mundo',
  }
};

export { aboutUsLocale };

5.- To end you will use this file and make the translation, use this inside you component page and not in the pages/** components

---
import { getI18n, getStaticLanguage, getLanguageFromUrl } from '@global/util/language';
import { aboutUsLocale } from '@module/landing/locale/about_us';

const language = getLanguageFromUrl(Astro.url);
const i18n = getI18n(language, aboutUsLocale);
---

<h1>{i18n.welcome}</h1>

6.- Create the file src/middleware.ts and add the following code, this will redirect the default language urls to the base urls, and examples of this is, /en/about-us redirect to /about-us

import { getLanguagePathname, validateDefaultLanguage } from '@global/util/language';
import { defineMiddleware } from 'astro/middleware';

const onRequest = defineMiddleware(async (context, next) =>
{
  if(validateDefaultLanguage(context.url))
  {
    const pathname = getLanguagePathname(context.url);
    const redirectCode = 302;

    return Response.redirect(new URL(pathname, context.url), redirectCode);
  }

  return next();
});

export { onRequest };

That's all the configuration nedeed for i18n in this project.

( Back to top )

Usage

Before installing all the dependencies you can run the project with

pnpm dev

To see the production ready page you can run

pnpm staging

Builds the app for production to the dist folder.

It correctly bundles Solid in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes, also it compress all the assets and images in the dist folder.

Your app is ready to be deployed.

( Back to top )

Scripts

The following scripts are available in the package.json:

• preinstall: This script is for only allow pnpm as package manager
• postinstall: This script is for setting up the git hooks and validate the error after commit to github
• dev: This script is for see the webpage in dev mode
• staging: This script is for see production, this run the env variables an set the webpage with all the settings
• build-dev: This script compile the project in dev mode
• build: This script is for build in production
• lint: This script is for format and lint all the files
• lint-eslint: This script is for lint ts, tsx and more files
• lint-stylelint: This script is for lint css files

( Back to top )

Browser support

Here is the list of all the browser this website support

IE / Edge	Firefox	Safari	Safari IOS	Samsung	Opera

( Back to top )

  Copyright © All rights reserved,
  developed by ElegantCoder and