npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

astro-node-websocket-proposal

v6.0.0

Published

Deploy your site to a Node.js server

Downloads

2

Readme

@astrojs/node

This adapter allows Astro to deploy your SSR site to Node targets.

Why @astrojs/node

If you're using Astro as a static site builder—its behavior out of the box—you don't need an adapter.

If you wish to use server-side rendering (SSR), Astro requires an adapter that matches your deployment runtime.

Node.js is a JavaScript runtime for server-side code. @astrojs/node can be used either in standalone mode or as middleware for other http servers, such as Express.

Installation

Add the Node adapter to enable SSR in your Astro project with the following astro add command. This will install the adapter and make the appropriate changes to your astro.config.mjs file in one step.

# Using NPM
npx astro add node
# Using Yarn
yarn astro add node
# Using PNPM
pnpm astro add node

Add dependencies manually

If you prefer to install the adapter manually instead, complete the following two steps:

  1. Install the Node adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:

      npm install @astrojs/node
  2. Add two new lines to your astro.config.mjs project configuration file.

    // astro.config.mjs
    import { defineConfig } from 'astro/config';
    import node from '@astrojs/node';
    
    export default defineConfig({
      output: 'server',
      adapter: node({
        mode: 'standalone',
      }),
    });

Configuration

@astrojs/node can be configured by passing options into the adapter function. The following options are available:

Mode

Controls whether the adapter builds to middleware or standalone mode.

  • middleware mode allows the built output to be used as middleware for another Node.js server, like Express.js or Fastify.

    import { defineConfig } from 'astro/config';
    import node from '@astrojs/node';
    
    export default defineConfig({
      output: 'server',
      adapter: node({
        mode: 'middleware',
      }),
    });
  • standalone mode builds to server that automatically starts with the entry module is run. This allows you to more easily deploy your build to a host without any additional code.

Usage

First, performing a build. Depending on which mode selected (see above) follow the appropriate steps below:

Middleware

The server entrypoint is built to ./dist/server/entry.mjs by default. This module exports a handler function that can be used with any framework that supports the Node request and response objects.

For example, with Express:

import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = express();
// Change this based on your astro.config.mjs, `base` option.
// They should match. The default value is "/".
const base = '/';
app.use(base, express.static('dist/client/'));
app.use(ssrHandler);

app.listen(8080);

Or, with Fastify (>4):

import Fastify from 'fastify';
import fastifyMiddie from '@fastify/middie';
import fastifyStatic from '@fastify/static';
import { fileURLToPath } from 'node:url';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = Fastify({ logger: true });

await app
  .register(fastifyStatic, {
    root: fileURLToPath(new URL('./dist/client', import.meta.url)),
  })
  .register(fastifyMiddie);
app.use(ssrHandler);

app.listen({ port: 8080 });

Additionally, you can also pass in an object to be accessed with Astro.locals or in Astro middleware:

import express from 'express';
import { handler as ssrHandler } from './dist/server/entry.mjs';

const app = express();
app.use(express.static('dist/client/'));
app.use((req, res, next) => {
  const locals = {
    title: 'New title',
  };

  ssrHandler(req, res, next, locals);
});

app.listen(8080);

Note that middleware mode does not do file serving. You'll need to configure your HTTP framework to do that for you. By default the client assets are written to ./dist/client/.

Standalone

In standalone mode a server starts when the server entrypoint is run. By default it is built to ./dist/server/entry.mjs. You can run it with:

node ./dist/server/entry.mjs

For standalone mode the server handles file servering in addition to the page and API routes.

Custom host and port

You can override the host and port the standalone server runs on by passing them as environment variables at runtime:

HOST=0.0.0.0 PORT=4321 node ./dist/server/entry.mjs

HTTPS

By default the standalone server uses HTTP. This works well if you have a proxy server in front of it that does HTTPS. If you need the standalone server to run HTTPS itself you need to provide your SSL key and certificate.

You can pass the path to your key and certification via the environment variables SERVER_CERT_PATH and SERVER_KEY_PATH. This is how you might pass them in bash:

SERVER_KEY_PATH=./private/key.pem SERVER_CERT_PATH=./private/cert.pem node ./dist/server/entry.mjs

Runtime environment variables

If an .env file containing environment variables is present when the build process is run, these values will be hard-coded in the output, just as when generating a static website.

During the build, the runtime variables must be absent from the .env file, and you must provide Astro with every environment variable to expect at run-time: VARIABLE_1=placeholder astro build. This signals to Astro that the actual value will be available when the built application is run. The placeholder value will be ignored by the build process, and Astro will use the value provided at run-time.

In the case of multiple run-time variables, store them in a seperate file (e.g. .env.runtime) from .env. Start the build with the following command:

export $(cat .env.runtime) && astro build

Troubleshooting

SyntaxError: Named export 'compile' not found

You may see this when running the entry script if it was built with npm or Yarn. This is a known issue that may be fixed in a future release. As a workaround, add "path-to-regexp" to the noExternal array:

// astro.config.mjs
import { defineConfig } from 'astro/config';

import node from '@astrojs/node';

export default defineConfig({
  output: 'server',
  adapter: node(),
  vite: {
    ssr: {
      noExternal: ['path-to-regexp'],
    },
  },
});

For more help, check out the #support channel on Discord. Our friendly Support Squad members are here to help!

You can also check our Astro Integration Documentation for more on integrations.

Contributing

This package is maintained by Astro's Core team. You're welcome to submit an issue or PR!

Changelog

See CHANGELOG.md for a history of changes to this integration.