|
| 1 | +# Building and deploying on Replit |
1 | 2 |
|
| 3 | +<div align="center"> |
| 4 | + <img src="https://github.com/user-attachments/assets/c838618a-992c-4d9a-84ae-cbb9b7d37a4e" width="15%"/> |
| 5 | +</div> |
| 6 | + |
| 7 | + |
| 8 | +Replit is a cloud-based development and deployment platform that allows you to build and deploy in a single, integrated environment. |
| 9 | +It comes with handy tools, like [secrets management](https://docs.replit.com/programming-ide/storing-sensitive-information-environment-variables) and [AI assisted coding](https://docs.replit.com/programming-ide/ai-code-completion), and supports _any_ language you can think of. Replit also has cloud services like [object storage](https://docs.replit.com/storage/replit-database), [embedded Postgres](https://docs.replit.com/hosting/databases/postgresql-database), and [key-value databases](https://docs.replit.com/hosting/databases/replit-database) that make it easy to build and ship apps. For a 1-minute overview of Replit, see [this video](https://www.youtube.com/watch?v=TiHq41h3nDo). |
| 10 | + |
| 11 | +<div align="center"> |
| 12 | + <img src="https://github.com/user-attachments/assets/dd50c381-4319-4960-87da-b5b5566b49c3" width="75%"/> |
| 13 | +</div> |
| 14 | + |
| 15 | +## Setup |
| 16 | + |
| 17 | +To get started on Replit, follow these easy steps: |
| 18 | + |
| 19 | +1. Create a Replit [account](https://replit.com/), |
| 20 | +2. Fork this Replit [template](https://replit.com/@matt/Streamlit?v=1#README.md), which contains the same code in this folder. |
| 21 | +3. To run the app click `Run` in the nav bar. |
| 22 | + |
| 23 | +A web view pane will open up with your application. Simply edit the code in the editor to see changes in real time. |
| 24 | + |
| 25 | +**An important note:** because Replit is a cloud-based editor, the [development URL](https://docs.replit.com/additional-resources/add-a-made-with-replit-badge-to-your-webview#what-is-the-webview) is accessible from any device (while your Repl is running). That means you can test your app out on desktop and mobile simultaneously. |
| 26 | + |
| 27 | +<div align="center"> |
| 28 | + <img src="https://github.com/user-attachments/assets/85141ad6-aec9-4d75-ab2a-47cb25a4ca22" width="75%"/> |
| 29 | +</div> |
| 30 | + |
| 31 | +## Deployment |
| 32 | + |
| 33 | +Deployment on Replit is straightforward and can be done in a few steps: |
| 34 | + |
| 35 | +1. Click `Deploy` in the top navigation bar of your Repl. |
| 36 | +2. Choose a deployment type: |
| 37 | + - For frontend apps, select "Autoscale" deployments. These are cost-effective and automatically scale based on traffic. |
| 38 | + - For services requiring continuous execution (e.g., backends, APIs, bots), choose "Reserved VM" deployments. |
| 39 | +3. Select a custom subdomain for your app or use the auto-generated one. |
| 40 | +4. Configure your deployment settings, including environment variables if needed. |
| 41 | +5. Review and confirm your deployment configuration. |
| 42 | + |
| 43 | +Important notes: |
| 44 | +- You'll need to add a payment method to deploy your app. |
| 45 | +- Additional options can be configured in the `.replit` file present in your project, note that you may have to reveal hidden files if you can't see it. For more information on configuring the `.replit` file, refer to the [docs](https://docs.replit.com/programming-ide/configuring-repl). |
| 46 | +- For detailed instructions and advanced configuration options, refer to the [official Replit deployment documentation](https://docs.replit.com/hosting/deployments/about-deployments). |
| 47 | + |
| 48 | +### Custom Domains |
| 49 | + |
| 50 | +Replit automatically assigns your website a unique domain name such as `your-app-name-your-username.replit.app`. However, if you want to use your own domain that you've purchased through services like [CloudFlare](https://www.cloudflare.com/) or [Name-cheap](https://www.namecheap.com/), you can configure it in your Replit deployment settings. Here's how: |
| 51 | + |
| 52 | +1. Go to your Repl's "Deployment" tab. |
| 53 | +2. Click on "Configure custom domain". |
| 54 | +3. Enter your custom domain name and follow the instructions to set up DNS records with your domain provider. |
| 55 | + |
| 56 | +Make sure to notice the difference between setting up a root domain and a subdomain. Root domains don't have any prefixes before the main site name (e.g., `example.com`), while subdomains do (e.g., `subdomain.example.com`). The setup process might differ slightly for each. Always refer to your domain registrar's documentation for specific instructions on how to set up DNS records for your custom domain. |
| 57 | + |
| 58 | +For more detailed information on setting up custom domains in Replit, you can refer to their official documentation [here](https://docs.replit.com/hosting/deployments/custom-domains). |
0 commit comments