Online code editor geared to people teaching and learning HTML, CSS, and JavaScript.
JavaScript CSS HTML Shell Ruby SQLPL
Latest commit 6ee1353 Feb 22, 2017 @kramsamujh kramsamujh committed with flukeout Adding local storage project favorites (#1731)
Added ability to favorite projects in the Your Projects page. Favorited projects are stored in localStorage and show up at the top of the page when it's reloaded.
Permalink
Failed to load latest commit information.
default Handle presence of files in the default project (#1736) Feb 13, 2017
locales Pontoon: Update Greek (el) localization of Thimble Feb 14, 2017
public Adding local storage project favorites (#1731) Feb 22, 2017
screenshots Fix #741 - update README Aug 28, 2015
scripts Fix #1729 - Failure to install due to failures in postinstall script (#… Feb 12, 2017
server Fix #1627: Added ability to open a project in a new tab (#1726) Feb 12, 2017
services Merge commit '7ab02a65d71283aebc4cf1c3ddabb619355d4a9d' - update publ… Feb 8, 2017
views Adding local storage project favorites (#1731) Feb 22, 2017
.gitignore gitignore vim files (#1746) Feb 16, 2017
.jshintrc Rewrite and restructure server-side code to be modular Feb 1, 2016
.travis.yml node 4.6.0 Sep 30, 2016
Gruntfile.js Swap bower for npm (#1586) Dec 16, 2016
LICENSE Add LICENSE Feb 18, 2016
Procfile Squashed 'services/login.webmaker.org/' content from commit f761522 Jan 16, 2017
README.md Add Readme information about thimble services as subtrees Feb 9, 2017
Vagrantfile Use pm2 to manage Vagrant servers, add watch/reload for Thimble, sepa… Feb 7, 2017
app.js Review fixes Jul 21, 2016
constants.js Localize the default starter project title Feb 3, 2016
ecosystem.json Use pm2 to manage Vagrant servers, add watch/reload for Thimble, sepa… Feb 7, 2017
env.dist Better error logging (#1521) Aug 5, 2016
package.json Use pm2 to manage Vagrant servers, add watch/reload for Thimble, sepa… Feb 7, 2017
robots.txt bug1007695 - disallow /data from crawlers May 13, 2014

README.md

Thimble

Build Status Shipping fast with zenHub

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, or watch a demo video.

Thimble uses a modified version of the amazing Brackets code editor updated to run within web browsers. You can read more about how it works in this blog post.

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

Setup/Installation

Thimble interacts with the Publish API (source managed in publish.webmaker.org) to store users, projects, files and other content as well as publish user projects.

For authentication and user management, Thimble uses Webmaker OAuth which consists of the Webmaker ID System (source managed in id.webmaker.org) and the Webmaker Login API (source managed in login.webmaker.org).

All three services along with Thimble are bundled together using Git subtrees to be run together using Vagrant, or, they may be run separately with Thimble manually.

Note: The Git subtree bundle mentioned above for use with the automated installation can be found in the /services folder. It contains a subtree for each of the three services. These subtrees are not automatically kept in sync with their corresponding service's parent repositories. If you need to update one of the subtrees to match the history of its parent repository, follow these instructions:

  • Create a separate branch and checkout to it.
  • Run the following to get the history of the service's repository:

    git fetch https://github.com/mozilla/<service's repository name> <branch name>
    

    Replace <service's repository name> with the remote repository name of the service you are trying to update and <branch name> with the name of the branch on that repository you want to update the subtree with.
    For e.g. git fetch https://github.com/mozilla/publish.webmaker.org master.

  • Now to update the subtree, run:

    git subtree pull --prefix services/<service's repository name> https://github.com/mozilla/<service's repository name> <branch name> --squash
    

    Replace <service's repository name> and <branch name> with the same values you used in the previous command.
    For e.g. git subtree pull --prefix services/publish.webmaker.org https://github.com/mozilla/publish.webmaker.org master --squash.

  • Update your remote branch with this new change.
  • Open a pull request to have the subtree update reviewied and merged.

Automated Installation (Preferred Method)

Note: If you aren't able to properly run virtualization software on your machine (for e.g. some versions of Windows only allow one virtualization client to run at a time and if that isn't VirtualBox, you can't run the required VirtualBox as well. This is often a problem if you have docker installed on Windows) or are trying to host Thimble on your own, refer to the Manual Installation instructions instead.

Prerequisites for Automated Installation

In order for Thimble to be installed correctly, the following dependencies need to be installed in order:

  • Node.js (version 4.6 or later) [download]
  • Brackets (Bramble)
  • Virtualbox (version 5.1 or later) [download]
  • Vagrant (version 1.9 or later) [download]
    • Note: On Windows machines, you may need to restart your computer after installing Vagrant for it to be fully usable.

Installing Brackets (Bramble)

  • Fork the Brackets repository and then clone it to your local machine using git clone --recursive https://github.com/<your_username>/brackets.git (replace <your_username> with your Github username for the account you forked Brackets into)
  • In the cloned repository directory, run npm install to install the dependencies for Brackets
  • Run npm run build to create the built editor files that will be used by Thimble
  • Run npm start to start a server that will allow the editor to be accessed on http://localhost:8000/src -- You can find out more information about setting up Brackets locally by referring to the instructions here

Installing Thimble and Services with Vagrant

The first step is to fork and clone Thimble and navigate to the cloned directory in a terminal shell.

For the first time, to start all dependent services and Thimble, simply run:

vagrant up

This process can take a while depending on your internet connection speed as it needs to download all dependencies. The Vagrant VM is set to use 1 virtual CPU and 1.5G of RAM. If you find you need to adjust these resource levels, you can do so in the /Vagrantfile.

When Vagrant finishes provisioning the VM, you will see a log that says Starting Thimble server on http://localhost:3500/ (this may take a minute...). At this point you can access Thimble on http://localhost:3500. NOTE: if it does not work right away, give the server another minute to finish starting.

If you want to manually force the Vagrant Thimble server to restart, use npm run restart-server.

To suspend the VM use vagrant suspend (like putting it to sleep). You can also use vagrant halt to do a full shutdown.

To restart the VM and Thimble again, re-run vagrant up.

To see logs for the services running in Vagrant, use npm run logs.

Manual Installation

You can also setup Thimble and its needed components outside Vagrant and Virtualbox. This might be needed if you want to:

  • Host your own instance of Thimble
  • Cannot run virtualization software on your computer

Prerequisites for Manual Installation

In order for Thimble to be installed correctly, the following dependencies need to be installed:

The following is an abbreviated guide to getting it all set up. Please see each server's README for more details.

Manually Installing the Parts

Please note: On Windows, use copy instead of cp

Thimble

id.webmaker.org

login.webmaker.org

PostgreSQL

  • 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 run knex to seed the publish database created earlier
  • Run npm start to run the server

Once everything is ready and running, Thimble will be available at http://localhost:3500/

Getting Ready to Publish

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

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 its contents with:

        INSERT INTO clients VALUES
          ( 'test',
            'test',
            '["password", "authorization_code"]'::jsonb,
            '["code", "token"]'::jsonb,
            'http://localhost:3500/callback' )
    • Run node scripts/test-data.js

      • You'll see a INSERT 0 1 message if successful

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

It's that simple! You are now ready to start using Thimble to its full potential!

Localization

Please refer to the Wiki for information on the localization procedures used in Thimble.

Our Localization Community

Our localization community is awesome! They work very hard to translate Thimble so that we can expand our global reach and engage even more users in other languages. We can't thank them enough!

Invalidating CloudFront

To invalidate the production CloudFront distribution, make sure you have correct credentials set up in your env file. Then run node invalidate.js. Alternatively, if you have access to the heroku deployments, run the invalidation as a one-off dyno with heroku run npm run invalidate

Concurrency

Thimble uses the throng module to leverage Node's Cluster API for concurrency. To specify the number of server processes to start set WEB_CONCURRENCY to a positive integer value.

Contact Us

We're a friendly group, so feel free to chat with us in the "Thimble" channel on Mozilla Chat running on Mattermost. To access Mozilla Chat head to this link. Note that you will need to create an account first.

You can also download a mobile or desktop client for Mattermost here.