I have a Spring Boot backend and ReactJS front end, all builds and runs fine until I deploy to a tomcat external server.
In the index.html page which gets generated via the npm run build it is creating paths as below (this is part of index.html):
<script src="/static/js/2.507eac03.chunk.js"></script>
So, when the index.html is loaded, it cannot locate /static/js/2.507eac03.chunk.js because it is missing my application context folder (where my webapp is) - is this something in Spring boot I need to do in order for it to work?
PS. Removing the / makes it work as it then picks up my application context folder:
<script src="static/js/2.507eac03.chunk.js"></script>
Thanks
There is a neat and simple HTML solution for your problem:
<base href="/your/context/location" target="_blank">
If the tag above is in your head, then you can refer to locations in the manner you desire.
Related
I have a react app which works perfectly fine.
However we are pushing code after NPM BUILD and deploying the code manually via SFTP
We can see the JS and CSS files have different names.
However the browser keeps downloading css and js files form cache, even if I disable cache in the browser.
I tried deleting all files in FTP, and magically the website keeps working? so it looks all the files are retrieved from the browser cache even if nothing exists in the server
I tried stopping and starting the azure website, but didnt make any difference
I tried cleaning the browser, cache, history, etc, no difference.
I wonder if I need to setup something in web.config, or in Azure website settings to make this works
This seems to be not an issue with Azure app service (Web app), you need to remove the caching of the react app with the following steps
Step 1: adding the following to in index.html
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Step 2: inserting the following to the js
import { unregister } from './registerServiceWorker';
and call
unregister()
Reference Answer
It depends on how your app is configured, but I would not recommend disabling cache on the JS & CSS. Instead, it's best to add some version-dependent information to the file name so every time the JS or CSS update the file name changes.
Last time I worked on a web project we had it such that our JS & CSS had a content hash at the end. Something along the lines of main.205199ab45963f6a62ec.js instead of just main.js. Also note that you don't even have to manage that hash yourself, as there are ways to get ASP.NET or webpack (etc...) to update the reference in the HTML/JSX for you.
Here's webpack's page about it: https://webpack.js.org/guides/caching/
Coming from a PHP background, I used to have an index.php which does two things:
serve the webpage if no parameters were set;
or serve JSON data when a specific POST parameter was included in the request.
Something like this:
// -- index.php
<?php
if ($_POST["some_parameter"]) {
...
echo json_encode(someArrayData);
exit(0);
}
?>
<html>
...
</html>
I have built the complete frontend application with npm, webpack, webpack-dev-server, and react. Having completed the first part, how can I effectively serve JSON data instead of HTML when a request includes a specific POST parameter?
I can see 2 ways of doing this:
Build the frontend as usual and everytime I build the bundle, modify index.html, inject my PHP code in it, and rename it to index.php. I then would have to run this folder via apache or nginx, so I'd be able to run the index.php script. This method is downright ugly and is probably the worst way to do it.
Run a separate PHP server which just serves data or redirects to the static webpack-generated build. All requests should then start from this server, and this server determines whether to serve data or redirect to the frontend. The problem comes to neatly passing the POST data received from the request to the static react app. As far as I know, the only way to do this would be to include a URL (GET) parameter to the redirect and manually parse it with javascript on the frontend. This is a dirty solution, in my opinion.
So, to summarize:
I need an efficient way to get POST data in a react/webpack/webpack-dev-server environment.
It should work with my hot-module-replacement dev setup.
I'm fine with switching to a node-based backend like express.
There shouldn't be any ajax involved in the static react app.
Any ideas? There has to be a way to do this properly.
UPDATE: I solved this by simply copying an index.php from my source directory to my build directory via the webpack config. I serve the build folder to a PHP server and keep a webpack --watch building my source.
I lose built-in features like auto-reload and css injection, but it's worth the convenience of not having to implement SSR for a very simple task (getting a single POST variable).
For anyone interested, I also added 2 npm scripts:
npm run start runs my original webpack-dev-server with hot-reload, serving static content including a static index.html file
npm run static runs the webpack --watch which copies the index.php file to the build directory
This lets me have hot-reloading when developing frontend, and allows POST data fetching when programming logic.
It's easy, convenient, and works on most web hosting providers.
My application works fine when I was running fine in local iis express. The application was running in the root url like 'http://localhost:61975/login'.
But in the web server the application was deployed in a folder and now I got the error 404 for all pages, scripts and content, because the app is ignoring the folder.
For instance:
Should be: http:\www.mydomain\folder\app\controller\mycontroller.js
as is: http:\www.mydomain\app\controller\mycontroller.js ERROR 404.
I already try to put the tag , but does not work too.
Any help, please?
Tks
If you are using html5mode: $locationProvider.html5Mode(true) you should be setting the HTML base tag:
<base href="/" target="_blank">
in your HTML header. This is a common reason why some scripts and assets are ignored.
Also refer to this question and see if it helps
I am using Spring Tool suite
Where my directory Structure is :
MyAPP
->src
->main
->webapp
->WEB-INF
->js
angular.js
->spring
->views
login.jsp
Now in login.jsp I have to access Angular.js but it is not Accessable
I am using
login.jsp
----------
<script src="/MyApp/src/main/webapp/WEB-INF/js/angular.js"></script>
Once compiled, assembled in a war and deployed to your web container (which your IDE is doing it for you), the root of the application is the webapp folder. Since a Java webapp is deployed under a context path, you need to prepend this context path to the URLs you use:
<script src="${pageContext.request.contextPath}/WEB-INF/js/angular.js" />
or, with the JSTL
<script src="<c:url value='/WEB-INF/js/angular.js'/>"></script>
But even that won't work, because everything under WEB-INF is inaccessible from the outside, by design. So you must put your JS files outside of WEB-INF.
This shows a serious lack of understanding of how Java webapps are, what's their structure, etc. You should familiarize with these basic things before going further.
Creating a new Ext JS 4.1.1 app based on the file structure section in Sencha's MVC Application Architecture guide I end up with this structure:
/wwwroot
/myapplication
/app
/controller
/view
app.js
/extjs-4.1.1
The app.js file contains:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
appFolder: '/myapplication/app',
autoCreateViewport: true,
name: 'MyApplication',
controllers: [
...
]
});
All fine. I then include the app.js to be outputted in my server-side MVC application (not to be confused with the client-side Ext JS MVC structure). The language used and structure of the server-side application is of no importance to this question, but the result of the output is. In development, the URL of the application is:
http://servername/someidentifier1/someidentifier2
As in many applications, mod_rewrite is used to give meaning to the identifiers and map the URL to server-side code. These identifiers do not map to "physical" directories. The output of this URL is:
<!DOCTYPE html>
<html>
<head>
<title>MyApplication</title>
<link href="/extjs-4.1.1/resources/css/ext-all-debug.css" media="screen" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="/extjs-4.1.1/ext-debug.js"></script>
<script type="text/javascript" src="/myapplication/app.js"></script>
</head>
<body>
</body>
</html>
Ext JS is not at the default recommended location, being /wwwroot/myapplication/extjs-4.1.1, but instead one level up since it is shared between multiple applications. If you look back at the app.js above, you also notice the appFolder setting which needs to be set in order for this to work with the "non existing" URL.
This all works fine in development, but the next step is to generate a "build" of the code with the Sencha SDK Tools (question is based on version 2.0.0 Beta 3 for Windows).
This is where it goes wrong. I take these steps:
Command line I go into the /wwwroot/myapplication directory.
I execute sencha create jsb -a http://servername/someidentifier1/someidentifier2 -p myapplication.jsb3 to generate a jsb3 file.
I execute sencha build -p myapplication.jsb3 -d .
The build fails. In this case because it tries to find the custom code for e.g. controllers in the path c:\...\myapplication\myapplication\app\controller: the current path + the appFolder setting. You would assume running it one level higher would be better, but then it cannot find the (shared) extjs-4.1.1 directory.
I would guess time will make the Ext JS MVC structure and SDK Tools more flexible and deviating slightly from the default structure is not recommended. All acceptable, but on the other hand: integrating Ext JS 4.x (Ext JS in an MVC way) with URL rewriting (mod_rewrite) must be a very common practice too?
Any suggested working set up/structure would be highly appreciated.
Goals should be:
No manual editing of the jsb3 file.
Keeping the extjs-4.1.1 directory at the top level to be shared among applications.
Having no app.html file since it is never used in server-side MVC applications and would otherwise require manual updates.
A nice extra would be to have the content of app.js inside the server-side generated HTML since it would then be able to receive dynamically generated parameters.
Couple things.
First - you don't need to specify absolute path for ExtJs library and for your app in the loader.
...
appFolder: 'app' // should be enough
...
Second - as for differences between build and production - I ended up having two .html files - index.html and index-dev.html. These files don't get changed (once you set them up) so it's not a problem to keep them in sync.
You use index-dev.html for your development needs, debug and also for build process. Basically this file is configured for your local development environment.
index.html just uses combined and minified version of your app.js and configured for production deployment.
Using mod rewrite you can use a slightly modified .htaccess file from Symfony
<IfModule mod_rewrite.c>
RewriteEngine On
#<IfModule mod_vhost_alias.c>
# RewriteBase /
#</IfModule>
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ app.php [QSA,L]
</IfModule>
This file let you
get resource from server if they are real files (css, js, images, etc.)
convert url parts to query parameters if there aren't matches on server filesystem.
This should work on your setup, just change the app.php line to your application entrypoint
for directory setup, yours is fine, just a couple of things:
your SDK tools are outdated, since you can download:
http://www.sencha.com/products/sencha-cmd/download/ (v3.0.0)
following docs at http://docs.sencha.com/ext-js/4-1/#!/guide/command you can get a "build" with the class you need, but in the end or you manually switch between development / production javascript file, or you switch using environments variables in your code.
Actually I think you could use a "fake" index.html in build directory to be modified by building tool then in production code you can mimic the code generated by sencha build.
Creating a index.html file to generate the project file will be a way to go. I also found that sencha architect is very rigid and hard to use. The most annoy thing is that I can't use the external editor to edit the generated code. Everything have to be done in the designer, which is fine if the designer can provide every functionality I need. But it can't.