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.
Related
I created a server-side and deployed it on Heroku so I have a URL from Heroku that I can see the data transferred from the backend when I enter that URL.
I put that link in the react app package.json file as "proxy" and when I run the react app locally I can see the data from the backend rendered on the website.
I have tried to deploy the react app on Heroku and netlify and on both you can see only the react components rendered without the data that is supposed to be transferred from the backend.
any idea why is that?
In my opinion it has to be something related to the build folder since that run the app locally works great
****update:
After running the build version locally i can see the data is not passed so I'm assuming something is wrong with the build version
I am trying to use spring tutorial:
https://spring.io/guides/tutorials/react-and-spring-data-rest/
to run my spring + react application.
In the tutorial he does everything on one page but my application is using Router component to switch between pages so it doesn't work with spring controller serving one address.
What can I do to make it work? I tried googling for it and read many stack overflow questions but couldn't find answer to my problem.
I found a way.
I had to paste address of server I want to deploy to as a proxy setting for react project, execute npm run build in react project root directory, copy files from build directory into resources/static directory in spring boot project and then I deployed project to heroku as described in this guide: https://devcenter.heroku.com/articles/getting-started-with-java.
I have a personal website/portfolio built with ReactJS and React-Router. I want to be able to serve separately developed and built ReactJS apps as my coding demos from within my personal website (rather than provide an external link). I have used Create-React-App to bootstrap the original website app.
I have tried placing the built files (index.html and *.js files) in the public folder, which is copied to the /build folder when the app is built. However, these files are not being served.
Interestingly it was working with the React development server, but stopped working after building and serving with the npm 'serve' module.
eg. I have copied the built demo app to
/public/demo-builds/[app-name]/
and this gets copied when building the main website app as
/build/demo-builds/[app-name]/
Accessing my-domain-name.com/demo-builds/[app-name] or my-domain-name.com/demo-builds/[app-name]/index.html results in error.
Is this an issue with my overall methodology of trying to serve separate built apps within a react-router app?
Is there an accepted way to serve built React apps within a React app?
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?
I'm working on Project using React for the frontend and Laravel for the backend using RESTfull API.
I developed each one in separate directories but now I'm trying to deploy them in the same folder I don't really know what to do.
or can I deploy then each one in their own folder? if yes how can I run them on the same server (apache)?
The directory really shouldn't matter. Since React is a frontend javascript development framework, it runs on the client while the laravel backend will run on the server itself. All you need to do is serve the entry point html and the javascript file created from your react project to the client.
I assume you're thinking about the "development server" that you run while developing the react app. You need to, depending on your build environment, do a production build and serve the files in some way to the client.
When using create react app you can use the deployment build instructions: https://facebook.github.io/create-react-app/docs/deployment
So to summarise:
Host your laravel backend on the apache server
Upload entry point html (you can serve this via laravel, create a template with the correct html)
Serve the deployment javascript file for your react app (just include it on the same html page)