Astro 1.5.0 Release

by Matthew Phillips

Astro 1.5.0 just went out and it features:

You can update your projects by running npm install astro@latest.

Adapter support for astro preview

We are rolling out support for the astro preview command in adatpers via a new integration option, starting with the Node.js adapter @astrojs/node. If you are using @astrojs/node, you can now preview your SSR app by running:

npm run preview

Adapter API

We will be updating the other first party Astro adapters to support preview over time. Adapters can opt-in to this feature by providing the previewEntrypoint via the setAdapter function in astro:config:done hook. The Node.js adapter’s code looks like this:

export default function() {
  return {
    name: '@astrojs/node',
    hooks: {
      'astro:config:done': ({ setAdapter, config }) => {
        setAdapter({
          name: '@astrojs/node',
          serverEntrypoint: '@astrojs/node/server.js',
+          previewEntrypoint: '@astrojs/node/preview.js',
          exports: ['handler'],
        });

        // more here
      }
    }
  };
}

Standalone mode in Node.js adapter

New in @astrojs/node is support for standalone mode. With standalone mode, you can start your production server without needing to write any server JavaScript logic yourself. The server starts simply by running the script like so:

node ./dist/server/entry.mjs

To enable standalone mode, set the new mode option to 'standalone' in your Astro config:

import { defineConfig } from 'astro/config';
import nodejs from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: nodejs({
    mode: 'standalone',
  }),
});

See the @astrojs/node documentation for all of the options available in standalone mode.

Existing @astrojs/node users who are using their own HTTP server framework such as Express can upgrade by setting the mode option to 'middleware' in order to build to a middleware mode, which is the same behavior and API as before.

import { defineConfig } from 'astro/config';
import nodejs from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: nodejs({
    mode: 'middleware',
  }),
});

HMR for Tailwind and TypeScript config

HMR is vitally important even at the beginning stages of a project. In a recent Astro release we ensured that changes to your astro.config.mjs file resulted in an automatic server restart. Today we are expanding our support for HMR with other configuration files.

Now, editing your tsconfig.json settings (for example, to add an alias) results in an HMR update.

Similarly, Tailwind configuration file changes now update as well. Just edit your tailwind.config.(js|cjs|mjs) file and the changes will reflect without the need to restart your dev server.

We’re continuing to focus on HMR and the dev experience in upcoming releases.

API Endpoint improvements

In API routes, you can now get the site, generator, url, clientAddress, props, and redirect fields on the APIContext, which is the first parameter passed to an API route. This was done to make the APIContext more closely align with the Astro global in .astro pages.

For example, here’s how you might use the clientAddress, which is the user’s IP address, to selectively allow users.

export function post({ clientAddress, redirect }) {
  if (!allowList.has(clientAddress)) {
    return redirect('/not-allowed');
  }
}

Check out the docs for more information on the newly available fields.

Astro.redirect status code

New in 1.5 is the ability to pass a status code to Astro.redirect. By default it uses 302, but now you can pass another code as the second argument:

/src/pages/old-post.astro

---
// This page was moved, redirect the user to the new permanent page.
return Astro.redirect('/posts/new-post-name', 301);
---

This release also comes with many bug fixes. Thanks to everyone who has contributed to another outstanding release. See the release notes for full details on the changes.