How do I serve a React application from an Spring Boot application? - spring

I would like to serve the results of the Webpack build of a ReactJS UI application from a Spring Boot server application.
As the Webpack build generates all the assets in a "dist" folder i.e. index.html, bundle.js, etc... Accessed as i.e. http://localhost/index.html
And the Spring Boot application serves the API URLs from i.e. http://localhost/api/xxx

create .env file in the root of react project (next to package.json)
put PUBLIC_URL=/nameContextRoot in .env file (name of context root typically is name of war file)
build react project npm run build
For me it generates its contents in build directory of react project
copy the contents of the build directory to the spring-boot apps static directory
static directory should be a normal folder in src/main/resources
clean and rebuild spring boot project and run it
Contents are now properly served
UPDATE
Spring Boot structure
D:.
├───.mvn
│ └───wrapper
├───.settings
├───src
│ ├───main
│ │ ├───java
│ │ │ └───my.java.stuff
│ │ ├───resources
│ │ │ └───static
│ │ │ └───static
│ │ │ ├───css
│ │ │ └───js
│ │ └───webapp
│ └───test
│ └───java
│ └───my.java.tests
├───target
│ ├───classes
│ │ ├───java.classes
│ │ └───static
│ │ ├───css
│ │ ├───js
│ │ └───static
│ │ ├───css
│ │ └───js
│ ├───generated-sources
│ │ └───annotations
│ ├───m2e-wtp
│ │ └───web-resources
│ │ └───META-INF
│ │ └───maven
│ │ └───java.stuff
│ ├───maven-archiver
│ ├───maven-status
│ │ └───maven-compiler-plugin
│ │ └───compile
│ │ └───default-compile
│ ├───rclient-0.0.1-SNAPSHOT
│ │ ├───META-INF
│ │ └───WEB-INF
│ │ ├───classes
│ │ │ ├───java stuff
│ │ │ └───static
│ │ └───lib
│ └───test-classes
└───WebContent
└───META-INF
ReactJS project structure
D:.
├───build
│ └───static
│ ├───css
│ └───js
├───node_modules
├───public
└───src
├───components
├───domain
└───util
Your api endpoints will be also served below the context root. They have nothing to do with React.
The hint of #Codo to use a reverse proxy to access the static content is still valid. But here you asked specifically for how to host the react app in a spring boot application.

Related

Is there a way to have test folders near to main_test.go?

I want to create subfolders with tests and work with same main_test.go
Is it possible?
project
...
│
└───tests
│ │ main_test,go
│ │ some_test.go
│ │
│ └───subfolder1
│ │ another_test.go
│ │ again_test.go
...
I didn't find a way to solve this problem

Optimal project layout for mocha integration test project

I am creating a new Mocha integration test project that will house only tests, not product code, for a variety of products. The tests will share various functionality. These tests will be kicked off by product/subdirectory using CircleCI workflows. Essentially, the external "product A project" will want to kick off the A tests in the integration repo and push the test results someplace while the external "product B project" will kick off the B tests and push the results someplace else.
What I wondering is: what is the best project layout for this? I am new to Mocha and not that experienced with Circle CI so I thought I might benefit a lot from seeing if anyone has any opinions.
Here is a sample structure to go off of:
integrationTestProject
│ README.md
│ package.json
│
└───.cirlceci
│ config.yml
│
└───productA
│ README.md
│ │
│ └───test
│ │ spec1.js
│ │ spec2.js
│ │ ...
│
└───productB
│ README.md
│ │
│ └───test
│ │ spec3.js
│ │ spec4.js
│ │ ...
│
└───shared
│ index.js
│ │
│ └───sharedFunction1
│ │ │ auth.js
│ │ │ ...
│ │
│ └───sharedFunction2
│ │ files.js
│ │ ...
Is there any issue with the shared directory being where it is? I am trying to avoid any complications with import paths not liking how many ".." sections are in there, etc.
Will running "mocha productB" do what I am expecting (just run those tests)?
This did work out to be fine. ../../shared imports worked fine and using index.js files worked (shared and sharedFunction1/sharedFunction2) but I had to add:
.mocharc.json
{
"node-option": [
"experimental-specifier-resolution=node"
]
}
in order to be able import from "../../common" in tests.

nativescript application runs slow and freezes when navigating on android devices but runs excellent on ios

I have exhausted any suggestions available online.
I have tried setting markingMode in the package.json
"android": {
"markingMode": "none"
}
I have tried several methods of loading the viewModels.
I have tried saving to physical files and reading from them.
I have tried loading the json data fore each view into the appSettings.
I have tried uninstalling sass plugin sidedrawer plugin.
I have updated all the plugins including the core components.
Here are the plugins/versions
nativescript-appversion │ ^1.4.1 │ │
nativescript-iqkeyboardmanager │ ^1.4.0 │ │
nativescript-keyboard-toolbar │ ^1.0.4 │ │
nativescript-local-notifications │ ^3.1.0 │ │
nativescript-orientation │ ^2.2.1 │ │
nativescript-pager │ ^9.3.14 │ │
nativescript-plugin-firebase │ ^8.0.0 │ │
nativescript-pulltorefresh │ ^2.2.0 │ │
nativescript-social-share │ ^1.5.1 │ │
nativescript-sound │ ^1.0.4 │ │
nativescript-ui-sidedrawer │ ^6.0.0 │ │
nativescript-windowed-modal │ ^5.0.6 │ │
rxjs │ ^6.3.3 │ │
tns-core-modules │ ^5.2.2
The application should be able to navigate different views without freezing or slowing down.
I was facing exact the same issue. Use the configuration below on /src/package.json, not in the main package.json.
{
"main": "main.js",
"android": {
"v8Flags": "--expose_gc",
"markingMode": "none"
}
}
More info here: https://www.nativescript.org/blog/markingmode-none-is-official-boost-android-performance-while-avoiding-memory-issues

Eclipse vs. Spring Boot gives JSP error: Fragment "/js/home.js" was not found at expected path /src/main/webapp/js/home.js

I have the line
<script type="text/javascript">
<%#include file="/js/home.js" %>
Which gives the error in title. The JS files are in /src/main/resources/static/js. The error goes away if I create /src/main/webapp/js/home.js. This answer says webapp/ is not recommended. https://stackoverflow.com/a/28727189/148844. We are using JARs and we are uploading a WAR to AWS via the web console. Eclipse expects webapp/js/ and Spring Boot expects resources/static/js, so which should I use? How do I tell Eclipse how to find the JS file?
$ tree
├───src
│ ├───main
│ │ ├───java
│ │ ├───resources
│ │ │ └───static
│ │ │ ├───css
│ │ │ ├───fonts
│ │ │ ├───img
│ │ │ └───js
│ │ └───webapp
│ │ └───WEB-INF
│ │ └───jsp
We also have
spring.mvc.view.prefix: /WEB-INF/jsp/
spring.mvc.view.suffix: .jsp
Eclipse Version: Photon Release (4.8.0)

including an icon into a self-contained JavaFX application (.exe)

Followed the instructions here and here. I am using JDK 7u9 and NetBeans 7.2.1. What I did was create the whole path relative to my project's root folder (C:\Users\Administrator\Desktop\icotest\package\windows\icotest.ico). I tried both with a 48x48 and a 256x256 size. Here's a tree overview for my project called icotest:
│ build.xml
│ manifest.mf
│
├───build
│ │ built-jar.properties
│ │
│ ├───classes
│ │ └───icotest
│ │ Main$1.class
│ │ Main.class
│ │
│ ├───empty
│ └───generated-sources
│ └───ap-source-output
├───dist
│ │ icotest.html
│ │ icotest.jar
│ │ icotest.jnlp
│ │
│ └───web-files
│ dtjava.js
│ error.png
│ get_java.png
│ get_javafx.png
│ javafx-chrome.png
│ javafx-loading-100x100.gif
│ javafx-loading-25x25.gif
│ upgrade_java.png
│ upgrade_javafx.png
│
├───nbproject
│ │ build-impl.xml
│ │ genfiles.properties
│ │ jfx-impl.xml
│ │ project.properties
│ │ project.xml
│ │
│ ├───configs
│ │ Run_as_WebStart.properties
│ │ Run_in_Browser.properties
│ │
│ └───private
│ │ private.properties
│ │ private.xml
│ │
│ └───configs
│ Run_as_WebStart.properties
│ Run_in_Browser.properties
│
├───package
│ └───windows
│ icotest.ico
│
└───src
└───icotest
Main.java
This is what build.xml looks like:
<target name="-post-jfx-deploy">
<fx:deploy verbose="true" nativeBundles="exe" outdir="${basedir}/${dist.dir}" outfile="${application.title}">
<fx:application name="${application.title}" mainClass="${javafx.main.class}"/>
<fx:resources>
<fx:fileset dir="${basedir}/${dist.dir}" includes="*.jar"/>
<fx:fileset dir="${basedir}/${dist.dir}" includes="lib/*.jar"/>
</fx:resources>
<fx:info title="${application.title}" vendor="${application.vendor}"/>
<fx:preferences shortcut="true"/>
</fx:deploy>
</target>
No matter what I do - I still get this message during the dist build process (that activates ISS) with the debug flag set to true in the according build.xml file: "Using default package resource [application icon] (add package/windows/icotest.ico to the class path to customize)"
Any idea what I might be doing wrong? Thank you.
After trial and error and using XXL answer i post a more clear way of adding your custom icon into a JavaFX self contained. By the way am using Netbeans 7.3 JDK 1.7u17
1. Begin with creating a folder named package inside the folder(has the same name as your project) found in your project src directory.
2. under the folder package, create the folder windows and this is where you will place your custom icon.please ensure the name of your .ico file is the same as the application name
Note: this could have easily be done in netbeans by creating a new package but for some reason, netbeans does not allow your to name a new package 'package'
Next your add the directory containing /package/windows/.ico to Ant clathpath properties
Clean & Build your project and the final output will look something like this with your custom icon
Found the answer here. It appears that the guidelines posted on the Oracle's website are currently mismatching the actual deployment scenarios available. Namely, when dealing with NetBeans, ant is unaware of the current directory that is presumed to be your root project. As it has been suggested in the according forum thread - simply add the directory containing "package/windows/${projectname}.ico" to ant's classpath and it will pick up the relevant resource, even though the tutorial claims that this should happen automatically due to the existing (?) addition of '.' to the build script.

Resources