Publishing to GitHub Pages

You can publish the GUI to github.io so that others on the Internet can view it.

Manually

To manually publish from a local build, first ensure your gh-pages branch is set up to track the fork you intend to publish to.

# Build for github.io
npm run build
# Commit and push the build result to your gh-pages branch
npm run deploy

This should have made and pushed a commit to the gh-pages branch, which should now be visible at https://<your username>.github.io/scratch-gui/

Note that you can optionally publish into a named directory, to make it appear at https://<your username>.github.io/scratch-gui/<branchName>, using this command (using your own choice of branch name):

npm run deploy -- -e branchName

Automatically

You can also use Travis CI to automatically publish build results to github.io whenever you push to your fork.

Note: You will need to ensure your branch has no lint errors for the build to be published automatically

• Generate a Personal Access Token for Travis in GitHub

  • Go to your account settings
  • 
  • Go to Personal Access Tokens under "Developer settings"
  • 
  • Click "Generate new token"
  • 
  • Give it a memorable description like "Deploy scratch-gui to Github Pages"
  • Check off public_repo permissions only
  • 
  • Generate it and copy the token
  • Important: This token represents your GitHub username AND password! Keep it secure!

• Go to https://travis-ci.org and sign in with your Github account

• Enable and configure your fork in Travis

  • Click on your username in the top right
  • Find your fork of scratch-gui and enable it
  • 
  • Click the gear next to the name of your fork in your account settings
    • Available at the URL https://travis-ci.org/<your username>/scratch-gui/settings
    • Also available from the dropdown "More options" -> "Settings"
    • 
  • In the Environment Variables section, add two variables
    • GH_TOKEN
      • Value: <Your personal access token generated above>
      • Leave "Display value in build log" OFF
    • RELEASE_BRANCHES
      • Value: "master develop <any other branch name you would like to build>"
      • You can turn on "Display value in build log" for debugging purposes
    • 

• Push to one of the branches you specified in the RELEASE_BRANCHES variable

• After Travis runs the build, it should deploy to your gh-pages

• Visit https://<your username>.github.io/scratch-gui/ to see the build

Publishing a branch with a custom scratch-* dependency

If you would like to show off a version of the GUI with a custom build of one of the scratch-* packages (usually scratch-vm or scratch-blocks), follow these steps:

• In package.json, update the dependency to point to your custom build (see below). If it is in the devDependencies section, remove it from there and put the one pointing to your custom build in the dependencies section:

  "devDependencies": {
    ...
    "scratch-blocks": "[email protected]",
    "scratch-vm": "[email protected]",
    ...
  }

  becomes

  "dependencies": {
    "scratch-blocks": "github:yourusername/scratch-blocks#your-branch",
    "scratch-vm": "github:yourusername/scratch-vm#your-branch"
  }

• Update the .circleci/.config.yml file to build your git dependencies in the install step. This varies for each repo. Please open an issue in LLK/scratch-gui if you need instructions for a different package:

  jobs:
    setup:
      <<: *defaults
      steps:
        ...
        - run: npm install
        - run: cd node_modules/scratch-blocks && ln -s $(npm root)/google-closure-library ../closure-library --force && npm --production=false install && cd -
        ...

• Push your scratch-gui branch to your own fork using the "automated" method above, or just push to the LLK fork if you have permission to do so in order to see it on llk.github.io.