Docs / Pages and packages

A page with a server JSpark+

In JSpark+, a page can bring its own Node server, which the page reaches with fetch.

On this page

Start from a + Server Starter
The server Part
Browser and Server output
When the server stops

The server is Node code in the same Snippet as the page. The page calls it with a path such as fetch("/api/notes"), with no port or CORS to set up. In JSpark, a page with a server runs without it, and says that a page with its own server needs JSpark+. Its server Part still opens and edits.

Start from a + Server Starter

Click + at the end of the tabs, or look at the Home screen.
Pick Web Page + Server, or React + Server for a React app.
Press ⌘↵ or Ctrl+Enter. The server starts, and the page loads beside the code.

Web Page + ServerJSpark+A fullstack starter: a web page and its own Node.js server. The page calls the server with fetch("/api/…"), and each side has its own console.React + ServerJSpark+Fullstack React: a React app and its own Node.js server. Components call the server with fetch("/api/…"), and each side has its own console.

The two Starters with a server. In JSpark, both wear the JSpark+ mark.

A page with a server waits for you to press Run: Run as you type never starts a server, because a server reaches outside JSpark.

The server Part

The Part strip gets one more tab, Server, after the page’s own. It is real Node, in the Snippet’s Language, with your own access to your files and network.

// The page's code. It calls its server with a path on its own origin. Keep the

HTMLCSSTSServer

1⌄import http from "node:http"

2⌄

3⌄// The page's server: real Node, started by ⌘↵ beside the page.

4⌄// The app picks the port. The page reaches this server on its own origin,

5⌄// so fetch("/api/notes") needs no port and no CORS. Every path the app

6⌄// doesn't serve itself comes here, except /harness.js, /pkg/… and /r<n>/….

7⌄const notes = ["Buy milk", "Open the Server tab"]

8⌄

9⌄const server = http.createServer(async (request, response) => {

10⌄ console.log(request.method, request.url)

11⌄ const send = (status, body) => {

12⌄ response.writeHead(status, { "content-type": "application/json" })

13⌄ response.end(JSON.stringify(body))

14⌄ }

15⌄

16⌄ if (request.url === "/api/notes" && request.method === "GET") {

17⌄ return send(200, notes)

18⌄ }

19⌄ if (request.url === "/api/notes" && request.method === "POST") {

20⌄ let body = ""

21⌄ for await (const chunk of request) body += chunk

22⌄ let text

23⌄ try {

24⌄ ;({ text } = JSON.parse(body || "{}"))

25⌄ } catch {

26⌄ return send(400, { error: "Send valid JSON" })

27⌄ }

28⌄ if (!text) return send(400, { error: "A note needs some text" })

29⌄ notes.push(text)

30⌄ return send(201, notes)

31⌄ }

32⌄ send(404, { error: `Nothing at ${request.url}` })

33⌄})

34⌄

35⌄// The app gives this server its port. Pasted into a Node.js snippet, it

36⌄// falls back to 3000, as Node servers usually do. On this machine only: the

37⌄// page reaches it through the app, and nothing else on your network needs to.

38⌄const port = Number(process.env.PORT) || 3000

39⌄server.listen(port, "127.0.0.1", () => {

40⌄ console.log(`listening on ${port}; the page calls me on /api`)

41⌄})

Run it to see the page

BrowserServer

loaded the notes from the server

added Pizza on Friday

Ready·Runs on demand

Run starts the server and the page. The note added on the page goes to the server with POST.

The server gets its port as process.env.PORT. Listen on it, as the demo does:server.listen(port, "127.0.0.1").
The page calls the server on its own origin: JSpark passes every path it doesn’t serve itself to the server. Start the path with /: "/api/notes", not "api/notes".
JSpark keeps three paths for itself: /harness.js, /pkg/… and /r<n>/….
A request waits up to five seconds for the server to start listening.
With no server running, a request gets a 502 answer: This page’s server isn’t running. Press ⌘↵ to start it; it stops when another Node.js snippet runs.

Press ⌘↵ or Ctrl+Enter to restart both. The page and the server start over together. After you change the server Part, the page waits, marked stale, until you press it.

Browser and Server output

The console has two tabs: Browser, for what the page prints, and Server, for what the server prints. A dot on the tab you are not looking at means it has new output; a red dot means an error.

BrowserServer

listening on 54017; the page calls me on /api

GET /api/notes

POST /api/notes

The Server tab: the server’s own lines, one for each request the page made.

When the server stops

JSpark runs one Node Run at a time. Running another Node Snippet stops the server, and its console says Server stopped because another Node.js snippet ran. Press ⌘↵ to restart it. Coming back to the tab doesn’t restart it.
Press Stop (⌘. or Ctrl+.) to end the server yourself.
The server ends when JSpark quits.
The Timeline isn’t offered: a server waits for requests and has no end to replay. Peeks in the server Part show no values.

A page with a server JSpark+

Start from a + Server Starter

The server Part

Browser and Server output

When the server stops

Related