Not sure on which Stack subforum to ask so feel free to correct me.
Question: Can you host Laravel web app with React frontend on Heroku for free? I read something, somewhere, long ago that it can. If any one knows and if also knows any good tutorials/articles for said Laravel+React web app calamity, that would be great.
Ps: I got github repo for said app, so if that helps ...
Mucho kudos in advance.
Edit1:
I figured it out by reading docs and by watching this tutorial
Now i have different problem. Some font files for the app are accessed from public folder. Heroku than says cors not allowed.
I tried creating middleware(example), i also tried with some packages, not sure if it's Heroku or what, but my attempts of tackling this ended to no avail.
What would be my next vector of approach to this problem?
Edit2:
An url to my web app. My web app is using this space .
This is how it would look like when i seed Heroku:
an image from my local machine.
Edit3:
An image of data send by ajax call:
it sends data of user, but not of articles, like they're not seeded at all...
Edit4:
I am surprised? now. I sincerily don't know what i have done, but cors errors have disappeared ... Still seeding still doesn't work ..
Edit5:
Cors error persist still, but only when user get logged in. Don't why is this happening, it's peculiar ... Anyhow, besides these cors errors, images uploaded to storage folder, even after creating symlink on Heroku, don't persist. It must be like it is explained in this SO post. Still, all main functionalities work, that's something right?
Yes, you can!
You can do it by setting the Laravel preset to react (it comes with Vue by default) with:
$ php artisan preset react
This installs all the required dependencies and also creates a dummy Example in your resources directory.
Now you can build the js by compiling your assets with
npm run prod
This will generate your app.js file with all you need to include React components in your views. You can push it to heroku as usual.
I hope it helps :)
Related
I have a react application that I've deployed using nginx, which however only return a blank page. I've been looking for a solution for the last week and I can say that I tried almost anything... but nothing seems to work.
If I open the console I can see that all of the files are delivered with success, however, I got a "Loading failed for the with source ..." on firefox and a "net::ERR_HTTP2_PROTOCOL_ERROR 200" on Chrome. The weird thing is that both files are actually received (200 status) and can be viewed with the development tools. Moreover, if I visit the static resource link I get the full content without problems.
And of course, the issue is only when using the production environment, if I deploy it locally it works perfectly.
I really don't know what to do. I've tried updating the "homepage" directive, playing around with "react-router", changing the various nginx configurations and many other things but nothing.
If anyone could help me out I would really appreciate it!
I was running nginx with docker on Raspberry and, for some unknown reason, the timing on the container was completely messed up. I solved the problem by running the container in privileged mode ('privileged: true' on docker-compose)
I am in the process of deploying a dynamic, React.js app to Heroku and wanted to test it out by using 'heroku local' to see if it works before pushing it to Heroku. Everything seemed to be working fine with the server - my database console.log message logs to the terminal signifying everything is going well - but when I try to access the website which is on localhost:5000, I get an error message of 'Cannot GET /' and the console prints a message saying , 'Failed to load resource: the server responded with a status of 404 (Not Found)'. My React.js files are all within the build folder which in conjunction with all of the other files, were pushed to git and commited, but for some reason my files are not showing up. I would greatly appreciate if someone could help me determine what went wrong. Sorry if my question is a little vague; please let me know if I can clarify something in better detail as I am fairly new to programming.
I've added a proxy to one of my package.json files to help with url routing; possibly this could be causing the issue?
Also, if it helps at all, a photo of my folders within Visual Studio code are listed below:
I have a React application created by create-react-app. The app works fine, but I have run into a problem
I need to test som ad things on a plain html site, no additional React code. The problem I have is that the ads.txt tags need to be crawled by Google, which can take up to 24 hours on a new page/URL, time that I don't really have.
So I did the following. In my repo under /public folder I added a folder /ad-test with an index.html inside. When I serve it locally using npm start and go to http://localhost:3000/ad-test, it works fine.
Great, I thought and deployed it to the production environment, but now when I try to go to http://[my-site]/ad-test or http://[my-site]/yo-test/index.html it does not work (I get the React 404 site that I created).
I looked here and if I understand correctly, it is not possible to do it the way that I tried since the build stage will not include the public folder. Am I correct in this?
Any idea how to solve this?
EDIT:
I have a good knowledge of React and React Router in general, the app already uses <Switch><Route ... /></Switch> with a catch-all route directing to Not Found Component and the bottom.
The problem I have is that we include some ad scripts from an ad provider. The ads are not displayed in the application (adblockers totally removed from browser etc.) and the provider thinks that we have made errors in the React code.
We don't think that we made any errors (the ads were displayed fine in our test environment but not in prod) and we have to prove that React is not to blame for the ads not showing.
To do this we created a static HTML file with all ads hardcoded, no React components or other things that might disturb. BUT, because of ads and Google crawlers and ads.txt, we need to have the static test page under the same domain as our main page/application.
This is why I ask if it is possible to somehow add a static HTML that can be reached from http://my.page/test-page.html without being "intercepted" by react router, i.e. it exists outside React but on the same server.
When you use react by create-react-app, it means you are building a single-page application.
What this means is that after running npm run build you will have a build folder with only one html file called index.html in that fold.
This index.html does not know and has no relationship with your added 'index.html' in ad-test folder.
If you want your ad-test html to be recognised by react, you need to make it a component of app.js and use react-router to give it a pathname.
It is very simple.
First, install react-router-dom;
Second, set up react-router-dom;refer to https://reacttraining.com/react-router/web/guides/quick-start
Third, give your add-test component a pathname.Your js code should look something like this:
<Route path='/ad-test' component={AdTest} />
IMPORTANT:
After you deploy your app, always remember you just built a single-page application.
You only have one html in your app.
Please make sure when you test your app after you deployed you must tell your service provider that no matter what pathname a user inputs in the address bar you always redirect it to the index.html
The build stage includes the public folder:
If you have a picture in the public folder, and this picture was imported to other components it will be shown after you run npm run build
Hope it helps.
Have you tried playing with webserver configurations? It is usually setup to redirect all traffic to index.html. Maybe exclude your static html path from redirection?
Place test-page.html in public folder like
public/path-to-static-html/test-page.html
Configure webserver for
directing all traffic to index.html EXCEPT /path-to-static-html which
will be directed to test-page.html.
For example, in case of Apache
you will be setting the DirectoryIndex directive.
just started working with reactjs recently, month or two..not a pro but can find my way around.. I am using create ract app (quickie ,that ships with service-worker) and my setup is such that I am deploying react app in the root of my java REST application, so all my service rest calls are in relative format, e.g /rest/myservice/123 etc.. and they work just fine..
but recently I started getting strange errors, and rest calls stopped working..
if I execute RET URL from browser .... nothing happens index loads... when I test with postman REST works just fine it also works in safari or if url is localhost... ...so after hours of frustration i discovered that service worker doing its .... caching . my rest calls are getting intercepted and they never make it to server... and there is nowhere that it mentions about how to overcome it, neither in service worker docs nor in create-react-app docs ...nothing is mentioned about this use case...... this is so pathetic...
I figured it out after numerous trail and errors... but it did not stop there..
I went ahead and deleted the service-worker registration entry from index.js also deleted service-worker file and rebuild the app. well service-worker.js file is still there... it showed up in build folder after I rebuild the project..... what is it with create-react-app did they got paid by google to include service-worker? or what is going on? why can not I remove it? and how do I prevent it from canceling my rest url calls?
when I type : https://xxxx.io/x/referal/refCode/3429878 it just loads application...
what else am I missing?
got the answer over #Redit needed to unregister worker...
details #:
https://www.reddit.com/r/reactjs/comments/8hovvb/removal_of_serviceworker_from_reactjs_app/
Related question with pretty much the same issue: Firebase FCM React project issue - firebase-messaging-sw.js wrong type?
Answers in this question or any other have not worked for me, below is a screenshot of the project tree with firebase-messaging-sw.js file in it, since adding it has been a occuring suggestion to fix this issue.
I would like to know if I am just doing it wrong or why I am not able to register the sw for the firebase to use.
Original error from developer tools console:
"Failed to register a ServiceWorker: A bad HTTP response code (404) was received when fetching the script."
As an aswer to this issue, here is another post by me which I also managed to solve myself. FirebaseError - messaging/failed-serviceworker-registration
So basically using a very specific version of webpack-dev-server, adding a sw file that can have any name, and registering that file as a service worker for fireabse to use in my firebase messaging initialization file, I managed to get firebase cloud messaging working with webpack. The version of webpack-dev-server is 2.11.0.
Hope this helps anyone with this issue.