Running a package.json file

Asked

Viewed 1,128 times

2

Well, I have a project that has the

package json.

{
  "name": "designimpl",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "browser-sync": "^2.18.8",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.1",
    "gulp-inject": "^4.2.0",
    "gulp-order": "^1.1.1",
    "gulp-sass": "^3.1.0",
    "gulp-uglify": "^2.0.1",
    "gulp-watch": "^4.3.11",
    "main-bower-files": "^2.13.1",
    "run-sequence": "^1.2.2"
  },
  "devDependencies": {
    "gulp-main-bower-files": "^1.6.1",
    "gulp-ng-annotate": "^2.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rshmtud/DesignImpl.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rshmtud/DesignImpl/issues"
  },
  "homepage": "https://github.com/rshmtud/DesignImpl#readme"
}

I need to run the system locally. The system uses Angularjs, Node.js. Looks like it was installed with the Gulp, I think that because there’s a file in the repository called gulpfile.js.

When I open the page index.html the page looks like this: Partes cinzar são apenas textos removidos

Could someone help me run this site? I just want to see the site the way it is.

Code of index.html

<!DOCTYPE html>
<html lang={{lang}} ng-app="App" ng-controller="mainCtrl">
<head>
    <meta charset="utf-8">
    <title>SkipQ</title>
    <base href="/">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">

    <!-- inject:css -->
    <!-- endinject -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500' rel='stylesheet' type='text/css'>
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
    <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCg2cJfEvkDhzke8CMmeC6aLIwApi6jC5E"></script>

    <!--<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>-->
    <!-- inject:js -->
    <!-- endinject -->
</head>
<body class="site" ng-class="{'has-footer': $root.hasFooter}">
<!-- navigation section -->
<div class="container-fluid" style="width:100%;display: flex;min-height: 100vh;flex-direction: column;">
    <section class="navbar navbar-default navbar-fixed-top" role="navigation"
             style="padding-left: 25px; padding-right: 25px;" data-ng-controller="loginCtrl">
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
                <span class="icon icon-bar"></span>
            </button>
            <!--a href="#" class="navbar-brand">SkipQ</a-->
            <a href="#/home"><img src="assets/images/logo.png" style="background-color: white;" alt=""></a>
        </div>
        <div class="collapse navbar-collapse">
            <!--<div class="collapse navbar-collapse" data-toggle="collapse" data-target=".navbar-collapse">-->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/home" data-ng-show="isLoggedIn || !isLoggedIn " class="smoothScroll"
                       translate="HOME"></a>
                <li><a href="#/home#zusammenarbeit" class="smoothScroll">Zusammenarbeit</a>
                <li><a href="#/adminLogin" data-ng-show="!isAdminLoggedIn" class="smoothScroll"
                       translate="ADMIN"></a>
                <li><a href="#/admin" data-ng-show="isAdminLoggedIn" class="smoothScroll" translate="ADMIN"></a>
                <li ng-show="isLoggedIn || isAdminLoggedIn"><a href="#/orderHistory" translate="ORDER"></a></li>
                <li ng-show="isLoggedIn || isAdminLoggedIn"><a href="#/profile" translate="PROFILE"></a></li>
                <!--
                <li ng-controller="LanguageSwitchController">
                    <select id="language-select" ng-model="selectedlanguage"
                            ng-change="changeLanguage(selectedlanguage.language)"
                            ng-options="i as i.language for i in languages" style="width: 80px">
                    </select>

                    <!--<img ng-src="{{selectedlanguage.imagelink}}" class="img-thumbnail icon-small">{{selectedlanguage.language}}-->
                <!--
                                </li>
                                -->
                <!--
                                <li class="dropdown" data-ng-show="isLoggedIn || isAdminLoggedIn ">
                                    <a class="dropdown-toggle" data-toggle="dropdown">Welcome {{userName}} <b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#/orderHistory" translate="ORDER"></a></li>
                                        <li><a href="#/profile" translate="PROFILE"></a></li>
                                        -->
                <!--<li class="divider"></li>-->
                <!--<li><a href="#">Separated link</a></li>-->
                <!--
                    </ul>
                </li>
                -->


                <li><a data-ng-show="!isLoggedIn && !isAdminLoggedIn" ng-click="open()" translate="LOGIN"></a></li>
                <li data-ng-show="isLoggedIn || isAdminLoggedIn"><a href="" ng-click="logOut()"
                                                                    translate="LOGOUT"></a>
                </li>

            </ul>
        </div>
    </section>

    <main class="site-content">
        <div class="myview" ng-view><!-- VIEWS --></div>
    </main>
    <!-- copyright section -->
    <footer>
        <section id="copyright">
            <div class="row"
                 style="display: flex;  align-items: center;  justify-content: center;background-color: #343434">
                <div class="col-md-4 col-sm-4">
                    <ul class="social-icon">
                        <li><a href="https://www.facebook.com/SkipQ-836575119799276/" class="fa fa-facebook"></a>
                        </li>
                        <li><a href="#" class="fa fa-twitter"></a></li>
                    </ul>
                </div>
                <div class="col-md-4 col-sm-4">
                    <h3 style="color: white !important">SkipQ</h3>
                    <p>Copyright © SkipQ
                        | Design: <a rel="nofollow" href="http://www.tooplate.com" target="_parent">Tooplate</a>
                        | <a href="https://skipq.de/Impressum/Impressum.php">Impressum</a>
                    </p>
                </div>
                <div class="col-md-4 col-sm-4">
                    <div class="ph">
                        <i class="fa fa-phone"></i> +49 (0) 176 83413991
                    </div>
                    <div class="address">
                        <i class="fa fa-map-marker"></i> Robert-Bosch-Strasse 7, 64293 Darmstadt, Germany
                    </div>
                    <div class="email">
                        <i class="fa fa-paper-plane"></i> [email protected]
                    </div>
                </div>
            </div>
        </section>
    </footer>
</div>
</body>
</html>

<script type="text/javascript">
  $('ul.nav li.dropdown').hover(function () {
    $(this).find('.dropdown-menu').stop(true, true).delay(50).fadeIn(50);
  }, function () {
    $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(50);
  });
</script>
  • 1

    Install a webserver. Nginx, Apache, IIS.. then you can access from http://localhost

  • I installed the Node webserver, but when I open it remains the same.

  • What appears in the browser console?

  • @Andersoncarloswoss , Failed to load resource: the server responded with a status of 404 (Not Found)&#xA;localhost/:125 Uncaught ReferenceError: $ is not defined&#xA; at localhost/:125&#xA;logo.png Failed to load resource: the server responded with a status of 404 (Not Found)

  • Please [Edit] the question is to add the code from index.html.

  • @Andersoncarloswoss made

  • There should be no tags script importing the libraries used?

Show 2 more comments

1 answer

3


The presence of a file package.json indicates that the project is a package NPM.

This file contains various data relevant to the project, such as its identification and dependencies, licenses and others. If you installed the Nodejs on your machine, you probably have the NPM installed too - it is part of the installation.

In your case the package has several dependencies. To install them, type the following command in the directory where the file package.json is present:

npm install

Optionally, you can update the dependencies using the following command:

npm update 

The presence of a file gulpfile.js indicates that the project uses the Gulp as the executor of tasks such as processing SASS and Parsing of Coffeescript. In case you haven’t installed it yet, this is the time.

In a Linux environment:

sudo npm install --global gulp

In a Windows environment:

npm install --global gulp

The parameter --global indicates that the Gulp will be installed in the scope of the machine, not the project, making it available for use in other local projects.

Opening your file gulp.js you can observe the tasks defined - for example:

gulp.task('js', function() {
  gulp.src('scripts/*.js')   // Fonte dos arquivos a serem trabalhados
  .pipe(uglify())            // Compacta os arquivos
  .pipe(concat('script.js')) // Concatena o resultado em um único arquivo
  .pipe(gulp.dest('assets')) // E salva o resultado no folder /assets
});

To execute the task defined above, use the following command:

gulp js

If your project has a local server task specification you can also use Gulp to boot it. The Task Force should look like the content below:

gulp.task('connect', function() {
  connect.server({
    root: '.',
    livereload: true
  })
});

If you find a similar task, run it to boot the web server:

gulp connect

The website will then be available at the default address localhost:8080.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.