Creating your first app

If you're reading this, you probably just set up your Supertools instance that's greeting you with a clean, blank canvas – full of opportunities:

1. Create your app on Supertools

On the left-hand sidebar, enter "Hello world" into the input that says "App name" and then click "Create":

By default, Supertools sets up new apps as simple form applications that you can then easily change.

The default form application is just an input and a button. You can input your name and the app will say hello to you.

In order to make a change to this app, grab the app's git URL from the right-hand sidebar.

You will see a warning that you must add an SSH key to Supertools:

2. Generate an SSH key

Generating SSH keys is pretty straight-forward. If you already have an SSH key that you would like to use with Supertools, you can skip this section.

If you don't have an SSH key yet, please follow this excellent guide by GitHub and then come back here.

3. Add your SSH key to Supertools

To add your SSH key, follow the link in the sidebar or, alternatively, go to "Settings" and then "SSH keys".

In the form, paste your public key and give it a name so you can remember which one it is.

Now that your SSH key has been added to Supertools, you can clone and push to any repository you have access to.

4. Clone your app

Back to the right-hand sidebar of your app, grab the git URL of your application and copy it.

In your terminal, clone the repository by typing:

$ git clone <repo-url>
$ cd hello-world

Now open the app in your favorite text editor.

5. Make changes

Tip: We won't be needing it for this little walkt-hrough, but: if you install your app's dependencies with yarn or npm install and you then run yarn dev (npm run dev), you can work on your application locally before pushing your changes back to Supertools.

Let's introduce a change to the app for demonstration purposes. We're going to make the background of the page yello.

Inside src/views/index.pug find the following line:

    body

Replace it with:

    body(style="background: lightyellow;")

Save the file and push your changes:

$ git add .
$ git commit -m 'Make background yellow'
$ git push origin master

Now, head back to Supertools and refresh the page to verify that your changes are live:

Next, we will add some team mates to your app.