Self hosting error: Uncaught ReferenceError: Loader is not defined about flagsmith-frontend HOT 8 CLOSED

Hi,

Can you confirm what versions you are deploying? And how exactly you are deploying the front end?

from flagsmith-frontend.

@dabeeeenster Yessir, I had pulled down the latest code from the master branch of the repository, made the adjustments that seemed necessary based on the README, and deployed that code on Heroku. So, the specific version, I'm not exactly sure, but it was whatever the most recent code in the master branch was as of this past Friday.

I switched gears yesterday and decided to deploy v2.5.4 of the docker container from dockerhub to our heroku app, and that seems to have gotten me a little bit further, though now I'm seeing the "Maintenance" screen, and I'm not sure why exactly. I get a 400 (Bad Request) response from the API call to https://features-api.theartofeducation.edu/api/v1/flags/, but I'm guessing that's because it's missing a valid environment key in the request headers, which makes sense, because we've not yet established an environment on the backend ... I'm not exactly sure how to do that.

So yeah, I'm still kinda stuck trying to get a self-hosted environment stood up. Any suggestions with the best way to proceed?

from flagsmith-frontend.

OK, I made a little bit of progress. I didn't have the API configured properly. I added the necessary environment variables to the API and it seems to be running now. I was able to access the /init endpoint of the API and get it initialized ... at least, I got a successful 200 response, but I don't know how to tell if it succeeded, as I still don't have an "environment" setup. I've run the docker setup locally for development purposes, and when I ran it the first time, it prompted me to create an environment, setup an organization and a project, etc. I was expecting the frontend to do the same thing here, but I still can't wrap my head around why it's showing me "Maintenance" mode, as I don't have the MAINTENANCE environment variable set. I don't know, maybe I shouldn't be using the docker container deployed.

from flagsmith-frontend.

So, here's another thing I've observed that I'm not clear on at the moment. With running the docker container for the frontend, that seems to be working, but perhaps we don't have it configured properly? I'm not exactly sure. I'm seeing the following errors in my browser console when I attempt to access the frontend. This browser console output suggests two things to me: 1) for some reason, webpack HMR seems to be running, which it shouldn't be, and 2) there's some kind of error happening, but I can't seem to figure out what the error is or what's causing it. Is there some way I can find out? Thanks.

from flagsmith-frontend.

The request from the frontend to fetch flags from the API is failing with the following error:

I am assuming this is because the FLAGSMITH environment variable is not set. It's not set, because we've not created an environment yet. I'm not sure what I should be using to set that variable with.

from flagsmith-frontend.

OK, so ... with a lot of trial and error, I was able to get this running as expected I believe. I'm not exactly sure how the webpack HMR stuff fixed itself, but, I'm not seeing that issue anymore. Could be the existence of the right environment variables now.

Ultimately though, I feel confident this was what got us going with this. The last message I shared above was the final clue I needed. We didn't have an environment for the UI to connect to, because no environment existed in the database backend. I was able to get logged in to the Django Admin UI using the [email protected] default superuser account that was created by the /user/init/ API call. Once I was in the Django admin, I was able to manually create an organization, and then a project within that organization, which gave me a value that I could use for the FLAGSMITH environment variable for the UI, and once that was in place, the UI actually spun right up, and prompted me to create an organization, and a project, etc. Everything seems to be working smoothly now.

I'm not sure if I missed it somewhere, but I feel confident that I read through all of the documentation, and I don't recall seeing anything anywhere that outlined how to create a new or default environment in the backend that the frontend can be configured with to get up-and-running. Something like that would've been very helpful. Please share a link if I've missed that somewhere. Thank you.

And most of all, thank you for sharing such a fantastic project with the world. My experience so far with Flagsmith has been excellent, and it is clearly one of the best feature toggle services available out there, especially for the money. Thank you so much.

from flagsmith-frontend.

Hi @ryexley - sorry you had troubles - sounds like it was a bit of a journey! Are you able to remember what ENV VARS you had from the outset? I want to improve our docs around this, as if you point your own Flagsmith instance at itself (running Flagsmith on Flagsmith) before setting the rest of the application up, it will break as you encountered.

I think that's what happened anyway - are you able to remember? It would have been FLAGSMITH_CLIENT_API and FLAGSMITH ?

from flagsmith-frontend.

@dabeeeenster Yeah, I believe ultimately the issue was with the absence of a valid value for the FLAGSMITH env var on the frontend. I had gotten it to where it was working, but the requests to the API from the frontend were failing, and I'm confident it was because there was no value for that environment variable. It seems to have been a bit of a chicken-and-egg scenario though. There was no value in that environment variable, because I had no value to put there, because there was no environment created on the backend to configure the frontend to connect to. I was not able to find any documentation on how to "initialize" a new environment to connect to on the backend, so I ended up having to login to the Django Admin UI and manually create some environment data so that I had an environment to connect it to.

Hopefully that helps.

from flagsmith-frontend.