I'm completely new in React world.
A few days ago I developed my very first simple React app, built the app and uploaded it to my GoDaddy host. I thought this would be enough as I had an index.html in the root of my host and the thought that the build will work once I open my domain in browser.
Unfortunately, it turned out that it's not working. Nothing is easy in life.
After hours of googling I found out that people upload their React apps to special services such as Heroku. I found a tutorial and managed to publish my react app successfully on Heroku. But to be honest I still don't know why my app wasn't working on GoDaddy server.
When I was preparing my app for Heroku, one step was creating a server.js file using express.js.
Does it mean that each React app needs such a server file to be working? What if I wanted to use my React app on GoDaddy or any other hosting server? Would it be possible?
OK, I found out what was the problem.
It turned out that paths inside the index.html don't mirror the build folder structure.
Inside the index.html I had to change references like this:
/static/css/2.567.chunk.css
To this:
./static/css/2.567.chunk.css
And inside of CSS files I needed to change paths like this:
/static/media/tree.6098.jpg
To this:
../media/tree.6098.jpg
After that you simply upload your files and everything works as it should.
Now the question is, why those paths are not as they should be?
Related
I'm trying to Publish/Host a ReactJS project on Bitbucket. the project was bootstrapped using create react app, therefore the index.html file is within a public folder i.e. root/public/index.html.
i have followed the instructions on https://support.atlassian.com/bitbucket-cloud/docs/publishing-a-website-on-bitbucket-cloud/ but i cant seem to get the site to show.
the url's i have tried are [workspaceID]/ui-library.bitbucket.io and [workspaceID]/ui-library.bitbucket.io/public (ui-library being the repo name). Both of these return repo not found or just google search results.
am i doing something wrong here? i'm new to Bitbucket, i would have previously used GitHub and GitHub pages for things like this.
thanks...
I have been trying to run my react application on a subdirectory .
I am using a load balancer (ALB) to and redirecting my application on "directory" from "https://mydomain/directory".
But static file of the build was not being found by my application
added direcctory on package.json. "homepage": "/directory"
added basename on react-router-dom
in my networks index.html is looking for ".#####/directory/static/js" and css in the same way
i am only able to run my react build by redirecting static request to my react build, but this is not the good solution because i want to run 3 applications on my ALB and this will cause me change my assets folder name manually in the build, obviously don't want to do that.
I have been applying multiple solutions but couldn't find a proper solution please someone help in this.😑
ALB doesn't do redirects, and it doesn't do any sort of request path rewriting, it simply forwards the request to the target. You need to setup your server so it is actually serving the website from that folder, in other words change your assets folder name in the build.
If you don't want to do that, you would need to look at other AWS solutions like CloudFront which can proxy the request to a different path on the origin server.
I had a scenario of publishing react app with nginx inside docker with ci/cd. It took me setup a separate express server to serve app files and resolved the issue. Here is the repository synopsis of server.js that might help:
https://github.com/mkhizerali/store-pwa/blob/master/express/index.js
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
I've managed to deploy a react app (create-react-app) to Bluemix using cloud foundry with a sataticfile, everything is working fine except form one thing: routing.
I'm using BrowserRouter to manage routing so when you write the url's path manually I get a 404 error. I know I have to configure the staticfile to use the index.html as default, the question is how to configure this file on bluemix.
My build configuration looks like this:
And my deploy:
For now I've solved it using HashRoute, but that hash is awful and really bad for SEO as I read somewhere here.
I solved it, just create a file called: Staticfile with pushstate: enabled and save it on the public folder. I was saving it on the src folder so, when the react-app was built the Staticfile wasn't on the root directory.
I currently have a Ratpack Groovy application hosted on heroku, I've managed to get it working correctly and deploying to the URL Heroku created for me. I decided to make a ReactJS application, which grabs the data from my database from an API I've built in Ratpack, my React application acts as a basic CMS where I can post data back to Ratpack and update the database.
My front end templates get rendered from within my Ratpack handlers, this all works fine locally. I followed
https://github.com/gschrader/ratpack-react-boilerplate
Here is my basic project structure
So I can run ./gradlew run which builds the react app and starts up my Ratpack app in the root of my project and then yarn start in my React directory which starts up my react application on localhost:3000.
My question is how do I deploy this on Heroku, at the moment it's in one big directory, so could I deploy it as one project? I'd like the cms to be on a sub domain such as admin.application.com. I am pretty confused as to how this would work, if anyone has any documentation that would be very helpful.