Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Online code editor geared to people teaching and learning HTML, CSS, and JavaScript.
JavaScript CSS HTML
Failed to load latest commit information.
default Fix #541 - create default empty project
frontend/src Fix #581 - Added server linting options
lib Fix #1011 - Catch JSON.parse errors without throwing and crashing the…
locale/en_US s/webmaker/Webmaker, s/css/CSS.
migrations Fix Bug 912992 - Add makeid to thimble project. Add migration scripts
public Fix #1031: warn users of failed filesystem operations in private brow…
routes Fix #1011 - Catch JSON.parse errors without throwing and crashing the…
screenshots Fix #741 - update README
tests/lib rebasing
views Fix #1031: warn users of failed filesystem operations in private brow…
.gitignore Add requirejs build step to bundle everything in dist/main.js
.jshintrc Fix #581 - Added server linting options
.travis.yml Fix grunt install location for Heroku (r=sedge)
Gruntfile.js Review fixes
Procfile heroku env var
README.md Update README.md
app.js Fast-follow to fix app.js crash on startup
bower.json Fix #645 - Don't use CDNs, improve requirejs config/loading
constants.js Make default project name configurable only by the server
env.dist Changed the Keep Calm teaching kit link since I had to republish it a…
package.json 2.0.0
robots.txt bug1007695 - disallow /data from crawlers

README.md

Thimble

Thimble is Mozilla's online code editor that makes it easy to create and publish your own web pages while learning HTML, CSS & JavaScript. You can try it online by visiting https://thimble.mozilla.org (or https://bramble.mofostaging.net for our staging server).

Thimble

You can read more about some of Thimble's main features in the wiki

Thimble uses a modified version of the amazing Brackets code editor updated to run within web browsers.

Thimble requires a modern web browser, and we recommend using Mozilla Firefox or Google Chrome.

Setup

Thimble is non-trivial to run locally, due to its dependence on a number of other services. In order to run Thimble, the following things are required. The following is an abbreviated guide to getting it all set up. Please see each server's README for more details.

You'll need

  • Bramble
  • Thimble
  • Webmaker ID server
  • Webmaker Login Server
  • PostgreSQL Database
  • Webmaker Publishing Server

Installing the Parts

Bramble

Thimble

id.webmaker.org

login.webmaker.org

PostgreSQL

  • Install Postgres via Homebrew
    • Get Homebrew - http://brew.sh/
    • Run brew install postgresql to install PostgreSQL once Homebrew is installed
  • Run initdb -D /usr/local/var/postgres to initialize PostreSQL
    • If this already exists, run rm -rf /usr/local/var/postgres to remove it
  • Run postgres -D /usr/local/var/postgres to start the PostgreSQL server
  • Run createdb publish to create the Publish database

publish.webmaker.org

  • These steps assume you've followed the PostgreSQL steps above, including creating the publish database.
  • Clone https://github.com/mozilla/publish.webmaker.org
  • Run npm install to install dependencies
  • Run npm run env
  • Run npm install knex -g to install knex
  • Run npm run knex to seed the publish database created earlier
  • Run npm start to run the server

Getting Ready to Publish

To publish locally, you'll need to do the following...

1. Teach the ID server about the Publish server

  • Run createdb webmaker_oauth_test to create a test database
  • In your id.webmaker.org folder
    • Run node scripts/create-tables.js
    • Edit scripts/test-data.sql and replace it's contents with http://pastebin.com/DUXMjjwF
    • Run node scripts/test-data.js
      • You'll see a INSERT 0 1 message if successful

2. Set up the local data folder

Instead of publishing to Amazon AWS, we'll be publishing to a local folder. Perform the following steps to set this up.

  • Run npm install -g http-server && mkdir -p /tmp/mox/test && cd /tmp/mox/test && http-server -p 8001
  • Run cd /tmp/mox/test && http-server -p 8001 to start the server
  • In your publish.webmaker.org folder
    • Open the .env file
    • Make sure that PUBLIC_PROJECT_ENDPOINT="localhost:8001"` is set as shown here
    • Restart publish server

3. Sign In

To publish locally, you'll need an account.

  • Go to http://localhost:3000/account
  • Click Join Webmaker and complete the process, you can use a fake email
  • When you've created your account, click Set permanent password instead
    • This lets you authenticate your account without needing email
  • Go back to Thimble and Log In with your new account

Running the parts

This is the list of commands to get each part up and running.

  • Thimble npm start
  • Bramble npm start
  • PostgreSQL Database postgres -D /usr/local/var/postgres
  • Webmaker ID server npm start
  • Webmaker Login Server npm start
  • Webmaker Publishing Server npm start
  • Local publish folder cd /tmp/mox/test && http-server -p 8001

Development additionals

We handle JS, HTML and CSS linting through grunt, which is very simple to set up if you don't have it installed already:

npm install -g grunt-cli

After this, simpy run grunt before commiting code and you should be good to go.

Building the front-end

Run grunt requirejs:dist to regenerate the front-end dist/ folder if you so desire (it's only necessary in production). See Gruntfile.js for details.

NOTE: Our front-end is in transition from an older architecture using Requirejs to a new one using our build system. Check in our IRC channel (irc.mozilla.org#thimble) for the latest state of development.

Something went wrong with that request. Please try again.