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.
Related
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.
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
I am trying to update my react portfolio but to do that i have to be able to work on it. I have it up on heroku working and online. I pulled it up on my code editor and I do npm start and it compiles successfully but it wont go onto my localhost. Im wondering if anybody has an idea of why it wont come up. thanks a bunch
i think you can put your project in github and uplaod it to heroku through your repository and then you can change you code , run it in localhost and changes will automatically get applied to your protfolio online
My team is working on an NodeJS app with a ReactJS frontend that needs to be deployed on our Ubuntu server. It runs fine locally and it used to run fine on the server until we added a Router/Switch structure into the App.js. Now we get 404 and 502 errors and I'm thinking of adding some GitHub action to automate the deployment process with npm run build and all. Ideally, every time we push to GitHub, the app on the server should update without someone having to tunnel in and type something manually. Can anyone suggest a ready-made YAML file for that purpose? How would we trigger it on our Ubuntu server? Would we run it under nginx (like now) or apache?
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