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.
Related
Disclaimer: I am not a frontend guy by trade. I am being asked to deploy an Angular application other engineers have created.
I have gone through the process of deploying an Angular application to GitPages and have also tried the handy Angular CLI GH Pages library. However, they both have the same issue, and I'm not sure if it's the application itself or how I am deploying it.
The base page loads fine, but all other resources (image/font files, links to other pages, etc.) do not load properly. This is because they are not using the proper base URL; our corporate GitHub makes us use https://....com/<org>/<repo> as the URL. All resources outside of the base page are not prepending the /<org>/<repo>/ part to the URL, so they are all returning 404s.
My index.html file in docs/ contains the proper base href="/<org>/<repo>/" and the docs/ folder contains all needed images and font files in its assets/ subdirectory, so I'm not sure what gives. I have also copied index.html to 404.html.
Am I missing something? Or is it possible that this web application was not created correctly for GH Pages?
Thanks in advance :-)
Change the base href to index.html only and all will work from there
base href="index.html"
From there it will take the path properly
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.
In my java web application sources generated by Sencha CMD are located in resources folder. I am trying to run application in dev mode (without build) using boostrap.js, so I declared Ext.Manifest and included below in jsp file:
<script id="microloader" data-app="52906e0a-6b39-4de6-b1f2-dc27cf37969e" type="text/javascript" src="resources/bootstrap.js"></script>
With standard configuration microloader tries to load files as if extjs application source files were directly in web root path, which is inccorect as the files are not there:
http://localhost:8080/myapp/classic.json
how to "tell" microloader to look for the files in resource folder, so the request would look like this:
http://localhost:8080/myapp/resources/classic.json
I am able to make this work without using boostrap.js, if I include app.js directly and specify appFolder in Ext.Application. But I want to test different profiles (modern, classic).
I read so many forums that it's not possible to deploy grails application to google app engine because of grails app-engine plugin hasn't been updated for years.And while I was about to give up i found that its possible to deploy project's using intellij app engine plugin so i simply created a new grails app and deploy it using intellij and there it was.http://mine-1150.appspot.com/ but the problem is that its only able to acess index.jsp which is located inside the WEB-INF directory which contains appengine-web.xml ,web.xml and index.jsp only and not my controllers.so since i get passed the hard work can any body tell me how i should be able to access my controllers and that's job well done.FYI this is the index.jsp
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title></title>
</head>
<body>
<h1>hello there</h1>
</body>
</html>
app engine has its own way of deploying application to its platform and in ur case it treats ur project as if it was of pure java.so it will create its own directory and jsp files.so u can deploy it but it wouldnt be running in the way u intended it to run
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.