I am new to protractor. I have configured Gulp and protractor for my app. My app structure looks like this:-
my_app
|
---WebContent
|
----css folder
----3rd party folder
----e2e tests folder
----css folder
----js folder
----css folder
----WEB-INF folder
----META-INF folder
----**index.html**
My gulp task looks like this
gulp.task('connect', function() {
connect.server({
root: '../',
port: 8000
});
});my index.html looks like this
<!DOCTYPE html>
<html ng-app="app"ng-controller="appController">
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/bootstrap/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/theme/css/uigrid/ui-bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/angularjs/ui-grid.min.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/theme/css/uigrid/loading-bar.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/3rd-party-js/angularjs/slider/slider.css"/>
<link rel="stylesheet" type="text/css" href="/my_app/css/app.css"/>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<header>
<div class ="header-panel"><span class="glyphicon glyphicon-info-sign"></span> Environment:{{constants.environment}} </div>
<div id="logo"><a href="/my_app/"> <img src="/my_app/images/logo.gif" alt="Logo"/></a></div>
<div class="menu">
// some stuff here
</div>
</header>
<div class="full-fit" ng-view></div>
<script src="/my_app/3rd-party-js/jquery/jquery-1.9.1.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-idle.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/lodash.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-animate.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-animate.min.js.map"></script>
<script src="/my_app/3rd-party-js/angularjs/ui-bootstrap.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular.min.js.map"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-route.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/angular-resource.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/loading-bar.js"></script>
<script src="/my_app/3rd-party-js/angularjs/ui-grid.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/momentjs.min.js"></script>
<script src="/my_app/3rd-party-js/angularjs/slider/slider.js"></script>
<script src="/my_app/3rd-party-js/angularjs/multiselect/multiselect.js"></script>
<script src="/my_app/3rd-party-js/angularjs/multiselect/multiselectsingle.js"></script>
<script src="/my_app/3rd-party-js/bootstrap/bootstrap.min.js"></script>
<script src="/my_app/dist/app.min.js"></script>
</body>
</html>Problem: When I run gulp webserver, it shows me the directory listing. Ok here but when I want to access index.html (http://localhost:8000/my_app/WebContent/index.html), it refuses to recognise it as AngularJs app and load a crude html page with no css or other embeded htmls. My index.html referes to root relative URLs and works fine on tomcat or any other server but can't get this working using gulp. Ultilmate goal is to write some protractor e2e tests but connectivity is established. Any pointers?