Developers

Studio

Studio is where you build and test before you submit. Open it from Studio in the portal menu.

#Projects

  • Press New project and give it a name. Start from the starter app, import an archive, import a folder, or start empty.
  • You can have 5 projects. Each can hold 500 files and 20 MB, and all of your projects together can use 60 MB.
  • Click a project to open it. Delete it with the bin button on the Studio page. Deleting a project does not touch apps you already submitted.

#Importing code

  • Use Import in the top bar: Archive (.zip, .tar.gz or .tar), Folder, or Files. You can also drag files or a .zip onto Studio.
  • If everything sits inside one top folder, Studio drops that folder so your index.html ends up at the top.
  • node_modules, .git, __MACOSX and .DS_Store are skipped. Single files can be up to 5 MB.
  • Importing a file with the same path replaces the old one.

#Files and the editor

  • The Files list on the left shows every file and folder. Click a file to open it in a tab. Hover a row to rename, move or delete it.
  • A dot on a tab or file means it has changes that are not saved yet.
  • New file makes a file. Put a / in the name to make it inside a folder, like js/app.js.
  • Pictures open as a preview. Other files that are not text can not be edited in Studio.
  • Tab indents, Shift Tab un-indents, and Enter keeps the indent of the line above.
  • Look picks the editor theme and text size. It is saved to your account, so it follows you to another computer.
  • Studio checks your code while you type and marks errors in the margin and in the Problems list.
⌘/Ctrl S Save the open file ⌘/Ctrl R Run ⌘/Ctrl . Stop ↑ ↓ Terminal history Tab Complete a command or file name Ctrl L Clear the terminal

#The terminal

Type a command under Terminal and press Enter. Your app's console.log, warnings and errors show up here too, with the file and line.

CommandWhat it does
runSaves every file, builds, installs the app on the test phone if needed and opens it
stopCloses the app on the test phone
reloadSaves and reloads the running app
installPuts the app on the test phone without opening it
uninstallTakes the app off the test phone
homeGoes to the test phone home screen
theme dark | lightSwitches the test phone between dark and light
ls [folder]Lists files and folders
treeLists every file with its size
cat <file>Prints a file
open <file>Opens a file in the editor
touch <file>Makes an empty file
mv <from> <to>Renames or moves a file or a whole folder
rm <path>Deletes a file or a whole folder, without asking
saveSaves every open file
packageZips the project and attaches it to your next submission
checkLooks for errors in the open files
iconOpens the icon maker
lookChanges the editor theme
clearClears the terminal
helpLists the commands
No npm needed. npm, node and similar commands are not needed. Studio runs your app as a web page, so typing them runs the app instead.

#The test phone

  • The test phone on the right is a simulated UplinkOS phone with the real home screen.
  • Press Run (the play button) or type run. The first time, the app installs with a progress ring, then it opens. Test builds have an orange dot before their name.
  • The app stays on the test phone the next time you open the project. Remove from phone takes it off.
  • Home, Reload and Theme sit under the phone. The phone's side button also goes home.
  • Calculator runs on the test phone. The other built-in apps need a live Uplink server, so they only show a notice.
  • Your app runs in the same kind of locked-down frame as on the real phone, so what works here works there.
  • A test link lasts 2 hours. If you see This test build has expired, press Run again.

#Packaging for review

  • Press Package in the top bar, or type package. Studio zips the whole project.
  • The zip is attached to your next submission. Studio offers to open Submit an app for you.
  • You still host the finished app on your own https address. The package is the code the reviewer checks.

#Making an icon

Type icon to open the icon maker. When you save, Studio adds icon.png to the project and sets it in uplink.json, so the test phone shows it right away.