Node.js adapter for self-hosting in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Node.js adapter in an Astro project.

Astro

import node from '[1]';

Drag options to blanks, or click blank then click option'

A@astrojs/vue

B@astrojs/react

C@astrojs/node

D@astrojs/svelte

Attempts:

3 left

💡 Hint

Common Mistakes

Using an adapter for a different framework like React or Vue.

Misspelling the package name.

The Node.js adapter is imported from @astrojs/node to enable self-hosting.

2fill in blank

medium

Complete the code to add the Node.js adapter in the Astro config file.

Astro

export default {
  adapter: [1](),
};

Drag options to blanks, or click blank then click option'

Anode

BreactAdapter

CvueAdapter

DsvelteAdapter

Attempts:

3 left

💡 Hint

Common Mistakes

Using an adapter variable that was not imported.

Forgetting the parentheses after the adapter name.

Use node() to configure the Node.js adapter in the Astro config.

3fill in blank

hard

Fix the error in the server start script to use the Node.js adapter correctly.

Astro

import { startServer } from 'astro/server';
import node from '@astrojs/node';

await startServer({ adapter: [1] });

Drag options to blanks, or click blank then click option'

Anode.adapter

Bnode()

Cnode

Dnode.start

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the adapter variable without parentheses.

Trying to access properties that do not exist on the adapter.

The adapter must be called as a function node() when passed to startServer.

4fill in blank

hard

Fill both blanks to configure the Node.js adapter with a custom port and hostname.

Astro

export default {
  adapter: node({
    port: [1],
    hostname: '[2]'
  }),
};

Drag options to blanks, or click blank then click option'

A3000

Blocalhost

C127.0.0.1

D8080

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string for the port instead of a number.

Mixing up hostname and port values.

Commonly, port 3000 is used and 127.0.0.1 is the hostname for local self-hosting.

5fill in blank

hard

Fill all three blanks to create a minimal Node.js server using the Astro adapter.

Astro

import node from '[1]';
import { startServer } from '[2]';

await startServer({ adapter: [3]() });

Drag options to blanks, or click blank then click option'

A@astrojs/node

Bastro/server

Cnode

Dastro/client

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from the wrong Astro package.

Not calling the adapter as a function.

Import the Node.js adapter from @astrojs/node, the server starter from astro/server, and pass node() as the adapter to startServer.

Practice

1. What is the main purpose of the Node.js adapter in Astro?

easy

A. To convert Astro sites into mobile apps automatically

B. To run Astro sites on your own server using Node.js

C. To deploy Astro sites only on static hosting platforms

D. To generate CSS styles for Astro components

Solution

1. Step 1: Understand the role of the Node.js adapter

   The Node.js adapter allows Astro sites to be run on a Node.js server, enabling self-hosting.

2. Step 2: Compare options with this purpose

   Only To run Astro sites on your own server using Node.js correctly describes running Astro sites on your own server using Node.js.

3. Final Answer:

   To run Astro sites on your own server using Node.js -> Option B

4. Quick Check:

   Node.js adapter = run Astro on own server [OK]

Hint: Node.js adapter = self-host Astro site with Node.js [OK]

Common Mistakes:

• Thinking adapter only deploys static sites
• Confusing adapter with mobile app tools
• Assuming adapter generates CSS

2. Which configuration correctly sets up Astro to use the Node.js adapter for self-hosting?

easy

A. { output: 'static', adapter: static() }

B. { output: 'static', adapter: node() }

C. { output: 'server', adapter: static() }

D. { output: 'server', adapter: node() }

Solution

1. Step 1: Identify required output setting for Node.js adapter

   Node.js adapter requires output: 'server' to enable server-side rendering.

2. Step 2: Match adapter with output

   { output: 'server', adapter: node() } correctly pairs output: 'server' with adapter: node().

3. Final Answer:

   { output: 'server', adapter: node() } -> Option D

4. Quick Check:

   Node.js adapter needs output 'server' [OK]

Hint: Node.js adapter always needs output set to 'server' [OK]

Common Mistakes:

• Using output 'static' with Node.js adapter
• Mixing static adapter with server output
• Forgetting to call node() function

3. Given this Astro config snippet, what happens when you run node ./dist/server/entry.mjs after building?

{
  output: 'server',
  adapter: node()
}

medium

A. The site runs on a Node.js server allowing dynamic requests

B. The site builds static files only, no server runs

C. An error occurs because adapter is missing

D. The site runs but only serves static HTML files

Solution

1. Step 1: Understand build output with Node.js adapter

   With output: 'server' and adapter: node(), Astro builds a server-ready app.

2. Step 2: Running node ./dist/server/entry.mjs starts the Node.js server

   This command launches the server to handle dynamic requests.

3. Final Answer:

   The site runs on a Node.js server allowing dynamic requests -> Option A

4. Quick Check:

   Node.js adapter + output 'server' = dynamic server run [OK]

Hint: Run entry.mjs with Node to start server for dynamic site [OK]

Common Mistakes:

• Assuming static files only are built
• Expecting error without adapter
• Thinking server serves only static HTML

4. You set output: 'server' but forgot to add adapter: node() in your Astro config. What happens when you try to build?

medium

A. Build produces static files ignoring server output

B. Build succeeds but site cannot run on Node.js server

C. Build fails with an error about missing adapter

D. Build succeeds and site runs normally on Node.js

Solution

1. Step 1: Check requirement for server output

   When output: 'server' is set, an adapter like node() is required to handle server build.

2. Step 2: Missing adapter causes build error

   Without adapter: node(), the build process fails with an error indicating the missing adapter.

3. Final Answer:

   Build fails with an error about missing adapter -> Option C

4. Quick Check:

   Server output needs adapter, else build error [OK]

Hint: Server output requires adapter; missing it causes build error [OK]

Common Mistakes:

• Assuming build succeeds without adapter
• Thinking static files are generated instead
• Believing site runs normally without adapter

5. You want to self-host an Astro site with dynamic server rendering and also serve some static assets efficiently. Which setup correctly achieves this using the Node.js adapter?

hard

A. Set output: 'server', use adapter: node(), and place static files in public/ folder

B. Set output: 'static', use adapter: node(), and serve static files from src/

C. Set output: 'server', use adapter: static(), and place static files in public/

D. Set output: 'static', use adapter: static(), and place static files in public/

Solution

1. Step 1: Choose output and adapter for dynamic server rendering

   Dynamic server rendering requires output: 'server' and adapter: node().

2. Step 2: Serve static assets efficiently

   Static files should be placed in the public/ folder to be served directly by the server.

3. Final Answer:

   Set output 'server', adapter node(), and static files in public/ folder -> Option A

4. Quick Check:

   Dynamic server + static assets = output 'server' + node() + public/ [OK]

Hint: Use output 'server' + node() adapter + public/ for static assets [OK]

Common Mistakes:

• Using static output with node adapter
• Placing static files outside public folder
• Mixing static adapter with server output