Pwd-sdk NPM | npm.io

Play with docker javascript SDK

This is the client side JS of PWD that allows to run terminals and attach them to your site

Using the SDK

Here's a minimal example of the SDK usage:

<html>
  <head>
    <title>PWD SDK Demo</title>
  </head>
  <body>
    <div id="myTerm" style="width 500px; height: 500px;"></div>
    <link rel="stylesheet" href="./dist/styled.css" />
    <script src="./dist/pwd.js"></script>
    <script>
      pwd = new PWD();
      pwd.newSession([{ selector: "#myTerm" }]);
    </script>
  </body>
</html>

If you are running Play with Docker locally (which saves resources on our production machines) create the new session with an additional option:

pwd.newSession([{selector: '#myTerm'}], {baseUrl: 'http://localhost'});

You can easily test your page with the SDK by running the following from the root directory of this project on Linux or Mac:

docker run --name sdktest -v $PWD:/usr/share/nginx/html:ro -d -it -p 8080:80 nginx

and then browse to localhost:8080.

Using it with Vanilla JS

<html>
  <head>
    <title>PWD SDK</title>
  </head>
  <body>
    <div id="myTerm" style="width: 500px; height: 500px;"></div>
    <link
      rel="stylesheet"
      href="https://unpkg.com/pwd-sdk@{version}/dist/styles.css"
    />
    <script src="https://unpkg.com/pwd-sdk@{version}/dist/pwd.min.js"></script>
    <script>
      pwd = new PWD();
      pwd.newSession([{ selector: "#myTerm" }]);
    </script>
  </body>
</html>

Using it with React

import { useEffect, useState } from "react";
import PWD from "pwd-sdk";
import ReactPWD, { usePWD } from "pwd-sdk/react";
import "pwd-sdk/dist/styles.css";

export default () => {
  const pwd = usePWD(new PWD());

  return (
    <div>
      <div>
        <ReactPWD pwd={pwd} name="1" />
      </div>
      <div>
        <ReactPWD pwd={pwd} name="2" />
      </div>
    </div>
  );
};