Tomcat, Grunt build

Question

I am using grunt for my angular js app, and tomcat for my server side.

Whenever needed, in dev env, I run Grunt build, takes dist folder and put it in tomcat webapp folder.

However, I have a weird issue. URLs within the app work only if I click on them from an HTML page.

e.g. if I type http://localhost:8080/upload - I will get 404 page not found error, however if from index page - http://localhost:8080 , I click on a link in page that leads to upload it works fine.

What could be the problem?

If I run the app on node.js, the links work perfectly! just on Tomcat it doesn't work as expected.

EDITED

I define the urls like this in angular js

angular.module('angularjsApp')
  .config(function ($stateProvider) {
    $stateProvider
      .state('upload', {
        url: '/upload',
        templateUrl: 'app/upload/upload.html',
        controller: 'UploadCtrl'
      });
  });

have you configure properly in `web.xml` may be that could me reason cause of which it unable to find paths — Arpit Srivastava, Jan 05 '15 at 07:50
it's a standard web.xml that I have been using in all my apps what else needs to be configured? — Dejell, Jan 05 '15 at 07:54
it means that I have to define everything twice? in client and backend? and what if I need to send parameters from client and the client handles it :( ? — Dejell, Jan 05 '15 at 08:03
then try `http://localhost:8080/#/upload` then it will serve from angular code — Arpit Srivastava, Jan 05 '15 at 08:05
that works! do you want to write it as an answer? but what if a search engine refers to my page? it will refer to /upload or /#upload? — Dejell, Jan 05 '15 at 08:08

score 1 · Answer 1 · answered Jan 05 '15 at 08:18

1

In order to server by AngularJs then add /#/ after the domain and make sure html5 mode default enabled is false($locationProvider.html5mode).Below the example for your app to serve content from client site(angular-js)

http://localhost:8080/#/upload

answered Jan 05 '15 at 08:18

Arpit Srivastava

2,249
1
16
28

how would the search engine will act? if it leads to /upload I will get 404. if I write rewrite rule it will be infinite.. – Dejell Jan 05 '15 at 08:32

Tom · Accepted Answer · 2015-01-05T16:33:44.937

1

The way you have angular setup its using history push state to navigate, changing the browser's URL without actually causing the browser to re-fetch its content from the back end.

So using push state the in the browser angular can navigate just fine, but when a request is actually sent to the server it responds 404 as you have nothing there to serve your HTML.

There are two solutions to this:

Switch to use #! urls so that from the server you're always getting the same URL (see other answers).
Update your server to serve the same static HTML for all paths (this answer).

You need the servlet that's sending back your initial HTML content to do so for all routes - so mapped to /* rather than just / so any path it's given always returns the same HTML.

So your web.xml has a servlet that looks like this that's returning:

<servlet>
    <servlet-name>StaticHtmlServlet</servlet-name>
    <servlet-class>com.example.StaticHtmlServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>StaticHtmlServlet</servlet-name>
    <url-pattern>/</url-pattern>
    <url-pattern>/*</url-pattern> <!-- so this is what's added -->
</servlet-mapping>

edited Jan 05 '15 at 16:33

answered Jan 05 '15 at 08:40

Tom

43,583
4
41
61

I don't understad. can u pls explain more? – Dejell Jan 05 '15 at 08:51
1

Explained a bit more. – Tom Jan 05 '15 at 16:36
An example of the servlet: https://github.com/thaggie/drop-angular/blob/master/src/main/java/com/demo/AngularServlet.java – Tom Jan 06 '15 at 18:26
An example of the template: https://github.com/thaggie/drop-angular/blob/master/src/main/resources/angular.html – Tom Jan 06 '15 at 18:27
I know that it's old, but I need to use it now - what is the config URL parameter? – Dejell Jan 18 '16 at 12:30
You mean https://github.com/thaggie/drop-angular/blob/master/src/main/java/com/demo/AngularServlet.java#L27 ? that points to where the client static files are. – Tom Jan 18 '16 at 19:36
Thanks. so angular.html should be as it is? – Dejell Jan 20 '16 at 11:58

score 0 · Answer 3 · answered Jan 05 '15 at 07:48

0

Are the links actual standard HTML links? If Tomcat doesn't answer for http://localhost:8080/upload, then maybe it's not a GET request.

answered Jan 05 '15 at 07:48

Kayaman

72,141
5
83
121

Tomcat, Grunt build

3 Answers3