I've created a Spring Boot / React application - all code is stored in the same war file. If I run it in intelliJ (mvn spring-boot:run) all works fine http://localhost:8080/myapp displays my react front-end which calls back to my Spring backend. Now if I copy the war file to the webapps folder in tomcat, doing localhost:8080/myapp displays nothing - I thought my react front end would appear but just a blank page? I guess I'm doing something wrong, any ideas? I have war as package in pom file and tomcat as provided, I also override configure:
public class ServletInitializer extends SpringBootServletInitializer {
#Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(ReturnsdashboardApplication.class);
}
}
UPDATE
I have noticed that when the app is built, the index.html page is adding a / at the start of any links. For example:
<link href="/static/css/main.8c8b27cf.chunk.css" rel="stylesheet">
If I remove the / it then picks up my application context as part of the url and works. Not sure why it is adding the / when being built?
Thanks
Related
Recently tried deploying my Spring + React app to Heroku but I'm having issues.. What I did: Built the React app, copied the contents of the /build directory into src/main/resource/static folder of Spring. Then when I opened up localhost:8080 in my browser, I got the Spring Security default login page. I logged in with an user I had from before and when I went to localhost:8080 again, my react app loaded just fine.
So then I added this .antMatchers( "/", "/api/test", "/api/me", "/api/register").permitAll() to my code, in order to remove the login page from my front end, and when I opened localhost:8080 now, I get a blank page. But when I log in, the React page again loads fine. I tried the following: putting the react app files into the /templates folder, no luck. I tried creating a /webapp folder and putting the files in there, no luck. I tried adding server.servlet.context-path=/ to my application.properties, no luck. I tried creating a redirect controller as so:
#Controller
public class RedirectController {
#GetMapping("/")
public String getHomePage() {
return "index.html";
}
}
Also no luck. I tried changing my Security setup to this: .antMatchers( "/**", "/api/test", "/api/me", "/api/register").permitAll() and that actually worked, but then the problem was that all my endpoints were exposed, which is a big no-no.
Also I just noticed that my index.html file is getting served properly, but it is not loading and javascript or any other React file.. What is going on??
Oh wow.. Okay I found the solution, Spring Security was actually blocking access to all my static content except my index.html. All that needs to be done is add the /static/** in here: .antMatchers( "/", "/static/**", "/api/test", "/api/me", "/api/register").permitAll() to let everyone access the static folder. Will probably need to do the same for any other static file that you have like images which aren't in the /static/ folder.
When running my spring app from my IDE and running the React app from within VSCode, everything worked perfectly. I used the build script to build my React project, and then put the output into my /static folder of Spring. Then I used mvn clean install to build the .jar file. After running the entire app from the .jar file, I can access my homepage with localhost:5000. I can also use my navbar links to access different parts of the website, like the Home page and the About page... But if I try to manually enter the url localhost:5000/about I get a 404 Not found error.. What am I doing wrong?
My guess is that your Spring (webmvc?) application is not configured to listen to different URLs other than /. And while it may seem as if the navbar successfully redirects to http://localhost:5000/about, in reality the single page application uses JavaScript client-side routing to change the URL in the browser, unload the currently rendered page, and load another page.
If you are indeed using Spring MVC, you could (among other options) modify your Spring static resource configuration, modify your #RequestMapping to listen to multiple endpoints, or use a ViewControllerRegistry.
I have a react application build with create-react-app. Its using octoberCMS as the backend fetching data using Axios calls from the frontend. Till now I was developing keeping the build content of react inside a directory named 'react' in the root directory of octoberCMS installation. Hence the URL I was hitting was http://example.com/react/.
The problem is now I am done with the development phase and look forward to deployment. But I want my front-end to be served at http://example.com and backend to be served at http://example.com/backend (backend served as I want). How can I achieve this? I am fairly new to both frameworks.
I have tried keeping the build content along with the rest of the octoberCMS
First build your react app that will give you vendor.js[third party scripts] and your app.js[your actual app]
put them in to theme directory assets something
Then In Ocotber CMS make page with URL /:url? and paste your index.html content there.
it will be your root div and including js html, change path for js which points to the build js which you put in theme directory.
now what happens when anybody come to site
- we are serving same content as we do in dev build
- index.html with root tag and needed js
Now if use hit any other url like https://www.example.com/test/etc it also will be catch by /:url? (and all other requests) and home page served and our react app will work as we needed.
if any questions please comment.
I've created a react project using asp.net core react spa template. Everything seems to be fine, but when I deployed the application in IIS, it is deployed as an application under the default website. When I try to access the site, the index file is coming, but static files are giving 404.
One solution I found is setting PUBLIC_URL to application name in iis and building the application and then deploy. But, Is there any other alternative solution from asp.net core side? like setting rootPath
// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/Build";
});
I'm trying to learn how to deploy an GWT application to Google App Engine.
I'm using GWT 2.4 + eclipse with Java 7.
I have basically a static page with a button that doesn't do anything.
public class Test1 implements EntryPoint {
public void onModuleLoad() {
final Button sendButton = new Button("Send");
RootPanel.get().add(sendButton);
}
}
I have created my application istoeumtestedenome, and in localhost it works. I have deployed it to App Engine with no errors. But when I try to access the page http://istoeumtestedenome.appspot.com/, a 404 error is displayed.
What can I do?
There are many things that could have gone wrong. The first things that come to mind:
Your static HTML file (host page) is in the wrong place (folder).
You did not specify a welcome page - or there are some other problems - in your web.xml file.
Go to your Admin Console for App Engine, and click on the logs to see what goes wrong.