|
Tired of sluggish websites and SEO headaches? Unleash the power of lightning-fast performance and built-in optimization with this Astro template builder! Crafted for developers who value speed and simplicity, this robust toolkit empowers you to build stunning websites that soar in search engines and captivate users. Ditch the struggle and focus on what matters most - crafting impactful content that drives engagement. Welcome to the future of web development - where SEO and performance work hand-in-hand. |
- 📝 About
- 🛰️ Features
- ⚡️ Requirements
- 📦 Installation
- ⚙️ Configuration
- 🚀 Usage
- ⚡️ Scripts
- 🌎 Browser support
🌌 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✅ ️Robot- Robot txt configuration✅ Canonical- Auto canonical url✅ Google analytincs- For positioning the webpage
📐 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
⚙️ Confugiration- Vscode, env variables and more✅ Vscode configuration- Vscode recommendations, extensions and more✅ Env validation- Enviroment variables validation
🧩 Components✅ Image component- Ready to use optimize image component✅ Show component- Ready to use show component✅ For component- Ready to use show
️⚡️ Performance✅ 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
📦 Pnpm- Fast package manager💯 Perfect lighthouse score- Because performance matters
- node >= 20.10.0
- git >= 2.38
- pnpm >= 8.2.0
After cloning the repo run this command to install all the dependencies
pnpm installThe configuration needed for this project is to set up the env variables here are the examples:
file: .example.dev.env
VITE_PORT=3000
VITE_BASE_URL=http://localhost:$VITE_PORTfile: .example.prod.env
VITE_BASE_URL=file: .example.staging.env
VITE_PORT=4173
VITE_BASE_URL=http://localhost:$VITE_PORTBefore installing all the dependencies you can run the project with
pnpm devTo see the production ready page you can run
pnpm stagingBuilds 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.
The following scripts are available in the package.json:
preinstall: This script is for only allow pnpm as package managerpostinstall: This script is for setting up the git hooks and validate the error after commit to githubdev: This script is for see the webpage in dev modestaging: This script is for see production, this run the env variables an set the webpage with all the settingsbuild-dev: This script compile the project in dev modebuild: This script is for build in productionlint: This script is for format and lint all the fileslint-eslint: This script is for lint ts, tsx and more fileslint-stylelint: This script is for lint css files
Here is the list of all the browser this website support
IE / Edge |
Firefox |
Safari |
Safari IOS |
Samsung |
Opera |
| ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |