Currently moving a work project from Create React App to ViteJS. I was a noob when I started working on this project, so I did what I was thought and started with CRA. Let the attacks begin.
In my CRA project I had an env variable called REACT_APP_SERVER_URL, which is self explanatory, but it just links to localhost:8000 on my local machine and to https://exampleserver.com when deployed. It's used for fetching data on the frontend. To get projects you hit https://exampleserver.com/api/projects
When I moved the project to Vite, I changed the env variable to VITE_SERVER_URL. It's all cool and it works amazing on my local machine.
Let's say client url is https://viteclient.com.
Now comes deployment... App crashes on load. I check the console, and good thong I forgot a console.log in on of the fetch functions to tell me what was the issue. I'm getting a 404 from the server. The app made a request to:
https://viteclient.com/exampleserver.com/api/projects
What happened there?? Is VITE_SERVER_URL a saved name for Vite env variables? if so, I can't find anything online about that. It didn't do that in CRA, it doesn't do that in my local machine. Does anyone have any idea what happened? And/or how to fix it.
I tried looking if anyone has a similar issue, but I can't seem to find any other developers having these issues.
Related
Describe the bug:
I have set up an app with CI/CD pipeline with GitHub. I used create react app and various packages. I connected a backend environment that has provisioned graphql and cognito components.
I have different branches connected to different custom domains dev/qa/prod, and have been developing and deploying successfully to the dev branch with little to no issues.
After doing some work I committed the code pushed it up which started the build in amplify.
Locally "npm start running on local host", the app runs with no errors or warnings.
When I look at the deployed app there is a blank screen with this error
I've Tried So Far:
I have worked my way back commenting out components and uninstalling packages to try to nail down a particular spot where I could have introduced something. I ended up just importing App.js with
just a div with Hello in it and it still breaks after being deployed.
The initial error pointed to react-image-gallery (as seen in the picture I'm sharing), so I uninstalled that and got rid of the component but then the error just keeps going down the tree to another component, then another component....
The stack overflow posts about this particular error point to circular dependency issues or importing exporting things incorrectly. Why isn't this showing up locally then? I still took this advice and scoured my code to see if somewhere in my work I introduced something.
Expected behavior
Webb App is working in the local environment, after its built and deployed it is not working.
Reproduction steps
Travel to https://dev.jacobwazydragcourse.click/ open up console
App Id
d2nnfn8ylufs60
Region
us-east-2
So I have built a react app from scratch using npx create-react-app. Everything was going great and I decided to deploy it, to which I hit a lot of problems. Using BlueHost has the host, I accessed the CPanel and inserted the build folder, which i used npm run build to create. The website loaded correctly on chrome, however issues within Safari and Mobile browsers emerged, the page was empty.
After doing further research, I decided that the issue was in deployment and not dependencies. I came to this conclusion because I was able to run a local server on both Chrome and Safari, to which the website worked. If it was a dependency issue, it would not have worked on the local server.
So, I decided to start debugging the build folder. However, this is where an issue emerged, I could not load it at all on a server. I tried using serve -s build, but that directed me to an error screen, 404: the requested path could not be found. If I try to plainly use the index.html, open with browser method on my build, it directs my to an empty page with an invalid url, file:///Users/danieldobrovolskiy/Documents/optimal-exterior/build/index.html.
Apologies if my question is vague or incoherent in someway. I'm seriously confused with the deployment process and have no idea what to even ask. All help is appreciated! Let me know if further information is needed.[
Have you set a homepage in package.json? it should be like "homepage": "./" if you're deploying off the main folder of the webserver
Hi everybody im actually working for a company and they are asking me to show them my React Website while im working on it. They have a website that is connected to our GitLab Project and if i type http.websitename/folderOnGitLab it actually comes out whats inside the folder but with react it shows the code , not the website , because the only way i know how to open react app is by "npm run start" from local, i dont really know how to "append my app in that website from GitLab" . I have already pushed all my React App but i dont really know how to make that visible to everyone as a website not only as a code. The website is a website they host so is always online and is connected to the project as i said. So i kinda have all the material but dont know how to make that work. For example i have pushed Test.txt and if i type website/Test.txt it shows the inside of it , so the website works.
It depends on how your app was set up, but probably you need to run npm run build, which will package up your app to be used on a production website.
This will be in the /build folder, the contents of which can be hosted online.
I'm not sure how you've managed to get that folder working on that website, it definitely isn't best practice to have all the code hosted online like that, but for a temporary solution you can just go to http.websitename/folderOnGitLab/build and it will probably work.
In the future you want to copy just the contents of the /build folder to be visible on http.websitename/folderOnGitLab.
Edit: The /build folder will be excluded from git, don't put that on GitLab, just the other source files, as you can re-generate it any time by running np run build
You can try using heroku. Once you push to heroku, it deploys your code and provides a url which you can share. It's free.
https://blog.heroku.com/deploying-react-with-zero-configuration
Are you using gitlab pipelines?
If yes, you can configure ngrok in one of your jobs.
If someone wants to see your work, this person just need to play the job that have the ngrok tool and it will receive a custom link with the application.
To stop the app, you just need to click in the cancel button
Today I see a weird thing after build a ReactJS app. when I checking in the browser after builded files it's exposing my raw folder structure. It should not expose the directory.
I see some StackOverflow saying that "homepage" : "." in package.json will solve, someone saying "start_url" : "/" need to change in manifest.json. but nothing is working for me. Any way to solve this.
You're seeing this because you're running this project locally.
When you run a project locally, it doesn't use the prod version of your app. It uses the dev version which isn't optimized for production. This is done to help you out with debugging during the development phase of your project.
If you deployed the app, the deployment would be using the build output (and not your local build, like you see here).
Note: If you're still experiencing this issue then your bundler (if you've ejected a CreateReactApp, then I'm referring to webpack) needs proper configuration and you'd need to provide us with more information.
So I am new with working with react and have followed this tutorial here to assist me. All runs fine following these videos and all locally, but after doing a npm run build and then pushing to Azure via a local git repo, the UI runs as expected, but whenever the UI tries to hit the Express/Node backend, it gets an error that I am not understanding how to resolve. Looking at the build scripts that runs on both, I do not see where or if I need to change an environment variable as it is already hitting the correct port on Azure. What I get is the following:
What do I need to revise for this? Since webpack with the build script in create-react-app seems to do what it needs to, I am not quite sure where things are going wrong.