Connecting front-end with back-end

Replit Help
1

I’m a beginner programmer. Trying to create an chatbot with my own front-end design (JS) and then train GPT4 on my own data on the backend (Python).

How do I best join the front and back-end on Replit? Right now they are two different REPLs…

2 Likes
2

I’d recommend just copying your HTML, CSS, and JS files into your Python Repl.

1 Like
3

I would copy the html js and css files into your backend repl like this:

  • project folder
    • static
      • main.js
      • picture.png
      • styles.css
      • basically any file that isnt html
    • templates
      • index.html
    • main.py

There are also other ways to structure your files but I like this one as it is simple and makes it easy to handle the files.

4

If they are using flask, it should be static instead of public, and templates instead of views. (They said backend python)

1 Like
5

Good catch :+1: It’s fixed now.

6

Thanks! One problem with this approach is that it does not allow for a “webview” under the Tools setting so that I can see the front-end design. Do you all know a workaround for that?

Or do I need to move it all over AFTER I am done with my front end design on a separate repl?

7

Running a python flask repl that serves an html file should automatically make the webview come up.

1 Like
8

It should make the webview pop up. Make sure you used the flask template or are running on 0.0.0.0.

1 Like