I am using spring boot as backend and reactjs as frontend. I stored images and videos on server. then retrieve it to front end. when using localhost it works properly. but after i deployed this application on ubuntu server i can't preview images.(but image save process success). In ubuntu my spring boot jar file is located at /root/main/test. But uploaded images saved outside root folder(/upload/image.jpg). so i can't retrive this as full url. such as mydomain.com/upload/image.jpg isn't working. how can i get this image using react js
You can configure spring boot to serve static content:
spring.resources.static-locations=file:/upload
or with code:
#Configuration
#EnableWebMvc
public class MvcConfig implements WebMvcConfigurer {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/upload/**")
.addResourceLocations("file:/upload/");
}
...
Related
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
I am creating a demo react native app that is implementing aeroFS https://github.com/redbooth/react-native-auto-updater library
[An aerofs library is nothing but each time when app opens it will check for update from remote server and if update is available it will download and ask the user to apply for the update without play store].
So far the app is able to download the file but after download i am not able to see any changes in the app.I'm sure the newly downloaded bundle is not used in the activity.
On further checking inside the library i found the following method in ReactNativeAutoUpdaterActivity class (main class):-
#Override
#Nullable
public String getJSBundleFile() {
updater=ReactNativeAutoUpdater.getInstance(this.getApplicationContext());
updater.setMetadataAssetName(this.getMetadataAssetName());
return updater.getLatestJSCodeLocation();
}
The ReactNativeAutoUpdaterActivity extends from ReactActivity which does not have this method.I think this is moved to ReactNativeHost so i knew this is the problem but now should i implement my own react native host class to over ride the method so that once new bundle file is downloaded i can apply it to app.
MainApplication.java
import android.content.SharedPreferences;
import android.preference.PreferenceManager;
.
.
.
#Override
public void onCreate(){
super.onCreate();
SharedPreferences preferences =
PreferenceManager.getDefaultSharedPreferences(getApplicationContext());
preferences.edit().putString("debug_http_host", "128.xxx.xxx.xxx:1234").apply();
}
When using a remote VM, port 8081 is not exposed, so:
npm start -- --reset-cache --port=1234
AppDelegate.m (iOS):
jsCodeLocation = [NSURL URLWithString:#"http://128.xxx.xxx.xxx:1234/index.js"];
I have a back-end which is build on spring-boot and then some custom code from my school built upon that.
The front-end is pure angular application which I serve from a different server trough a gulp serve.
They're only connected by REST calls.
There's already an authentication module running on the backend and to now I need to serve this angular application from the same tomcat server the back-end is running on so it can also use this authentication module.
I've found this about multiple connectors so I copied it as following class to set up multiple connectors:
#ConfigurationProperties
public class TomcatConfiguration {
#Bean
public EmbeddedServletContainerFactory servletContainer() {
TomcatEmbeddedServletContainerFactory tomcat = new TomcatEmbeddedServletContainerFactory();
//tomcat.addAdditionalTomcatConnectors(createSslConnector());
return tomcat;
}
private Connector createSslConnector() {
Connector connector = new Connector("org.apache.coyote.http11.Http11NioProtocol");
Http11NioProtocol protocol = (Http11NioProtocol) connector.getProtocolHandler();
try {
File keystore = new ClassPathResource("keystore").getFile();
File truststore = new ClassPathResource("keystore").getFile();
connector.setScheme("https");
connector.setSecure(true);
connector.setPort(8443);
protocol.setSSLEnabled(true);
protocol.setKeystoreFile(keystore.getAbsolutePath());
protocol.setKeystorePass("changeit");
protocol.setTruststoreFile(truststore.getAbsolutePath());
protocol.setTruststorePass("changeit");
protocol.setKeyAlias("apitester");
return connector;
} catch (IOException ex) {
throw new IllegalStateException("can't access keystore: [" + "keystore"
+ "] or truststore: [" + "keystore" + "]", ex);
}
}
}
Problem is that I don't see or find how I should setup these connectors so they serve from my angularJS build folder.
Upon searching I came upon Spring-Boot : How can I add tomcat connectors to bind to controller but I'm not sure if in that solution I should change my current application or make a parent application for both applications.
My current application main looks like this:
#Configuration
#ComponentScan({"be.ugent.lca","be.ugent.sherpa.configuration"})
#EnableAutoConfiguration
#EnableSpringDataWebSupport
public class Application extends SpringBootServletInitializer{
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
If possible I'd like some more info about what connectors are in the spring-boot context.
If this is not the way to go I'd like someone to be able to conform this second solution or suggest a change in my code.
I'm really not sure enough about these solution that I want to go breaking my application over it. (though it's backed up with github)
Just place your AngularJS + other front-end assets into src/main/resources/static folder, Spring Boot will serve them automatically.
I've been following the tutorial for integrating Spring Security with AngularJS, but it uses Spring Boot. I can get the tutorial examples working, but I need my app to run as a regular MVC application under Tomcat.
The problem is getting the application to route to the index.html page for the initial view. The only mappings I have in the controllers are the REST calls I want to receive from Angular, but I can't seem to get the application to go to the index page. Spring Boot does this automatically, but I'm going to run this as a web app under Tomcat. Trying to go there directly causes a 'No mapping found' error.
I'm using Java configuration and have the antMatchers, etc as described in the tutorial.
Here are a few entries in my config classes to make this happen.
#Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers("/index.html", "/home.html", "/login.html", "/").permitAll()
.antMatchers("/css/**").permitAll()
.antMatchers("/js/**").permitAll()
.antMatchers(HttpMethod.POST, "/user").permitAll().anyRequest()
.authenticated().and()
.csrf()
.csrfTokenRepository(csrfTokenRepository()).and()
.addFilterAfter(csrfHeaderFilter(), CsrfFilter.class);
if ("true".equals(System.getProperty("httpsOnly"))) {
LOGGER.info("launching the application in HTTPS-only mode");
http.requiresChannel().anyRequest().requiresSecure();
}
}
#Configuration
#EnableWebMvc
#ComponentScan("com.mygroupnotifier.controller")
public class ServletContextConfig extends WebMvcConfigurerAdapter {
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/css/**").addResourceLocations("/resources/static/css/");
registry.addResourceHandler("/js/**").addResourceLocations("/resources/static/js/");
registry.addResourceHandler("/*.html").addResourceLocations("/resources/static/");
}
#Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("forward:/index.html");
}
}
As usual the most difficult part of this is getting the leading and ending / on the classes and the html files.
I'm trying to make some simple project with AngularJs using ES6 with Traceur compiler and with Spring Boot as my backend. I already managed to configure my project so it works as I expected. I only have some problems with configuring IntelliJ to see my resources properly.
I put my static resources in src/main/resources/public and configure ResourceHandlerRegistry so that it redirects any unknown request to the main angular application file (I want to use html5 location mode, so it was necessary. I found working configuration in the second answer of this question Spring Boot with AngularJS html5Mode).
The error occurs when I import any of my ES6 modules:
import {appModule as app} from 'resources/app/main.js'; // <- here IntelliJ sees an error, it cannot find such file, but when I run the application it all works as expected
Here I uploaded my whole project: http://www.filedropper.com/spring-boot-test
Could anyone tell me what should I do to get rid of this error in IntelliJ or check what I've done wrong with my project?
btw. I use IntelliJ 14.
Edit:
I had error in StaticResourceConfigurator. It should be:
/* ... */
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/resources/**").addResourceLocations("classpath:/public/");
Instead of:
/* ... */
#Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry
.addResourceHandler("/public/**").addResourceLocations("classpath:/resources/");
But it didn't solve my problem.