The MDN sample server

While MDN provides a built-in live sample system for presenting simple (and even not-so-simple) code samples with the code's output displayed in-context, there are samples that require a server to talk to. For those things, we have the MDN sample server, which solves these and other problems. This article is a guide to the use of the sample server.

Possible use cases

Most samples can be presented using our built-in live sample system, but there are exceptions. Here are some reasons an example might need to make use of the sample server:

  • A sample requiring persistently running code on the server, such as a WebSocket server may have the server component and possibly also the client side component on the sample server.
  • A sample using technologies that don't work in the context of the MDN wiki or could interfere with readers' ability to focus on the content would be an obvious candidate; this might include samples that play sound effects or media or have significant amounts of animation.
  • A sample which needs to access resources that cannot be hosted on MDN can be placed on the sample server.

Referencing samples

Each sample's code is maintained on GitHub, and we have a server instance which provides access to executable/usable installations of all of the samples.

Contributing advanced samples

To contribute to the samples located on the sample server, you need to fork the mdn/dom-examples repository on GitHub. Most of the samples are currently kept in the same repository on GitHub.

Each API has its own directory, e.g. canvas. To create a new sample, add an appropriately named directory under the API's directory there. For example, if your example shows how to use 'drop a file to upload feature', then you might put your sample in drag-and-drop directory.

Submitting your sample

Once you've finished and tested your sample, you will want to submit it so that it can be tested and eventually published on the production sample server. This is done using the standard GitHub pull request(PR) process. Submit your pull request here.