Landing Page Template

A template for creating preact apps with vite

Dependencies

• @preact/signals: Manage state with style in Preact
• base64-js: Base64 encoding/decoding in pure JS
• crypto-js: JavaScript library of crypto standards.
• framer-motion: A simple and powerful JavaScript animation library
• million: Make React Faster. Automatically.
• pako: zlib port to javascript - fast, modularized, with browser support
• preact: Fast 3kb React-compatible Virtual DOM library.
• preact-i18n: Preact internationalization, done simply.
• preact-router: Connect your components up to that address bar.
• react-icons: SVG React icons of popular icon packs using ES6 imports
• react-if: 🌗 Render React components conditionally
• store2: Better localStorage

Dev Dependencies

• @commitlint/cli: Lint your commit messages
• @commitlint/config-conventional: Shareable commitlint config enforcing conventional commits
• @preact/preset-vite: Preact preset for the vite bundler
• @types/crypto-js: TypeScript definitions for crypto-js
• @types/node: TypeScript definitions for node
• @types/pako: TypeScript definitions for pako
• @types/preact-i18n: TypeScript definitions for preact-i18n
• @typescript-eslint/eslint-plugin: TypeScript plugin for ESLint
• @typescript-eslint/parser: An ESLint custom parser which leverages TypeScript ESTree
• autoprefixer: Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
• eslint: An AST-based pattern checker for JavaScript.
• eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-import-resolver-alias: a simple Node behavior import resolution plugin for eslint-plugin-import, supporting module alias.
• eslint-import-resolver-typescript: This plugin adds TypeScript support to eslint-plugin-import
• eslint-plugin-import: Import with sanity.
• eslint-plugin-jsx-a11y: Static AST checker for accessibility rules on JSX elements.
• eslint-plugin-prettier: Runs prettier as an eslint rule
• eslint-plugin-react: React specific linting rules for ESLint
• eslint-plugin-react-hooks: ESLint rules for React Hooks
• eslint-plugin-simple-import-sort: Easy autofixable import sorting
• eslint-plugin-unused-imports: Report and remove unused es6 modules
• eslint-plugin-tailwindcss: Rules enforcing best practices while using Tailwind CSS
• husky: Modern native Git hooks
• lint-staged: Lint files staged by git
• postcss: Tool for transforming styles with JS plugins
• postcss-nesting: Nest rules inside each other in CSS
• prettier: Prettier is an opinionated code formatter
• tailwindcss: A utility-first CSS framework for rapidly building custom user interfaces.
• typescript: TypeScript is a language for application scale JavaScript development
• vite: Native-ESM powered web dev build tool

License

MIT License

Run Locally

Clone the project

  git clone https://github.com/DeadBryam/landing-page-template.git

Go to the project directory

  cd landing-page-template

Install dependencies

  pnpm install

Start the server

  pnpm dev

Deployment

To deploy this project run

  Use your favorite hosting service, I recommend Vercel

Environment Variables

If you need to use environment variables, create a .env file in the root of the project and add the variables there.

For example:

VITE_API_URL=https://api.example.com

Use the variables in your code like this:

const apiUrl = import.meta.env.VITE_API_URL;