Given a jQuery Mobile app with several pages
Home.html > Profile.html > Registration.html > ...
How do i set up my app so Home is the page that loads first and is presented to the user when they launch the app on their mobile?
It depends on what are you doing.
If you are creating a basic mobile web page that this depends on your web server. If you are working with Apache web server you would change httpd.conf and replace this:
DirectoryIndex index.html
with this:
DirectoryIndex index.html main.html
Or if you don't have access to your web server you would create a .htaccess in your project directory and do same thing as above. Read more about it here.
On the other hand, if you are working with Phonegap then all you need to do is change location Phonegap looks for app initialization.
This is Android example:
super.loadUrl("file:///android_asset/www/main.html");
Read more about it here.
But you should stick to standards and rename main file to index.html
iOS is little bit different, unlike Android, you need to change some configurations thus forcing iOS to load different file then index.html.
In Classes folder open AppDelegate.m and change this:
self.viewController.startPage = #"index.html";
to this:
self.viewController.startPage = #"main.html";
Related
I am trying to host a React site from a Play Framework server. The React front-end is developed in a separate project and its build artifacts (static html/js/css/etc. files) are copied into my Play project's public folder.
Now I tried navigating to e.g. /page1 (where that's a React route), but I get a 404 because of course the server does not have such a route.
What I want is to replicate nginx's try_files $uri /index.html kind of functionality - if the path that's being asked for can be served (i.e. it corresponds to an asset the server knows about), it is served. Else, serve the contents of index.html without rewriting the url, so that React's routing can work.
I've tried getting this to work with just the routes file and also as a controller (with an if/else). I haven't been able to exactly replicate what in nginx is a one-liner. How could I do this?
As #vdebergue says, you can get a simplified version of what you want by adding a catch-all at the bottom of your conf/routes file.
However if you have other files in public that you'd like to still be served up correctly (for example, image files), you need to use something a little more powerful.
I wrote about this in my blog in July, but as per Stack Overflow convention, I'll expand upon it here as well. Basically, you can copy this Gist, which declares a FrontEndServingController.
The key functionality that this controller gives above the built-in Assets controller is that on first use, it recursively scans your public directory to find real files, so it knows when to serve them up, and when to serve up index.html (your React app).
Then you use it in your routes file like this:
GET / controllers.FrontEndServingController.index
GET /*file controllers.FrontEndServingController.frontEndPath(file)
You can do it simply in the route file. At the bottom of the file, add this catch all rule:
# your other routes above
# ...
GET /$any<.*> controllers.Assets.at(path="/public", file="index.html")
I've created this project through Spring Boot. It's a full stack web app that takes information from a user, validates it, sanitizes it, authorizes it, and then sends it to a database. It also can retrieve data from a database.
The problem is that, when the project runs, it should open the home page automatically. Instead, I have to navigate to it manually through a browser, resulting in Access Control Allow Origin issues (as it appears that AJAX is being sent cross origin).
My current directory structure is like this:
C:\Users\workspace\Repository\Project\src\main\resources\templates
Within this templates folder, I have my webpages and config folders. These config folders contain the Javascript files.
I've looked at other projects I've created, and directory structure is very different, but they all use jsps. They look like this:
C:\Users\workspace\CapstoneProject\src\main\webapp\jsp
This directory has all the jsps in it, and they start with the project.
What is the appropriate directory structure so that they start with the project? I've googled this and looked on Spring's website but have found nothing.
The location is less important and it depends on your ant/maven/gradle/script of building your artifact for example War file which it should be copied to webapps folder and then folder for resource type as jsp/css/js/html
Static resources as html can be outside your war in a separate resource folder.
According to tomcat it depends on your size of the application:
*.html, *.jsp, etc. - The HTML and JSP pages, along with other files that must be visible to the client browser (such as JavaScript,
stylesheet files, and images) for your application. In larger
applications you may choose to divide these files into a subdirectory
hierarchy, but for smaller apps, it is generally much simpler to
maintain only a single directory for these files.
I am trying to have a error.html error page in my Java WebApp with web.xml entry as below:
<error-page>
<location>/error.html</location>
</error-page>
having a directory listing as:
--App
-- index.html
-- error.html
-- css/
-- ...
-- js/
-- ...
-- img/
-- ...
-- folder/
-- index.html
When I enter an address say:
/App/some-wrong-address or /App/folder/some-wrong-address
In both the cases I am able to see the Error Page called in as part of 404 error, but in latter case I am not getting my resources like caa, js, or img pulled up.
I understand that the resources are called relatively with ./... path and in the second case it is expecting it to be ../... because of directory change, but I want to OVERCOME this thing, I am not directly working on production server and I cannot use exact URL of everything with localhost as it will have to change later everywhere.
Let me know how can I do this?
I am using Tomcat 8.0.28 and WebApp version is 3.1.
The key is to correctly produce all of the HTML that your webapp produces. The HTML must have the correct URLs (note: they are URLs, not paths) in the elements that refer to other assets (CSS, images, javascript).
You are correct that putting the absolute URL of your production system in your source files is not a workable solution.
In a JavaEE web app I worked on, we used JSF Facelets as the templating system for producing our HTML. In that we wrote each URL like this:
<script src="#{request.contextPath}/foo/bar/baz.js" />
<img src="#{request.contextPath}/img/something.png" />
This allows any template, at any location in the URL hierarchy, to reference any asset. The JavaEE app server handles filling in the correct context path so that the resulting URL the browser handles is correct regardless of where it is hosted.
application.getContextPath() will give you page context,and you can base ur urls accordingly after that..will work on local server as well as deplyment server..
e.g: ... href=" <%=application.getContextPath()%>/css/yourcss.css" ... etc.
N.B.: its a good idea to design your error page in a way that it as no dependencies to any other files..styling and resources in that case should be absolute or inline and images if any should reside in the same folder as your error page
I upload an image from hard drive and then store it in some folder in my app.
But the image isn't displayed immediately on my JSP, it is displayed only after I restart the app.
I guess that's because when the app resources are loaded, required image file doesn't exist in the destination folder yet.
So, I think that reloading app resources programmaticaly immediately after storing the image file into the destination folder will solve my problem, but I don't have a clue how to do it.
Update 1:
Part of jsp were the image is asked for:
<img src="${pageContext.servletContext.contextPath}/img/${imageUrl}" />
where imageUrl is the image file name with it's extension.
The images are stored in MyProject/src/main/webapp/img/
Could anyone help me?
Thanks in advance.
I see.. Thanks.
Here is what happens (IMHO :) ) :
During the JSP processing the variable gets resolved to some static path and gets passed to the browser.
Browses renders the static content here, once it sees the path it issues additional http request to the server, but it seems like your server can't find your image statically.
Its due to the fact that you Can't change the war physical structure once it gets deployed.
Think just like you work with a file based representation of WAR and not with exploded directory.
Now what you can do?
Try to create a resource servlet that will get the request to bring the binary image and will return it.
Register this servlet in your web.xml with path like,say, /resource and make it get the get parameter imgName
Example
<img src="resource?imageName=${imageNameYouWant}" />
In your jsp instead of static content in img src tag call the servlet with image as a parameter.
When browser sees this it issues a regular request like before but this time it gets processed by your resource servlet and it will bring the image.
Another thing I would try is just to move the images folder outside the webapp directory.
This directory is tracked by your web container automatically but there is no reason to store the images there as well.
You do like this:
Create a directory like: /myapp/images
You'll still need to create some component on the server side. But this time it can probably be done by creating some configuration on the web server side (no custom servlet).
I'm not sure this will work when you use the first approach...
In JSP point on the server as I've already explained above.
It its an enterprise serious application I would recommend the first approach in conjunction with storing the images in the database but its a different story :)
Hope this helps
I have a standalone simple java web application with servlets and jsp, say the name is FileDisplay I am access its home page through url - http://localhost:8080/FileDisplay/index.jsp.
What the application essentially does is, retrieves a list of file names(.xml's and .pdf's) with complete path. These files are stored in various external directories, say D:\ABCD, D:\XYZ, D:\PP\2012\08 etc but on the same machine as the web application just on a different drive. So the return list is something like-
D:\ABCD\filename1.xml
D:\ABCD\filename2.xml
D:\ABCD\pdf1.pdf
If I use a simple <a href=""> in the jsp then it doesnt work. in the viewsource it looks like -
file1
I think it is beacause these files are not part of the webapp, so the container doesnt think it is local and hence unable to open them. When I place the mouse pointer over the link, the status bar shows as file:///D:\ABCD\pdf1.pdf. I also tried prefixing file:/// in the href, even then it doesnt work. So I tried a few other things.
One thing I tried is setting the Context in Tomcat's server.xml but even that doesn't seem to work. I am using eclipse to build and deploy and run the tomcat, so the server.xml I modified for this context is one within the eclipse workspace.
The setting I used is -
<Context docBase="D:/ABCD" path="/File-Display/NB" reloadable="true"/>
I have another context set for the main application which is -
<Context docBase="FileDisplay" path="/FileDisplay" reloadable="true" source="org.eclipse.jst.j2ee.server:FileDisplay"/>
What am I doing wrong here?
Does it explain a bit more now?
I think you are on the wrong way.
If you want to provide access to different files distributed in your file system create controller (servlet) that accepts URL, reads appropriate file and writes it to the response output stream.
This way you can control access to your resources, make them secure, etc. You will be able to modify your application easily (e.g. if you change the files location). Etc, etc.