• Stars
    star
    276
  • Rank 149,319 (Top 3 %)
  • Language Astro
  • Created almost 2 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

View Transitions API Demo

Astro Starter Kit: Basics

npm create astro@latest -- --template basics

Open in StackBlitz Open with CodeSandbox Open in GitHub Codespaces

๐Ÿง‘โ€๐Ÿš€ Seasoned astronaut? Delete this file. Have fun!

basics

๐Ÿš€ Project Structure

Inside of your Astro project, you'll see the following folders and files:

/
โ”œโ”€โ”€ public/
โ”‚   โ””โ”€โ”€ favicon.svg
โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ components/
โ”‚   โ”‚   โ””โ”€โ”€ Card.astro
โ”‚   โ”œโ”€โ”€ layouts/
โ”‚   โ”‚   โ””โ”€โ”€ Layout.astro
โ”‚   โ””โ”€โ”€ pages/
โ”‚       โ””โ”€โ”€ index.astro
โ””โ”€โ”€ package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

๐Ÿงž Commands

All commands are run from the root of the project, from a terminal:

Command Action
npm install Installs dependencies
npm run dev Starts local dev server at localhost:3000
npm run build Build your production site to ./dist/
npm run preview Preview your build locally, before deploying
npm run astro ... Run CLI commands like astro add, astro check
npm run astro --help Get help using the Astro CLI

๐Ÿ‘€ Want to learn more?

Feel free to check our documentation or jump into our Discord server.

More Repositories

1

bootbot

Facebook Messenger Bot Framework for Node.js
JavaScript
974
star
2

astro-blog-template

Personal Blog Template Powered by Astro
Astro
336
star
3

astro-movies

Movie DB App built with Astro
Astro
238
star
4

cloudflare-pages-auth

Basic Authentication for Cloudflare Pages
TypeScript
228
star
5

astro-records

Astro SPA Demo
TypeScript
205
star
6

sapper-blog-template

Markdown-based Blog Built with Sapper
CSS
180
star
7

reactjs-conf-2016

React.js Conf 2016 React Native App
JavaScript
133
star
8

astro-photo-gallery

Astro + View Transitions Photo Gallery Demo
TypeScript
99
star
9

astro-3d-view-transitions

Astro + View Transitions + React Three Fiber Demo
Astro
79
star
10

astro-view-transitions

Demo of Astro MPA using the View Transitions API
CSS
67
star
11

astro-music

Demo ssing Astro and the Shared Element Transition API
Astro
38
star
12

frontend-architecture-workshop

Resources and Exercises for the Fundamentals of Frontend Architecture Workshop
31
star
13

astro-blog-view-transitions

Astro Blog + View Transitions Demo
Astro
15
star
14

astro-view-transitions-grid

Astro 3.0 + View Transitions Demo
Astro
13
star
15

astro-remove-bg

AI Background Removal app built with Astro + Replicate
Astro
13
star
16

svelte-match3

Match 3 game with Svelte
Svelte
12
star
17

react-lab

React and Flux Training
12
star
18

gulp-arialinter

Gulp plugin for the accessibility tool AriaLinter
JavaScript
9
star
19

fake-stripe

Very raw prototype of a Docs Site with features inspired by Stripe Docs, powered by Astro and Starlight
Astro
8
star
20

gulp-backbone

Boilerplate for Gulp + Backbone.js apps
JavaScript
7
star
21

pokenum

Guess the Pokรฉmon Game for Facebook Messenger
JavaScript
7
star
22

astro-stable-diffusion

Demo of Astro + Stable Difussion using a Replicate API
Astro
7
star
23

bootbot-cli

BootBot CLI
JavaScript
7
star
24

open-prode

Prode Futbol Argentino built with Flux + React
JavaScript
5
star
25

web-dev-challenge-app

Food Challenge App
TypeScript
5
star
26

dom-depth

Dom Depth Test Page
TypeScript
4
star
27

fullsnack

Demo App for Fundamentals of Frontend Architecture Course
TypeScript
4
star
28

netlify-functions-example

HTML
2
star
29

pacamara-astro

Clone of pacamara-astro template
Astro
2
star
30

sveltekit-wordle

Wordle Clone Built with SvelteKit
TypeScript
1
star
31

react-flux-starter

Simple starter kit for webapps using React + Flux
JavaScript
1
star
32

laravel-starter

Laravel + React + Tailwind CSS Starter
PHP
1
star
33

flux

Example app using Flux + React
JavaScript
1
star
34

bookbone

A Backbone + Marionette SPA to find awesome books
JavaScript
1
star
35

svelte-beerjs

Deck and demos of Svelte BeerJS CBA Talk
JavaScript
1
star
36

charca.dev

Home of https://charca.dev
CSS
1
star
37

nextjs-netlify

JavaScript
1
star
38

talks

Decks and demos for talks I've given.
JavaScript
1
star
39

twimeline-reapp

Twitter client made with Reapp
1
star
40

astroship

Astroship Clone
Astro
1
star