Skip to content

Commit fea978f

Browse files
BenFarunaBenFaruna
committed
Added files for flask run on replit #39 
1 parent 073ff5d commit fea978f

File tree

1 file changed

+115
-2
lines changed

1 file changed

+115
-2
lines changed

‎docs/technologies/flask/run-on-replit.mdx‎

Lines changed: 115 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,120 @@ import SubHeading from "@site/src/components/SubHeading";
88

99
<SubHeading color="#25c2a0">Learn how to Start Flask on Replit</SubHeading>
1010

11-
Learn how to Start Flask on Replit using a free sample:
11+
## Introduction to Flask and Replit
12+
Flask is a lightweight and flexible Python web framework that allows developers to easily build web applications. Flask is known for its simplicity and ease of use, making it a popular choice for building web apps of various sizes and complexities. Flask provides many built-in tools and libraries that make it easy to implement common web development features, such as routing, views, templates, and more.
1213

13-
> https://github.com/app-generator/flask-soft-ui-dashboard
14+
Replit is an online integrated development environment (IDE) that allows developers to write, run, and collaborate on code in the cloud. Replit provides an easy-to-use interface that includes a code editor, a terminal, and a file manager, making it easy to create and manage Python projects without the need for local installations. Replit also offers a range of features and tools, such as version control, project sharing, and live coding sessions.
1415

16+
Running Flask on Replit allows developers to build and deploy web applications entirely in the cloud. This eliminates the need for local installations of Python or other dependencies, making it easy to get started with web development quickly and without any setup time. Flask apps can be run on Replit using a built-in server or deployed to a production environment using Replit's hosting capabilities.
17+
18+
By combining Flask and Replit, developers can easily build, test, and deploy web applications entirely in the cloud, without needing to worry about managing local installations or dealing with complex deployment processes.
19+
20+
## Setting up a new Python project in Replit
21+
Sure, here is a breakdown of the second subtopic, "Setting up a new Python project in Replit":
22+
23+
1. Creating a Replit account: To create a new Python project in Replit, you'll first need to create a Replit account if you don't already have one. You can sign up for a free account by visiting the [Replit website](https://replit.com/) and following the on-screen instructions.
24+
25+
2. Creating a new Python project: Once you've signed up for a Replit account, you can create a new Python project by clicking on the "Create repl" button on the Replit homepage. In the "Create repl" window, select "Python" as the language and give your project a name. For this tutorial, I'll be using `flask-project`.
26+
27+
![Creating new replit project](https://github.com/app-generator/dummy/assets/57325382/281fe624-a37a-4e20-b17f-2510aeee38a6)
28+
29+
3. Configuring the project environment: After creating the new Python project, you may want to configure the project environment to your specific needs. For example, you may want to install specific Python packages or configure environment variables. Replit provides a "Packages" tool and a "Secrets" tool that you can use to manage project dependencies and environment variables, respectively in the "Tools" pane on the left-hand sidebar.
30+
31+
4. Setting up Git integration: Replit provides Git integration that allows you to commit changes to your code and push them to a remote repository, such as GitHub. To set up Git integration, navigate to the "Git" tool in the "Tools" pane and follow the on-screen instructions to link your Replit account with your Git provider.
32+
33+
5. Adding code to the project: Once the project environment is configured, you can start writing Python code in the Replit editor. By default, Replit creates a `main.py` file that you can use to start building your Flask app.
34+
35+
With these steps, you can easily set up a new Python project in Replit and start building your Flask app. Replit provides a user-friendly interface that allows you to manage project dependencies, environment variables, and Git integration, making it easy to get started with web development quickly and efficiently. Below is a view of the project page and description.
36+
37+
![Replit project page and description](https://github.com/app-generator/dummy/assets/57325382/9f36ad3f-b2ca-496e-b856-b4f704053c52)
38+
39+
## Installing Flask in a Replit project
40+
There are two ways to install packages on Replit. You can use the "Packages" tool in the "Tools" pane or use Replit built-in terminal (`shell`) also located in the "Tools" pane. To use the "Packages" tool, open the tools pane and click on packages. A new "Packages" tab will be opened on your editor environment, from the tab search for the package you want to install and click on the "Install" button, to install the package. Alternatively, we can use the "Shell" tool (terminal) that is provided by Replit. The "Shell" tool is opened in a separate tab when a new project is started, but if you can find it, just check the "Tools" pane on the left-hand side of your editor.
41+
42+
Replit uses `Poetry` as the package manager, check the [Basic Usage](https://python-poetry.org/docs/basic-usage/) guide to get started. You can see [all commands here](https://python-poetry.org/docs/cli/). By using poetry, you ensure that your project does not have broken dependencies and also gives you the chance to replicate your development environment (package-wise) outside Replit.
43+
44+
To install Flask in a Replit project using the terminal, you'll need to open the Replit Terminal. You can do this by clicking the "Shell" button in the left-hand sidebar of the Replit editor. Once the Replit Terminal is open, you can use the following command to install Flask in your Replit project:
45+
```
46+
$ poetry add flask
47+
```
48+
This command will download and install the latest version of Flask and its dependencies in your project's virtual environment.
49+
50+
* Verifying the installation: After installing Flask, you may want to verify that the installation was successful. You can do this by importing Flask in your Python code and running a simple Flask app. For example, you can add the following code to your `main.py` file:
51+
52+
```py
53+
# main.py
54+
from flask import Flask
55+
56+
app = Flask(__name__)
57+
58+
@app.route('/')
59+
def hello():
60+
return 'Hello, World!'
61+
62+
if __name__ == '__main__':
63+
app.run(host='0.0.0.0')
64+
```
65+
66+
This code defines a simple Flask app that responds with "Hello, World!" when accessed at the root URL. Adding `host='0.0.0.0'` gives you access to Replit "Webview" tool, which you can use to view your project when it is running. You can run the app by clicking the "Run" button in the Replit editor. The "Webview" tool opens automatically, but in the case where it does not, Click on "Webview" in the "Tools" pane.
67+
68+
![Replit with webview and files](https://github.com/app-generator/dummy/assets/57325382/e9b8ccb1-f3a2-4647-ac46-240a9c839c1f)
69+
70+
By following these steps, you can easily install Flask in a Replit project and start building your Flask app. Replit's built-in terminal and package management tools make it easy to install and manage project dependencies, allowing you to focus on developing your app.
71+
72+
## Using Flask templates in Replit
73+
For this tutorial, we will be using [`flask-soft-ui-dashboard`](https://github.com/app-generator/flask-soft-ui-dashboard) created by [`Appseed`](https://appseed.us/). There are several ways to go about using the template, we can fork the repository, and then connect to GitHub from Replit and use the forked repository. For this tutorial, we will be cloning the repository directly and starting it up in Replit.
74+
75+
### Cloning Flask Soft UI dashboard
76+
To clone the repository, open the "Shell" tool, and run the command
77+
```bash
78+
$ git clone https://github.com/app-generator/flask-soft-ui-dashboard.git
79+
```
80+
Once the repository is cloned, check the "Files" pane on the left-hand side, you will see the folder 'flask-soft-ui-dashboard`. Now we have the files for the template on Replit.
81+
82+
### Installing template dependencies on Replit
83+
Inside `flask-soft-ui-dashboard` folder, there is a `requirements.txt` file that contains all the dependencies for the template. We can install them individually using the "Packages" tool or use a command that allows us to install them at once.
84+
**Note**: Poetry does not have support for reading dependencies from requirements.txt files.
85+
86+
To install the dependencies for the template, open the "Shell" tool and run the command
87+
```bash
88+
$ poetry add $(sed 's/#.*//' requirements.txt)
89+
```
90+
Using the `sed` command, we remove all the lines that are comments and send the others as multiple packages to `poetry add` command. Once this is executed completely we can start the Flask application.
91+
92+
### Starting the Flask template
93+
- Before running the Flask template, we will be making some changes to the "run.py" file in the "flask-soft-ui-dashboard" directory.
94+
```py
95+
# flask-soft-ui-dashboard/run.py
96+
...
97+
if __name__ == '__main__':
98+
app.run(host='0.0.0.0') # <-- Updated: host added
99+
```
100+
With `host='0.0.0.0'` we can make use of Replit "Webview" tool.
101+
102+
- To start the Flask application, open the "Shell" tool and run the following command
103+
```bash
104+
$ python flask-soft-ui-dashboard/run.py
105+
```
106+
Once "Webview" is open, we can check the webpage from our browser using the link shown in the address bar of "Webview", it looks like `https://<project-name>.<user-name.repl.co/`. The start button is not used because it searches for "main.py" file in the root directory of the project.
107+
108+
"Flask soft UI dashboard" opens the login page, create an account using the sign up page, then login to the account to see the homepage of the theme. Below is a picture showing the login page, signup page and homepage respectively.
109+
110+
![Flask soft ui dashboard login page](https://github.com/app-generator/dummy/assets/57325382/c9cca7e1-33eb-4a11-9b38-425ad4609c85)
111+
112+
![Flask soft ui dashboard signup page](https://github.com/app-generator/dummy/assets/57325382/187765ba-cdfe-4534-aca1-64709192c1e3)
113+
114+
![Flask soft ui dashboard homepage](https://github.com/app-generator/dummy/assets/57325382/b8d7f3a6-e551-48d4-9606-88754c1cae99)
115+
116+
Now we have a flask application that is using `flask-soft-ui-dashboard`. we can make changes to the files to fit our project needs.
117+
118+
## Conclusion
119+
In this article, we have learned how to start Flask on Replit and use a Flask template. We first created a new Flask project on Replit, and then we cloned a Flask template from GitHub. We made some changes to the template, and then we ran the Flask application. We were able to successfully start the Flask application and view the dashboard.
120+
121+
I hope you found this article helpful! Contact support using the links below if you have any other questions.
122+
123+
## Resources
124+
- 👉 Free [Support](https://appseed.us/support/) via Email & Discord
125+
- 👉 [Custom Development Services](https://appseed.us/custom-development/) provided by experts
126+
- 👉 [Flask Soft UI dashboard ](https://github.com/app-generator/flask-soft-ui-dashboard)
127+
- 👉 [Poetry documentation](https://python-poetry.org/docs/cli/)

0 commit comments

Comments
 (0)