Docs
Studio Setup

Studio Setup

Learn how to set up a studio for Fume.

Studios are isolated development environaments that Fume can re-use accross multiple tasks. For Fume to be able to access your codebase and/or run it, you have to set it up as if you are setting up a computer for a new-hire engineer. For a studio that is ready hover over its card in the 'Studios' page and you will see the 'edit' tag appear. Just click on the card to go to teh studio editor.

💡 If you want Fume to only do browser testing on your already existing preview environment, you can skip this step and see Preview URLs.


In the studio editor, you will see 4 things:

  1. A file explorer showing the contents of the Documents/ directory.
  2. An command line terminal. (You should switch it to 'Your Terminal' to be able to run commands.)
  3. A computer GUI in which you can use Chrome (you should switch it to the 'Interactive' mode)
  4. A code editor

First thing oyu have to do is cloning your repository into this studio. It's critical that you clone it in the Documents/ directory for Fume to be able to access it. If you have created this studio via the Github integration, you can skip this step. You can use your preferred method authetication (an authenticaiton token or logging in in a brwoser) to clone the repository. This machine is deticated to you only.

Only cloning the repository is enoigh if you want Fume to only do stylistic review. However, if you also want Fume to be able to test it, you must go through the usual local development setup which usually includes installing the dependencies and/or setting environment variables.

Once complete, you can move on by customizing the .fumeconfig. Start by locating the .fumeconfig file in the root of the file explorer and clicking on it. This will open the file in the code editor. .fumeconfig is a special file that you can use to customize Fume or teach information about your codebase.

Here is more information about the .fumeconfig file: Customizing Fume. However if you want Fume to be able to test your code, you will need to fill out the App Start section.

In here you can write multiple lines of commands to run when Fume wants to start your application. This can be killing any leftover processes (to be safe), running the app itelf, etc.

Also, if your app needs multiple processes to be running (i.e. a server and a frontend app), you can add another process using the Add Process button.

Once you are done do not forget to save the file using the Save button in the bottom right corner of the code editor.

Now, you are ready to save the studio! Click on the Save Studio button in the bottom of the file explorer.

You will be redirected to the studios list and the status of your studio will be INDEXING. This might take up to an hour depending on the size of your codebase. Once it is done, you will be able to use your studio. You can close the browser tab and come back to it later.

Once the status shows READY once again, navigate to the 'Integrations' tab from the sidebar and click on the 'Github Integration' card. There you must add a mapping between your github repository and the studio you just created.

p.s. Also install the Github app if you haven't already.

Congratulations🎉 You have now setup a studio for Fume.