I am developing Spring boot application with react client using gradle. I am new to all these technologies.
Currently I am able to create war file which includes following folders:
META-INF
public (contains build of client part - index.html, index.js and other .js scripts)
WEB-INF (contains compiled spring boot backend app)
Currently, after deploying war to tomcat, I am able to access client static content on http://localhost:8080/app-name/public/. Also I am able to access routes defined in spring controllers on http:// localhost:8080/app-name/route (these are just for testing purposes, I want this commands to be accessed only through REST calls from client).
Now, what I want is make that static client content available under route http://localhost:8080/app-name/xxx-yyy/public
I don't know what is right way to do this (actually, only way I know is create xxx-yyy subfolder on tomcat a put public folder inside it. I think this is bad approach). Other way would be somehow forward from spring controller but I am not able to do that.
It is possible that this is bad concept and I should make it other way. I would be glad for any suggestion.
Thank you
I guess you are using create-react-app.
For production deployment, the React application consists of static files only. These files are generated with create-react-app : npm run build. Cf. the official docs about deployment.
So you just have to serve these static files in your Spring Boot app, for instance in the folder src/main/resources/static. Here is the documentation about static content in Spring Boot.
At the end, Tomcat will run dynamic REST web services (for instance at /api) and React files.
Note: if you are using Spring Security, make sure that React files such as index.html are publicly available.
Related
I am creating an Angular application that is used in Electron, and it has access to the users filesystem. The user will create a project within the app which will load files through http. When the project changes, so does the static files location, so is there a way to tell angular where the static files for the project are located as the user switches between projects? I don't think this is supported in Angular's angular.json file.
Is there a way to do this without having to write my own http server?
Note: The request are made from threejs which doesn't use the HttpClient service.
I created an Angular 7 app and built it using Angular universal to make it SEO friendly. However, as I was reading, it is not possible to deploy it now on a shared server (once build with Angular universal, otherwise it is possible), since it requires Node.JS to run the script file on server.
My problem is that my hosting plan is on a shared server so I will not be able to run it using Node.JS but I still care of having my app SEO friendly.
What can be a good solution?
Angular Universal renders your application in server side before serving the page (SSR). Indeed you will need nodejs to make it work.
You need to prerender your application as static files.
With #ng-toolkit/universal installed you should be able to prerender your application with the command :
npm run build:prerender
Now, you should see new folder dist/static , inside which all your application views should be prerendered and can be served as static files.
In this tutorial on using String Data REST with React
it says to create an HTML file called index.html in the Spring Boot project and have a div where I can render the React component.
The problem I have is my React app is a completely different project. How do I do this or what else can I do to fix this? Thank you very much for the help!
You could do two things:
You could run them both in separate projects as you have it now and run them on different ports locally, however that means you need to enable cross-origin requests on your server or configure a proxy in the react project. (If you used create-react-app you can just add "proxy": "http://localhost:8080" in your package.json file where http://localhost:8080 is the url to your backend.).
You could move all the files into one project and have your React project run on the embedded Spring server. However this requires some re-configuration of your webpack.config.js and some restructuring of files.
I suggest the first option which is easier and also probably how you would like to run your application in the future, with one container for the client-side code and one container for your backend code.
I am trying to build a simple website with nodejs, express and vuejs.
In tutorials i saw people recommending having the frontend and the backend communicate through an API by using the vue-cli. (example). 1. Do People use this method in production as well?
I also saw that you can build the vue cli files into a /dist folder and move this folder into the backend. Then you can use the backend to serve the generated index.html (example)
2. After doing this, is vue.js still communicating with the backend through the api i wrote with the vue cli for development?
3. Do i have to change code in the backend to deploy the website this way, other than statically serve the index.html file that was build by the vue-cli? and lastly 3.Can i just npm install vue and use the provided vue.min.js in a scripttag and just lose some usablillity while developing?
I hope my question is understandable and i appreciate every answer.
The backend typically serves the frontend via REST API.
Your Vue app is completely separate from your backend. Most applications keep business logic in the backend and use the frontend as a view. For smaller projects, you can keep the logic in the browser.
To answer your question directly: No, the Vue CLI is not used for that. It's purpose is to enhance your development process.
Relevant topics you should learn about: Representational state transfer (REST), Single page applications, Ajax
Advanced / less relevant topics: GraphQL, Server side rendering, HTTP, web sockets, MVC
Not sure if my terminology is correct here. I have a Node/Express server, serving up Jade template files to an AngularJS app.
For my live deployment I need to be running the app in Apache / static files, rather than the dynamic Jade views.
Are there any packages that I can point at my views/partials folders and render the Jade templates into HTML files, as part of my build process? (I'm using Gulp if it can be integrated into that too).
You can use gulp-jade, as long your templates do not use any dynamic data that needs to come from node.
But your motivation seems strange. Are you only using node.js as a convenient local webserver and your live deployment will still use angular? In that case, just serve the templates statically with Apache and let angular handle the rendering.