Astro is a fresh but familiar approach to building websites.

Related tags

React Apps astro
Overview

Astro is a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.

Learn more: https://astro.build/blog/introducing-astro

Project Status

⚠️ Astro is still an early beta, missing features and bugs are to be expected! If you can stomach it, then Astro-built sites are production ready and several production websites built with Astro already exist in the wild. We will update this note once we get closer to a stable, v1.0 release.

🔧 Quick Start

Important: Astro is built with ESM modules which are not supported in older version of Node.js. The minimum supported version is 14.15.1.

# create your project
mkdir new-project-directory
cd new-project-directory
npm init astro

# install your dependencies
npm install

# start the dev server and open your browser
npm start

🚀 Build & Deployment

The default Astro project has the following scripts in the /package.json file:

{
  "scripts": {
    "start": "astro dev",
    "build": "astro build"
  }
}

For local development, run:

npm run start

To build for production, run the following command:

npm run build

To deploy your Astro site to production, upload the contents of /dist to your favorite static site host.

🥾 Guides

🚀 Basic Usage

Even though nearly-everything is configurable, we recommend starting out by creating an src/ folder in your project with the following structure:

├── src/
│   ├── components/
│   └── pages/
│       └── index.astro
├── public/
└── package.json
  • src/components/*: where your reusable components go. You can place these anywhere, but we recommend a single folder to keep them organized.
  • src/pages/*: this is a special folder where your routing lives.

🚦 Routing

Routing happens in src/pages/*. Every .astro or .md file in this folder corresponds with a public URL. For example:

Local file Public URL
src/pages/index.astro /index.html
src/pages/post/my-blog-post.md /post/my-blog-post/index.html

🗂 Static Assets

Static assets should be placed in a public/ folder in your project. You can place any images, fonts, files, or global CSS in here you need to reference.

🪨 Generating HTML with Astro

Astro introduces a special .astro format, which combines the best of HTML with the best of JavaScript.

To learn more about .astro files, read our complete Syntax Guide.

✍️ Markdown

Spend less time configuring your tooling and more time writing content. Astro has phenomenal Markdown support (powered by remark) baked in!

Not only can you use local .md files as pages, but Astro also comes with a component to turn every page into a Markdown file. Using the component in an .astro file should feel very similar to MDX, but with the ability to use components from any framework (with partial hydration, too)!

To learn more about use Markdown in Astro, read our Markdown Guide.

Dynamic Components

TODO: Astro dynamic components guide

💧 Partial Hydration

By default, Astro outputs zero client-side JS. If you'd like to include an interactive component in the client output, you may use any of the following techniques.

  • will render an HTML-only version of MyComponent (default)
  • will render MyComponent on page load
  • will use requestIdleCallback() to render MyComponent as soon as main thread is free
  • will use an IntersectionObserver to render MyComponent when the element enters the viewport

⚛️ State Management

Frontend state management depends on your framework of choice. Below is a list of popular frontend state management libraries, and their current support with Astro.

Our goal is to support all popular state management libraries, as long as there is no technical reason that we cannot.

  • React/Preact
    • Recoil: Full Support
    • Jotai: Full Support
    • Redux: Partial Support (Note: You can access a Redux store directly, but full react-redux support requires the ability to set a custom wrapper to every component island. Planned.)
  • Svelte
    • Svelte Stores: Full Support
  • Vue:
    • Vuex: Partial Support (Note: You can access a vuex store directly, but full vuex support requires the ability to set a custom vue.use(store) call to every component island. Planned.)

Are we missing your favorite state management library? Add it to the list above in a PR (or create an issue)!

💅 Styling

Styling in Astro is meant to be as flexible as you’d like it to be! The following options are all supported:

Framework Global CSS Scoped CSS CSS Modules
Astro (.astro) N/A¹
React / Preact
Vue
Svelte

¹ .astro files have no runtime, therefore Scoped CSS takes the place of CSS Modules (styles are still scoped to components, but don’t need dynamic values)

To learn more about writing styles in Astro, see our Styling Guide.

👉 Styling

🐶 Fetching Data

Fetching data is what Astro is all about! Whether your data lives remotely in an API or in your local project, Astro has got you covered.

For fetching from a remote API, use a native JavaScript fetch() (docs) as you are used to. For fetching local content, use Astro.fetchContent() (docs).

// src/components/MyComponent.Astro

---
// Example 1: fetch remote data from your own API
const remoteData = await fetch('https://api.mysite.com/v1/people').then((res) => res.json());

// Example 2: load local markdown files
const localData = Astro.fetchContent('../post/*.md');
---

🗺️ Sitemap

Astro will automatically create a /sitemap.xml for you for SEO! Be sure to set buildOptions.site in your Astro config so the URLs can be generated properly.

⚠️ Note that Astro won’t inject this into your HTML for you! You’ll have to add the tag yourself in your on all pages that need it:

">
<link rel="sitemap" href="/sitemap.xml" />
Examples

🍱 Collections (beta)

Fetching data is easy in Astro. But what if you wanted to make a paginated blog? What if you wanted an easy way to sort data, or filter data based on part of the URL? Or generate an RSS 2.0 feed? When you need something a little more powerful than simple data fetching, Astro’s Collections API may be what you need.

👉 Collections API

Publishing Astro components

Using Astro components in your project allows you to break up your pages into small reuseable units of functionality. If you want to share your Astro components you can do so by publishing them to npm.

👉 Publishing Astro components guide

⚙️ Config

Configuration for Astro is done through the astro.config.mjs file at the root of your project. To learn more:

👉 astro.config.mjs Reference

Astro uses Snowpack for module resolution. You can configure Snowpack by adding a snowpack.config.mjs file in the root of your project. You might need this to add loader plugins, for example. To learn more:

👉 snowpack.config.mjs Reference

🪄 Renderers

Astro is able to render React, Svelte, Vue, and Preact components out of the box. If you'd like to add support for another framework, you can build a renderer plugin using the same interface as Astro's official renderers.

👉 Renderer Docs

📚 API

👉 Full API Reference

👩🏽‍💻 CLI

👉 Command Line Docs

🏗 Development Server

👉 Dev Server Docs

Comments
  • 🚀 Astro Next (0.21.0)

    🚀 Astro Next (0.21.0)

    🚀 Astro Next (0.21.0)

    Hello! This PR showcases a huge change to Astro, namely the new Go/WASM compiler, and switch to Vite. So this will work a little differently from most PRs. This will be a long-running PR that other PRs get merged into (no pushes directly, please!).

    👀 For Viewers

    If you’re using this to track the status of [email protected]

    ✨ Try it today

    ⚠️ We recommend starting with a new project! Trying to use on an existing Astro project will likely not work until we have full feature parity.

    npm install [email protected]
    

    Examples Checklist - Complete, Linked

    Status: started

    • [x] blog (jn)
    • [x] blog-multiple-authors (dp)
    • [x] docs (jn)
    • [x] framework-preact (mp)
    • [x] framework-react (mp)
    • [x] framework-svelte (mp)
    • [x] framework-vue (mp)
    • [x] framework-solid (mp)
    • [x] framework-lit (mp)
    • [x] framework-multiple (mp)
    • [x] minimal (mp)
    • [x] portfolio (jn)
    • [x] starter (mp)
    • [x] with-markdown (nm)
    • [x] with-markdown-plugins (mp)
    • [x] with-nanostores (mp)

    Examples Checklist - Complete, Installed/Unlinked

    Status: finished

    • [x] *shared/general: (mp) https://github.com/stackblitz/webcontainer-core/issues/335 (also: https://github.com/snowpackjs/astro/pull/1406#issuecomment-930506551)
    • [x] blog (jn)
    • [x] blog-multiple-authors (jn)
    • [x] docs (jn
    • [x] framework-preact (nm)
    • [x] framework-react (nm)
    • [x] framework-svelte (nm)
    • [x] framework-vue (nm)
    • [x] framework-solid (mp)
    • [x] framework-lit (mp)
    • [x] framework-multiple (dp)
    • [x] minimal (jn)
    • [x] portfolio (dp)
    • [x] starter (mp)
    • [x] with-markdown (dp)
    • [x] with-markdown-plugins (nm)
    • [x] with-nanostores (dp)

    🧩 Stability

    Last updated: 2021-10-11

    • [ ] Enable Windows tests
    • [x] Compiler needs scoping support for dynamic classes added in expressions https://github.com/snowpackjs/astro-compiler-next/pull/120
    • [x] New features
      • [x] Define vars for script & style
      • [x] Astro components in Markdown
    • [x] Frameworks
      • [x] Preact
      • [x] React
      • [x] Solid
      • [x] Svelte
      • [x] Vue
      • [x] Lit Element / Custom Elements
      • [x] slots in client components
    • [x] API
      • [x] Astro.fetchContent() #1480
      • [x] Astro.resolve() https://github.com/vitejs/vite/pull/5252
      • [x] getStaticPaths()
    • [x] Markdown support
      • [x] Markdown plugins
    • [x] Core features
      • [x] RSS
      • [x] Sitemap
      • [x] Scoped CSS
      • [x] Page-based routing
      • [x] Builtin Astro Components (Debug, Code, etc)
        • [x] Code #1635
        • [x] Debug #1633
        • [x] Markdown #1631
        • [x] Prism
      • [x] Top-level fetch in Astro pages
      • [x] Top-level fetch in Astro components
      • [x] Top-level fetch in any JS-like file
    • [x] Integrations
      • [x] PostCSS
      • [x] Sass

    🔧 For Contributors

    For people helping move [email protected] closer to stable release

    ✅ Contributing checklist

    This next branch will act as a sort of main until it’s ready to merge. So in that sense, we’ll require the following workflow here:

    • ✅ No commits directly to main. This should be enforced in GitHub.
    • ✅ All contributions to next must be PRs targeted against this branch
    • ✅ Your test suite must fully pass! (npm run test locally; ignore failing CI for now)

    ⏭ Moving to main

    We’ll merge this PR into main when the Stability checklist above has been completed. Some items are intentionally left out, because they can be completed post-merge, with community involvement. This is including, but not limited to:

    • [ ] CSS bundling
    • [ ] Tailwind HMR
    • [ ] client:only
    • [x] Allow using scripts in public/
      • Works as expected if not used within a page.
      • If used within a page the build fails.
    • [ ] Better astro build stats output
    • [ ] Fine-tuned build optimizations
    • [ ] Automatic <img> and srcset inclusion
    • [x] ~~Functional components in frontmatter~~
    • [ ] Drop TSX/JSX support in frontmatter/compiler now that functional components not needed
    • [ ] getStaticPaths() is no longer allowed to live further down the frontmatter
    • [ ] Migration errors/warnings (if a user has Snowpack config, warn! if a user has old settings, warn! etc. etc.)
    • [ ] with-tailwindcss (mp)
      • Build: Styles are not built, because there is no HTML scanning during the build.
      • This is being added.
    opened by drwpow 45
  • 💡 RFC: Optimized scripts

    💡 RFC: Optimized scripts

    Background & Motivation

    The style tag in .astro files has special meaning. You can write a style in any astro file and it will scope the selectors in that file. Additionally styles will be:

    • Moved into the head
    • Bundled together

    You cannot do the same with a script. An example use-case is wanting to abstract some client-side DOM modification code, or create a custom elements. You could write:

    MyElement.astro

    <my-element></my-element>
    <script>
      customElements.define('my-element', class extends HTMLElement {});
    </script>
    

    However if this script is used multiple times it will result in multiple script tags and throw (you can't define a custom element twice).

    Additionally the downsides are that:

    • This script will be in the body, so if you use a src the browser isn't able to start fetching as soon as possible.
    • This script will not be bundled with other scripts in the page.

    Proposed Solution

    Possible solutions

    I propose a special attribute on <script> element's called optimize.

    <my-element></my-element>
    <script optimize>
      customElements.define('my-element', class extends HTMLElement {});
    </script>
    

    This will:

    • Move the script to the head.
    • Bundle the script with other scripts marked as optimized (in production).
    • Only add the script once (in the head) regardless of how many times the component is used.

    Alternatives considered

    • <Script> component but this would:
      • Require you import a component that really doesn't do anything (this has to interact with the compiler).
    • Make this the default behavior of <script>
      • This would be a breaking change.
      • Not sure if changing HTML semantics by default are what we want Astro to be.
    • Have individual props for each of "move to head", "once", and "bundle".
      • This would be pretty verbose and be more difficult to implement. I think we can backport configurability in the future as need arises.

    Risks, downsides, and/or tradeoffs

    Alternatives give tradeoffs.

    Open Questions

    As always, the name. Some choices:

    • optimize
    • optimized (past participle)
    • module
    • bundle
    • Namespaced some how...
    • other here...

    Detailed Design

    No response

    Help make it happen!

    • [X] I am willing to submit a PR to implement this change.
    • [ ] I am willing to submit a PR to implement this change, but would need some guidance.
    • [ ] I am not willing to submit a PR to implement this change.
    opened by matthewp 38
  • 💡 RFC: Components in Markdown

    💡 RFC: Components in Markdown

    What is Missing from Astro Today?

    • We had to remove components-in-Markdown support from Astro before launch.
    • Now, lots of us would like to add it back!
    • Previous discussion: https://github.com/snowpackjs/astro/issues/364

    /cc @snowpackjs/maintainers

    Proposed Solution

    Inspired by: https://github.com/snowpackjs/astro/issues/364#issuecomment-859573326

    ---
    // src/pages/index.mdc
    import SomeComponent from '../components/SomeComponent.jsx';
    import SomeLayout from '../layouts/SomeLayout.astro';
    export const metadata = {
      title: 'Title',
      description: 'Description',
      date: '12-01-1990',
      layout: SomeLayout,
    };
    ---
    # Hello, world!
    <SomeComponent:visible />
    

    But what about yaml/toml/etc?

    Go for it! Use whatever parser you'd like, as long as it can return a JS object.

    ---
    import SomeComponent from '../components/SomeComponent.jsx';
    import yaml from 'yaml-parser';
    export const metadata = yaml`
      title: Title
      description: Description
      date: '12-01-1990'
      layout: '../layouts/SomeLayout.jsx'
    `;
    ---
    # Hello, world!
    <SomeComponent:visible />
    

    But what about REAL yaml/toml/etc?

    I think we need to support this for backwards compat with existing users, it would be a super drastic change to remove support which we should really only do in a v1.0 RC. Who knows though, maybe most users will keep using this format by default and then only changing to JS when they need imports. Kind of like defaulting to .js in your project and then only switching to .jsx when you need JSX.

    // src/pages/foo.md
    ---
    title: Title
    description: Description
    date: '12-01-1990'
    layout: '../layouts/SomeLayout.jsx'
    ---
    # Hello, world!
    <!-- Not supported, only works with JS frontmatter: <SomeComponent:visible /> -->
    

    Alternative Solutions

    • .md.astro or .astro.md - Unnecessary, Astro syntax (ex: using components) is valid Markdown syntax.
    • Astro.setMetadata() vs export const metadata - Now that we're redoing the props API to not use exports, export const metadata shouldn't conflict with anything existing.

    Proposal Status

    Looking for feedback, and alternative solutions. If this gets some high-level buy-in, then one of us can convert to an official RFC.

    opened by FredKSchott 35
  • 🐛 BUG: css `url()` replaced by __VITE_ASSET__*

    🐛 BUG: css `url()` replaced by __VITE_ASSET__*

    What version of astro are you using?

    0.21.11

    What package manager are you using?

    npm

    What operating system are you using?

    Linux on WSL2 (Ubuntu 20.04.3 LTS)

    Describe the Bug

    When adding a font from a npm package the font file url in the build is replaced by __VITE_ASSET__2adefcbc__

    See the linked example. When adding a @font-face definition in global.css the result in the build is mangled. For the example I could not get the font to actually show on the astro dev page. But in my project (which I cannot share) everything works with astro dev but building does not. (In the example the actual font file is not copied to the build dir. This does happen in my project)

    Link to Minimal Reproducible Example

    https://stackblitz.com/edit/github-eehb2a-fggvjv?devtoolsheight=33&file=dist/assets/index.4daba237.css

    upstream p5-urgent s3-large 
    opened by hmvp 31
  • 💡 RFC: Static tweet parser

    💡 RFC: Static tweet parser

    Motivation

    I want to be able to have a markdown shortcode for instance: {{ tweet 34343443 }} or have full link to a tweet like: https://twitter.com/user/22332 which then should convert to a static tweet.

    The origin of this is Astro is build to be fast, static and no-js. However one big struggle for my site is Tweet embeds inside Markdown.

    These use a lot of resource and slow the rendering down.

    A solution for instance is this vercel next.js example: https://static-tweet.vercel.app/

    I got the gist working in Astro as a component on it's own However that doesn't work on build and it can't work on markdown parsed files (which often a blog are)

    Proposed Solution

    Possible solutions

    A rehype plugin that can do this?

    Alternatives considered

    A Astro component that can render over Markdown slot?

    Risks, downsides, and/or tradeoffs

    You will miss the live like update, or this can be fetched on build time?

    Detailed Design

    The output can look like this: https://static-tweet.vercel.app/

    Benefit, people can style the tweets anyway they like to fit the website.

    Open Questions

    No response

    Help make it happen!

    • [ ] I am willing to submit a PR to implement this change.
    • [X] I am willing to submit a PR to implement this change, but would need some guidance.
    • [ ] I am not willing to submit a PR to implement this change.
    opened by rebelchris 31
  • 🐛 BUG: 404 does not work with Vercel

    🐛 BUG: 404 does not work with Vercel

    What version of astro are you using?

    1.0.0-rc.6

    Are you using an SSR adapter? If so, which one?

    Vercel

    What package manager are you using?

    npm

    What operating system are you using?

    Linux

    Describe the Bug

    Adding a 404.astro to src/pages works fine in Netlify, but in Vercel the 404 is not displayad. It displays the start page with a 200 status code.

    Link to Minimal Reproducible Example

    Problem is only visible in Vercel

    Participation

    • [ ] I am willing to submit a pull request for this issue.
    needs response p4-important s1-small 
    opened by jablonski 29
  • 💡 RFC: SSR

    💡 RFC: SSR

    Our current intention is to launch Astro as a static site builder. That means all pages are built to static HTML, and no support for dynamic server-side routes.

    But, there seems to be a lot of community interest in supporting dynamic routes & pages. If there's enough interest and anyone willing to help us with an implementation, then I'd love to start putting together an RFC for experimental support. If we put this behind an experimental flag to start, then I don't think it interferes with our "static site builder" launch story.

    Anyone interested in helping spec out an RFC?

    Some pieces that need discussion / fleshing out:

    • Dynamic pages: can we borrow from Next.js's file based routing? /pages/[id].js, /pages/[...id].ks, etc.
    • Dynamic props: how does a page register as dynamic? Something like getServerSideProps?
    • Deploy targets: In addition to a Node.js server deployment, I really want us to have a good Cloudflare Workers story. SvelteKit too the approach of having different "adapters" for Node, Deno, etc. Could we do the same?
    opened by FredKSchott 28
  • 🐛 BUG: Astro.url.pathname is missing trailing slash on prod build

    🐛 BUG: Astro.url.pathname is missing trailing slash on prod build

    What version of astro are you using?

    1.0.0-rc.7

    Are you using an SSR adapter? If so, which one?

    none

    What package manager are you using?

    yarn

    What operating system are you using?

    archlinux

    Describe the Bug

    I just upgraded to 1.0.0-rc.1 and got a warning about Astro.canonicalURL.pathname (which I am using to highlight selected menu). I replaced its usage with Astro.url.pathname and everything looked fine with astro dev.

    However when doing the static build with astro build the menu does not get highlighted.

    With some debugging, it turns out, that Astro.url.pathname:

    • is the exact pathname on dev (with a trailing slash if the URL has one - and not otherwise)
    • but on build there is never a trailing slash (even if the URL has one - somehow expected, since the same index.html file is served)

    Looking at the (now deleted) code of createCanonicalURL https://github.com/withastro/astro/pull/3959/files#diff-7d09784396a04fa12dd4dcfbe9d6f7528bfe522487493851dc08957000481facL6 the added trailing slash has been dropped.


    A proper fix would:

    • adjust this URL on dev to match the URL which would be used for build (with a trailing slash to match the behavior before RC, without if you think this would be better)
    • be documented on the migration guide

    What do you think?

    Link to Minimal Reproducible Example

    https://stackblitz.com/edit/github-mz4j6y?file=src/pages/test.astro

    Navigate to the following URLs:

    • https://github-mz4j6y--3000.local-corp.webcontainer.io/test (pathname: /test <- will be the on astro build)
    • https://github-mz4j6y--3000.local-corp.webcontainer.io/test/ (pathname: /test/)

    Participation

    • [x] I am willing to submit a pull request for this issue.
    p4-important s1-small 
    opened by oliverpool 27
  • 🐛 BUG: PostCSS example from documentation does not work (and some plugins are broken)

    🐛 BUG: PostCSS example from documentation does not work (and some plugins are broken)

    What version of astro are you using?

    v1.0.0-beta.40

    Are you using an SSR adapter? If so, which one?

    no

    What package manager are you using?

    npm

    What operating system are you using?

    Linux

    Describe the Bug

    https://docs.astro.build/en/guides/styling/#postcss

    Documentation says that PostCSS integration can be enabled with just creating a postcss.config.js file, install some plugins and require them there.

    And it works with plugins like autoprefixer, but postcss-nesting does not work. The example in the documentation uses postcss-preset-env (which also includes postcss-nesting).

    In the test case i created i just forked the "Just the basics" repo example, installed the plugin, added postcss.config.js and moved the css inside components/Card.astro so it becomes:

    	.link-card {
    		list-style: none;
    		display: flex;
    		padding: 0.15rem;
    		background-image: var(--link-gradient);
    		background-size: 400%;
    		border-radius: 0.5rem;
    		background-position: 100%;
    		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    
    		& > a {
    			width: 100%;
    			text-decoration: none;
    			line-height: 1.4;
    			padding: 1em 1.3em;
    			border-radius: 0.35rem;
    			color: var(--text-color);
    			background-color: white;
    			opacity: 0.8;
    		}
    

    1654474144

    The nesting thing does not work, devtools shows an error because invalid property. In the case of doing this in a svelte component... the dev server crash and doesn't let you continue.

    Looks like postcss plugins that include (at the moment) a custom syntax does not work

    Link to Minimal Reproducible Example

    https://codesandbox.io/s/silent-dew-fehxqz

    Participation

    • [ ] I am willing to submit a pull request for this issue.
    p2-has-workaround s2-medium 
    opened by felixsanz 27
  • 🐛 BUG: Latest Astro broke Preact component rendering

    🐛 BUG: Latest Astro broke Preact component rendering

    What version of astro are you using?

    0.21.12

    What package manager are you using?

    npm

    What operating system are you using?

    Stackblitz / any

    Describe the Bug

    When importing a .tsx Preact component in the latest 0.21.12 release, the build fails with a 500 error explaining that the component can't be found or rendered.

    See the basic Astro Framework Preact example

    Link to Minimal Reproducible Example

    https://stackblitz.com/github/withastro/astro/tree/latest/examples/framework-preact

    opened by ElianCodes 27
  • Do not observe visible hydrate components more than once

    Do not observe visible hydrate components more than once

    Changes

    There was an issue on the docs site where two islands of the same component, hydrated with client:visible, caused the onVisible hook to observe both components multiple times. This caused some sort of conflict between the two and incorrect results for entry.isIntersecting. The result was that the visible theme toggle wasn't hydrating on page load with client:visible.

    Testing

    • Covered by existing client:visible test.
    • Can't currently test this specific case in our test suite since it requires browser behavior.

    Docs

    • N/A
    opened by FredKSchott 26
  • Base path not working like the docs said

    Base path not working like the docs said

    What version of astro are you using?

    latest

    Are you using an SSR adapter? If so, which one?

    NodeJs 18 LTS + SSR nodejs standalone

    What package manager are you using?

    yarn 3

    What operating system are you using?

    Mac

    Describe the Bug

    https://docs.astro.build/en/reference/configuration-reference/#base

    The docs said it only affects production. But seem in development, this still have effect.

    When I config astro.config.js like this

    import { defineConfig } from 'astro/config';
    import svelte from '@astrojs/svelte';
    import AstroNode from '@astrojs/node';
    
    export default defineConfig({
      output: 'server',
      integrations: [svelte()],
      base: '/ok',
      server: {
        port: 4000,
        host: '0.0.0.0',
      },
      adapter: AstroNode({
        mode: 'standalone',
      }),
    });
    
    

    In dev mode, it will throw a warning like this

    [serve]  404   /favicon.ico
    [dev] Requests for items in your public folder must also include your base. /favicon.svg should be /ok/favicon.svg. Omitting the base will break in production.
    

    And the screen shows like this

    404: Not found
    In your site you have your base path set to [/ok/](http://localhost:3000/ok/). Do you want to go there instead?
    

    In my mind, I think this base path is like the concept of NextJs. But seem not correct like they do.

    --- With NextJs concept When I config basePath to /ok --> In production mode, at least this will auto append /ok to the href with next/link. And the assets must be appended with base path ok/.

    But seem Astro not auto append href 🤔.

    Link to Minimal Reproducible Example

    Stackblitz did not work correctly with the base path. So your team needs to pull this source code 😆.

    https://github.com/harrytran998/rep-astro-base-path (Here is the version of stackblitz to check https://stackblitz.com/edit/github-ncwvvs?file=astro.config.mjs)

    Participation

    • [ ] I am willing to submit a pull request for this issue.
    opened by harrytran998 0
  • Head propagation

    Head propagation

    Changes

    • This implements the primitives for head propagation. See the test case to see how this can be used.
    • Any module in the graph can be marked as doing head injection. Right now this is based on a comment syntax (which will be used for renderEntry. In the future Astro components could be marked as doing head injection by the compiler.
    • A Vite plugin walks the graph to mark the tree as having head injection.
    • At runtime components will mark themselves as doing injection. When we go to render the page we will recursively run their frontmatter scripts and collect all of the head content.
    • When we go to render the head content is populated and renders out separately from the rest of the page.

    Testing

    • Added a test case using the low-level APIs. This is what renderEntry will do as well.

    Docs

    • This is a low-level implementation to be used by renderEntry and in the future, a head propagation API.
    core 
    opened by matthewp 1
  • [@astrojs/image] getPicture ignores alt

    [@astrojs/image] getPicture ignores alt

    What version of astro are you using?

    1.6.12

    Are you using an SSR adapter? If so, which one?

    None

    What package manager are you using?

    npm

    What operating system are you using?

    Mac

    Describe the Bug

    https://docs.astro.build/en/guides/integrations-guide/image/#getpicture

    The documentation says that getPicture takes in an object with the same properties as <Picture /> but I am unable to pass an object with the alt property.

    Link to Minimal Reproducible Example

    https://stackblitz.com/edit/github-8vejxa?file=src%2Fpages%2Findex.astro&on=stackblitz

    Participation

    • [ ] I am willing to submit a pull request for this issue.
    image 
    opened by truesri 0
  • Can not change the response from a component

    Can not change the response from a component

    What version of astro are you using?

    1.6.12

    Are you using an SSR adapter? If so, which one?

    None

    What package manager are you using?

    npm

    What operating system are you using?

    Mac

    Describe the Bug

    Trying to change the response from a component is ignored.

    Astro.response.headers.set('x-name', 'astro');

    Link to Minimal Reproducible Example

    https://codesandbox.io/s/sharp-meadow-t8lcog?file=/src/components/Card.astro

    Participation

    • [ ] I am willing to submit a pull request for this issue.
    opened by ido-pluto 2
  • [ci] release

    [ci] release

    This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

    Releases

    [email protected]

    Patch Changes

    example integration core 
    opened by fredkbot 0
  • Refactor Astro plugin and compile flow

    Refactor Astro plugin and compile flow

    Changes

    • Refactor vite-plugin-astro to split of core logic out of index.ts so they can be tested.
    • Remove /@fs usage when compiling (uses resolve.dedupe to achieve this)

    It's easier to review the changes by checking each commit individually.

    Testing

    All existing tests should pass.

    Docs

    N/A. refactors.

    core 
    opened by bluwy 2
Owner
Snowpack
The faster frontend build tool.
Snowpack
Astro components for building reactive user interfaces 🚀

Astro Reactive Library Let your data build your UI with native Astro components and architecture. Packages Version Description @astro-reactive/form ge

Ayo Ayco 47 Nov 12, 2022
A demo of a Shopify site using Astro and React.

A demo of a Shopify site using Astro and React.

Cassidy Williams 95 Nov 30, 2022
An hexagonal architecture approach for a Remix Todo List Manager app

Todo List Manager This project showcases an hexagonal architecture approach for front-end projects. This is a Remix application, you may want to check

Antoine Chalifour 68 Nov 19, 2022
A novel approach for security and user experience of Graphical Password Authentication.

Graphical Password Authentication Alohomora Harry Potter themed (not really) Graphical Password Authentication Flowchart and Architecture Solution Dem

Akshat Shah 9 Apr 26, 2022
Build Better Websites. Create modern, resilient user experiences with web fundamentals.

Welcome to Remix! Remix is a framework for building better websites using modern web standards and best practices. We are happy you're here! This repo

Remix 21k Nov 29, 2022
Create Fullscreen Scrolling Websites

Create Fullscreen Scrolling Websites

Thierry Charbonnel 172 Oct 29, 2022
Create in react and typescript an application widget to feedback in websites.

Feedget Table of Contents About • Features • Revised Concepts • Installation • Get Started • Technologies • License ?? About (Coloque aqui uma pequena

Christian Oliveira 1 May 8, 2022
Dribbble, but for web developers. A portal for sharing your web projects with the world.

Driwwwle The Idea ?? We've all visited Dribbble atleast once, right ? You know, the cool place where designers go to showcase their projects and their

Nitin Ranganath 100 Nov 29, 2022
One more Twitter clone, but this one is featureful yet concise and fast, built with MERN stack, with love ❤.

React front-end for tclone Try it here back-end repo here looks like twitter, but not ?? It is my own take on building Twitter clone, I have tried to

muzamil 130 Sep 29, 2022
A bot Similar to the reaction roles discord bot, but free. Written in JavaScript, and uses MongoDB.

An open source reaction roles bot to anyone who needs one in their server. It's easy to use, similar to the reaction roles bot and Totally Free. The bot also used MongoDB as a database!

null 51 Nov 24, 2022
An app built with react and firebase and few other modules. It is tiktok but for movie trailers. that is why I called it tiktrailer

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 7 Mar 31, 2022
An Arweave.js dapp wallet aggregator for react. (similar to useWallet but for Arweave.)

arjs-react An Arweave.js dapp wallet aggregator for react. (similar to useWallet but for Arweave.) Todos: Implement persistent sessions with "sesssion

Jordan Miller 7 Sep 1, 2022
Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Awe-amazing Windows 11 clone. Oh wait, Not for your Computer, but for the web! ⚡

Piyush Suthar 448 Dec 1, 2022
Syntax highlighting, like what GitHub uses to highlight code, but free and open source and JavaScript

Close up of The Starry Night by Vincent van Gogh (1889) with examples of starry-night over it starry-night Syntax highlighting, like what GitHub uses

Titus 578 Dec 7, 2022
Worlde but Math

NERDLE Worlde but Math ?? Features Mobile Friendly Remote configuration Tested for + - ^ % / operators Typesafe (Typescript) Virtual Keyboard / Mobile

Ayush Paharia 4 Jul 25, 2022
Sportr is an app designed to be a 'Tinder style app', but for sports

Sportr allows users to create sport events that are shared to the larger community to be swiped on to find others to play a variety of pick-up style sports with. This project developed skills for React applications and full stack development using React, NextJS, Chakra UI, Javascript, Knex.js, postgreSQL, Google Maps API and WebSockets.

chris degroot 1 Apr 21, 2022
Wordle but with dogs

Application is currently live at corgle.tech! Inspiration Dogs are almost universally loved, and the same goes for Wordle. We wanted to combine these

Selorm Sosuh 4 May 11, 2022
This is an application, something like todo app in react but more advanced. It includes hooks, conditionals, styled-component, and many more

Expenses project in React. This project is based on Maximilan Schwarzmuller react course on Udemy. It covers all the topcis that react developer shoul

Michał Zalewski 0 Sep 27, 2022
Subscribe to my YouTube channel: https://bit.ly/CognitiveSurge - Building Netflix Using React

Building Netflix from Scratch Using React (Custom Hooks, Context, Portals), Firebase, Compound & Styled Components (10 Hour Tutorial Here: https://www

Karl Hadwen 2k Dec 2, 2022