Use Community Cloud to develop with GitHub Codespaces

To use GitHub codespaces for Streamlit development, a properly configured devcontainer.json file is needed to set up the environment. Fortunately, Community Cloud is here to help! Although Streamlit Community Cloud is primarily used to deploy and share apps with the rest of the world, we’ve build in some handy features to make it easy to use GitHub Codespaces. This guide explains how to create a Community Cloud account and use an automated workflow to get you into a GitHub codespace and live-editing a Streamlit app. The automated workflow will fork our Streamlit Hello app to your GitHub account, deploy it, then open up a codespace for you to start editing. All this happens right in your browser, no installation required.

You will be signing in to your Google and GitHub accounts during this process. If you do not already have these accounts, you can create them before you begin. If you do not want to use a Google account, you can create your account with any email.

Sign up for Streamlit Community Cloud

1. Go to share.streamlit.io/signup.
2. Click “Continue with Google”.

<div style=>

</div>

1. Enter your Google credentials and follow Google’s authentication prompts.
2. After authenticating with Google, click “Connect GitHub account”.

<div style=>

</div>

1. Enter your GitHub credentials and follow GitHub’s authentication prompts.
2. Click “Authorize streamlit”.

<div style=>

</div>

1. To finish, fill in your information and click “Continue” at the bottom of the screen.

<div style=>

</div>

1. You will be taken to your Streamlit workspace. If you see a warning icon (<i style= className=>warning</i>) next to “Settings” in the upper-right corner, this will be addressed in the next steps.

<div style=>

</div>

Create a new app with GitHub Codespaces

1. Click the down arrow (<i style= className=>expand_more</i>) to expand the options under “New App”.

<div style=>

</div>

1. Click “Create new app with GitHub Codespaces”.

<div style=>

</div>

1. You will be prompted that “Streamlit is requesting additional permissions”. Click “Authorize streamlit”.

<div style=>

</div>

1. The Streamlit Hello repository will be forked to your GitHub account. Fill in a repository name and click “Create!”

<div style=>

</div>

1. Click “Create new codespace” to confirm the creation of a codespace on your GitHub account. Read more about GitHub Codespaces the learn about monthly limits for free use and paid plans.

<div style=>

</div>

1. Wait for GitHub to set up your codespace.

<div style=>

</div>

1. GitHub will automatically execute the commands to launch your Streamlit app within your codespace. Your app will be visible in a “Simple Browser” on the right. This may take a minute to complete from when your codespace first appears on screen.

<div style=>

</div>

Edit your app in GitHub Codespaces

1. Go to the app’s main file (Hello.py) and add some text to the title in st.write(). Try typing “:balloon:” at the beginning.

<div style=>

</div>

1. Files are automatically saved in your codespace with each edit. Click “Always rerun” in the upper-right corner of your app to automatically rerun with each edit.

<div style=>

</div>

1. See your edits and keep going!

<div style=>

</div>

Stop or delete your codespace

When you are done, remember to stop your codespace on GitHub to avoid any undesired use of your capacity.

1. Go to github.com/codespaces. At the bottom of the page, all your codespaces are listed. Click the overflow menu icon (<i style= className=>more_horiz</i>) for your codespace.

<div style=>

</div>

1. Click “Stop codespace” if you’d like to return to your work later. Otherwise, click “Delete.”

   <div style=> </div> <div style=> </div>

2. Congratulations! You just deployed an app to Streamlit Community Cloud. 🎉 Head back to your workspace at share.streamlit.io/ and deploy another Streamlit app.

<div style=>

</div>