-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Node.js standalone mode + support for astro preview #5056
Changes from all commits
360ec9f
64d6439
178eef3
cd00b9b
69e32cb
166a428
86954fd
d2b849e
19e887e
316d91b
264323d
9956b82
054aad7
70072ec
02cdb83
5dde984
12d6566
e7a9bd9
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
--- | ||
'astro': minor | ||
'@astrojs/node': minor | ||
--- | ||
|
||
# Adapter support for `astro preview` | ||
|
||
Adapters are now about to support the `astro preview` command via a new integration option. The Node.js adapter `@astrojs/node` is the first of the built-in adapters to gain support for this. What this means is that if you are using `@astrojs/node` you can new preview your SSR app by running: | ||
|
||
```shell | ||
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: | ||
|
||
```diff | ||
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 | ||
} | ||
} | ||
}; | ||
} | ||
``` | ||
|
||
The `previewEntrypoint` is a module in the adapter's package that is a Node.js script. This script is run when `astro preview` is run and is charged with starting up the built server. See the Node.js implementation in `@astrojs/node` to see how that is implemented. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
--- | ||
'@astrojs/node': major | ||
--- | ||
|
||
# Standalone mode for the 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 yourself. The server starts simply by running the script like so: | ||
|
||
```shell | ||
node ./dist/server/entry.mjs | ||
``` | ||
|
||
To enable standalone mode, set the new `mode` to `'standalone'` option in your Astro config: | ||
|
||
```js | ||
import { defineConfig } from 'astro/config'; | ||
import nodejs from '@astrojs/node'; | ||
|
||
export default defineConfig({ | ||
output: 'server', | ||
adapter: nodejs({ | ||
mode: 'standalone' | ||
}) | ||
}); | ||
``` | ||
|
||
See the @astrojs/node documentation to learn all of the options available in standalone mode. | ||
|
||
## Breaking change | ||
|
||
This is a semver major change because the new `mode` option is required. 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. | ||
|
||
```js | ||
import { defineConfig } from 'astro/config'; | ||
import nodejs from '@astrojs/node'; | ||
|
||
export default defineConfig({ | ||
output: 'server', | ||
adapter: nodejs({ | ||
mode: 'middleware' | ||
}) | ||
}); | ||
``` |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
--- | ||
'astro': minor | ||
'@astrojs/cloudflare': minor | ||
'@astrojs/deno': minor | ||
'@astrojs/image': minor | ||
'@astrojs/netlify': minor | ||
'@astrojs/node': minor | ||
'@astrojs/vercel': minor | ||
--- | ||
|
||
# New build configuration | ||
|
||
The ability to customize SSR build configuration more granularly is now available in Astro. You can now customize the output folder for `server` (the server code for SSR), `client` (your client-side JavaScript and assets), and `serverEntry` (the name of the entrypoint server module). Here are the defaults: | ||
|
||
```js | ||
import { defineConfig } from 'astro/config'; | ||
|
||
export default defineConfig({ | ||
output: 'server', | ||
build: { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nice! This makes a lot of sense! |
||
server: './dist/server/', | ||
client: './dist/client/', | ||
serverEntry: 'entry.mjs', | ||
} | ||
}); | ||
``` | ||
|
||
These new configuration options are only supported in SSR mode and are ignored when building to SSG (a static site). | ||
|
||
## Integration hook change | ||
|
||
The integration hook `astro:build:start` includes a param `buildConfig` which includes all of these same options. You can continue to use this param in Astro 1.x, but it is deprecated in favor of the new `build.config` options. All of the built-in adapters have been updated to the new format. If you have an integration that depends on this param we suggest upgrading to do this instead: | ||
|
||
```js | ||
export default function myIntegration() { | ||
return { | ||
name: 'my-integration', | ||
hooks: { | ||
'astro:config:setup': ({ updateConfig }) => { | ||
updateConfig({ | ||
build: { | ||
server: '...' | ||
} | ||
}); | ||
} | ||
} | ||
} | ||
} | ||
``` |
This file was deleted.
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -83,8 +83,17 @@ export interface CLIFlags { | |||||
} | ||||||
|
||||||
export interface BuildConfig { | ||||||
/** | ||||||
* @deprecated Use config.build.client instead. | ||||||
*/ | ||||||
client: URL; | ||||||
/** | ||||||
* @deprecated Use config.build.server instead. | ||||||
*/ | ||||||
server: URL; | ||||||
/** | ||||||
* @deprecated Use config.build.serverEntry instead. | ||||||
*/ | ||||||
serverEntry: string; | ||||||
} | ||||||
|
||||||
|
@@ -388,6 +397,7 @@ export interface AstroUserConfig { | |||||
* @name outDir | ||||||
* @type {string} | ||||||
* @default `"./dist"` | ||||||
* @see build.server | ||||||
* @description Set the directory that `astro build` writes your final build to. | ||||||
* | ||||||
* The value can be either an absolute file system path or a path relative to the project root. | ||||||
|
@@ -533,6 +543,68 @@ export interface AstroUserConfig { | |||||
* This means that when you create relative URLs using `new URL('./relative', Astro.url)`, you will get consistent behavior between dev and build. | ||||||
*/ | ||||||
format?: 'file' | 'directory'; | ||||||
/** | ||||||
* @docs | ||||||
* @name build.client | ||||||
* @type {string} | ||||||
* @default `'./dist/client'` | ||||||
* @description | ||||||
* Controls the output directory of your client-side CSS and JavaScript when `output: 'server'` only. | ||||||
* `outDir` controls where the code is built to. | ||||||
* | ||||||
* This value is relative to the `outDir`. | ||||||
* | ||||||
* ```js | ||||||
* { | ||||||
* output: 'server', | ||||||
* build: { | ||||||
* client: './client' | ||||||
* } | ||||||
* } | ||||||
* ``` | ||||||
*/ | ||||||
client?: string; | ||||||
/** | ||||||
* @docs | ||||||
* @name build.server | ||||||
* @type {string} | ||||||
* @default `'./dist/server'` | ||||||
* @description | ||||||
* Controls the output directory of server JavaScript when building to SSR. | ||||||
* | ||||||
* This value is relative to the `outDir`. | ||||||
* | ||||||
* ```js | ||||||
* { | ||||||
* build: { | ||||||
* server: './server' | ||||||
* } | ||||||
* } | ||||||
* ``` | ||||||
*/ | ||||||
server?: string; | ||||||
/** | ||||||
* @docs | ||||||
* @name build.serverEntry | ||||||
* @type {string} | ||||||
* @default `'entry.mjs'` | ||||||
* @description | ||||||
* Specifies the file name of the server entrypoint when building to SSR. | ||||||
* This entrypoint is usually dependent on which host you are deploying to and | ||||||
* will be set by your adapter for you. | ||||||
* | ||||||
* Note that it is recommended that this file ends with `.mjs` so that the runtime | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
Just checking this is intentional, because I think I've only ever heard "runtime" as an adjective "runtime environment, runtime system, runtime library". If this is a noun, then it's fine! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've definitely heard it used as a noun. In fact, nodejs.org's |
||||||
* detects that the file is a JavaScript module. | ||||||
* | ||||||
* ```js | ||||||
* { | ||||||
* build: { | ||||||
* serverEntry: 'main.mjs' | ||||||
* } | ||||||
* } | ||||||
* ``` | ||||||
*/ | ||||||
serverEntry?: string; | ||||||
}; | ||||||
|
||||||
/** | ||||||
|
@@ -1082,6 +1154,7 @@ export type Props = Record<string, unknown>; | |||||
export interface AstroAdapter { | ||||||
name: string; | ||||||
serverEntrypoint?: string; | ||||||
previewEntrypoint?: string; | ||||||
exports?: string[]; | ||||||
args?: any; | ||||||
} | ||||||
|
@@ -1142,7 +1215,7 @@ export interface AstroIntegration { | |||||
hooks: { | ||||||
'astro:config:setup'?: (options: { | ||||||
config: AstroConfig; | ||||||
command: 'dev' | 'build'; | ||||||
command: 'dev' | 'build' | 'preview'; | ||||||
isRestart: boolean; | ||||||
updateConfig: (newConfig: Record<string, any>) => void; | ||||||
addRenderer: (renderer: AstroRenderer) => void; | ||||||
|
@@ -1240,3 +1313,25 @@ export interface SSRResult { | |||||
} | ||||||
|
||||||
export type MarkdownAstroData = { frontmatter: object }; | ||||||
|
||||||
/* Preview server stuff */ | ||||||
export interface PreviewServer { | ||||||
host?: string; | ||||||
port: number; | ||||||
closed(): Promise<void>; | ||||||
stop(): Promise<void>; | ||||||
} | ||||||
|
||||||
export interface PreviewServerParams { | ||||||
outDir: URL; | ||||||
client: URL; | ||||||
serverEntrypoint: URL; | ||||||
host: string | undefined; | ||||||
port: number; | ||||||
} | ||||||
|
||||||
export type CreatePreviewServer = (params: PreviewServerParams) => PreviewServer | Promise<PreviewServer>; | ||||||
|
||||||
export interface PreviewModule { | ||||||
default: CreatePreviewServer; | ||||||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thinking more about this, if you default to
middleware
and make this option required, do you still need the major version?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It wouldn't be required if it had a default, no?
We could default to
middleware
. My thought was that these two modes are pretty significantly different and it didn't feel right to "prefer" one over the other. Kind of like Vercel serverless vs edge, just completely different things.As far as semver, given that this is an integration I didn't think it mattered as much to do a semver major change.
But I don't feel too strongly on either of these things.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yea, agreed that because its an integration this doesn't matter as much / I'm okay with the plan for a major. And I agree it makes more sense as required, or as defaulting to standalone. Defaulting to
middleware
is probably the least natural of the 3...There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ok, I think we should do a major in that case and require the option. We can track usage in the future and if
standalone
is overwhelming (and once it becomes more stable) we can make it the default if we want to.