Last week, I received a question via email asking about the best way to host Extwee-based projects on Replit.com. It was somewhat of a strange question, I thought at first. Twee is a plain-text language. Hosting the source files do not add much to a public project. Even with Extwee, which can compile Twee into HTML, hosting such a project would not make much sense unless there was a way to connect the “Run” button for Replit.com-hosted projects up to both Extwee and some web server software. After investigating some possibilities, I settled on a solution that not only answered the question, but could help others host their own Twee– and Twine-based projects.

Hosting Twee-based projects on Replit.com

Setting up a Extwee-based project on Replit.com requires understanding two things: how Replit.com understands projects and creating NPM scripts. When a project is “Run”, Repl.com looks for the local .replit file, reading in various settings including the entry point. For Node.js-based projects, the default entry point is the project’s index.js file. This means whatever code is to be run must be in the index.js file.

After some experimenting, I decided to use ShellJS to make things easier for myself. Instead of running code itself, I would have it run two NPM scripts using its exec() method:

index.js

// Require ShellJS
const shelljs = require('shelljs');
// Run the build process
shelljs.exec('npm run build');
// Run the serve process
shelljs.exec('npm run serve');

I then created two directories. The first was src, which would hold a story format’s format.js file and any Twee code. The second was public, a directory to hold any “public” web server files.

Splitting up the two process (compiling Twee and running the web server software), I created two entries in the package.json file:

package.json

{
  "scripts": {
    "build": "extwee -c -s src/format.js -i src/index.twee -o public/index.html",
    "serve": "serve public"
  },
  "dependencies": {
    "extwee": "^2.0.6",
    "serve": "^13.0.2",
    "shelljs": "^0.8.5"
  }
}

The first process, the “build” script, runs Extwee using the compilation process with two input files, the story format and the Twee input from a src directory. It then produces output, index.html in the public folder.

The second process, the “serve” script” runs serve, a small web server library for serving static files. This is given the argument of the public directory with the newly created index.html file from the previous process.

The completed code can be found here. It can be forked and used for other projects. As it is using serve to host the compiled HTML, other media can be easily added to the project by adding files to the public directory as the server root.

Hosting Twine-based projects on Replit.com

Twine produces HTML files. Like with hosting Twee-based projects, this means understanding code will start with the index.js file. Unlike Twee-based projects, there is no compilation step. Twine projects can jump directly to hosting files.

The index.js file is two lines:

index.js

// Require ShellJS
const shelljs = require('shelljs');
// Run the serve process
shelljs.exec('npm run serve');

It then needs a public folder for serve to use. As there is no compilation, the package.json file is simplier:

package.json

{
  "scripts": {
    "serve": "serve public"
  },
  "dependencies": {
    "serve": "^13.0.2",
    "shelljs": "^0.8.5"
  }
}

Once the index.js file, public folder, and package.json file are prepared, the last step is to upload a Twine HTML file. Placing it into the public folder is the first step. The second is to rename the file to index.html. In order for serve to find the file, make sure to rename the HTML file to index.html.

The completed code can be found here. It can be freely forked and used for other projects. For those looking for a quick way to host a Twine HTML file along with other media, this is a good solution. It is not perfect, as anyone can access any media files included in the public-by-default project, but for those wanting to showcase something quickly, Replit.com accounts are free to start and the Node.js support behind the hosting could allow the code to access a server backend, if wanted.

index.js