Developing the frontned to test the backend

I’m developing a complex appointment scheduler webapp, I built a lot of functionalities for the admin control panel, now I want to build the frontend (customer side) how can I do that? because I can’t test /run the control panel page and frontend page at the same time?

Hi,

what do you mean with “cant run at the same time” ?
Do you mean within bolt.diy? Or at all?


fo example, This is the control panel for managing booked appointments, accessible through the StackBlitz local container. However, if I book an appointment from the frontend (customer side) which is totally in a different page (not inside the panel) how can I switchback to the control panel to view this booked appointment?, I won’t be able to see both at the same time since only one page is visible at a time. Does that make sense to you? @leex279

thanks, but its not really clear to me. Can you provide a project structure and information how you run the differnent instances?

Maybe add some screenshots of all instances you got.

Okay, so here’s what I built with Bolt:

  • This is the admin dashboard, where the admin can manage services, staff, and appointments.
  • It’s only visible to admins who are logged in. I haven’t created the login page or authentication yet but this panel will be visible to admins only.

Now, here’s the issue:
If I ask Bolt to create a customer page, where customers can book appointments, Bolt creates this page inside the admin control panel.

See the problem?
Do I need to start a whole new project just for customers, or is there a way to separate this?

you just can tell it to split the project in server and client (frontend) and move the control pannel to server. in the client tell it to develop me new user frontend
should work

Example:

ok thanks, ill try to do that. i thought it would be smart enough to do it on its own. But anyway, another problem is token usage. is there a way around this? I want to continue building with O3. because after a few functionalities i built, the AI stops responding because of token limit exceeds 20k. does it keep accumulating the prompt history? should I toggle between different AIs that has bigger context like gemini flash? or will it be a problem if I started it already with the O3 model?

you can always switch models and see how it goes on. just make sure you saved your work before (pushed it to git), to have the working state of now.

Before switching => are you on the main branch and activated context optimization and also use the optimized prompt => if not do it, to reduce token size.

ok, but does it keep accumulating the prompts? like what will happen if the project is large?

It create a summary of the most important stuff and the project features.

you normally, or at least me, dont use the chat history to continue work on this. I push to git always and when working again on it, I just clone it from there, what means it starts with a clean chat.

ok, just to make sure I am using the main branch, I downloaded it and tried to start the docker but its giving the same .env_local error. I can fix it by changing the .env to .env_local although in the instructions inside the env file says rename to .env. So, if i fix it by naming it .env_local, will this cause any wrong behaviors?

you need to do a git pull first.

If you like, you can also try out my docker-stack, which I am currently testing (NVIDIA works fine for me)

git pull did not fix the .env local problem. The dockerfile is requesting .env_local. So, is it ok to rename it?

thats the correct name according to the docs also :slight_smile:
https://stackblitz-labs.github.io/bolt.diy/#1-set-api-keys-in-the-envlocal-file

1 Like

On my Docker setup renaming to .env.local resolved the error, but my API keys were not getting passed to the environment. I found I needed to have both identical files present to operate normally.

@leex279 this did not work :frowning: I cant run both frontend at the same time. I want to be able to test the customer frontend with the admin control panel at the same time. Can you show me a screenshot where you run two frontends inside bolt and how you did it? are you are supposed to run on two different ports? but then how can you still preview the app inside ONE webcontainer-api.io? You can’t have two preview screens inside bolt right? I am using superbase for the database & backend.

@leex279

Is this how its supposed to be?

@thelege2nd I did not really test this out so far. Yes you can run 2 different services on different ports within the preview, but I am not sure how the URL needs to look like then.
I just normally sync it out of bolt to my host and run it there to verify everything is working. For me at least this not much effort and makes more sense, cause I guess you would need some special urls/code to do it within bolt, what you then dont need in production, but you still got the code in.

It looks like you are using Express which I do not have experience with, but you probably want to look up routing in express and then write a prompt asking the ai to setup routing for authenticated routes and non-authenticated routes. You don’t have a frontend and a backend. You have a frontend and an admin panel. Which are both frontend and can be handled with routing. So your scheduler could be at the base of your url www.yourdomain.com or localhost:3000 whatever, and then to view what your are calling the backend you would just go to localhost:3000/admin or whatever you want to name it. Then you can setup authentication on the routes your user needs to be logged in to view and not on the publicly available parts.