Saturday, 20 May 2017

express+nodejs routes aren't working under node-webkit/nw.js

I have made a really simple app using guidebox api with guidebox node library. My code is working completely fine when I run the app inside browser but when I try to package it with node-webkit/nw.js it doesn't return any results or show anything.

What have I done till now? I tried to use the sdk version of nw.js to debug the app. The only thing I could find in console was this and I didn't understand a bit of it. Why it is showing like this. Also, why there is an error in routes ?

chrome-extension//...something/searchContent/search=fun

enter image description here

guidebox.js // client side script

    $('#searchTerm').on('submit', function(e) { // search movies
    e.preventDefault();
    $('#searchResults').empty();
    var query = $('#inputField').val();
    $.ajax({
        type: 'GET',
        data: { search: query },
        url: '/searchContent',
        success: function(data) {
            for (var i = 0; i < data.results.length; i++) {
                var source = data.results[i].poster_120x171;
                var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
                img.attr('src', source);
                img.appendTo('#searchResults');
            }
            console.log(data);
        }
    });
});


$('#getMoviesButton').on('click', function() { // get latest movies
    $('#movieResults').empty();
    $.ajax({
        type: "GET",
        url: "/getMovies",
        dataType: 'JSON',
        success: function(data) {
            for (var i = 0; i < data.results.length; i++) {
                var source = data.results[i].poster_120x171;
                var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
                img.attr('src', source);
                img.appendTo('#movieResults');
            }
        }
    });
});

app.js // server side

` 
// init project
var express = require('express'),
    path = require('path'),
    app = express(),
    Guidebox = require('guidebox')('ca49220ce9cfc67411c43a9074c99353579ef6de', 'JP'),
    __dirname = "";

// we've started you off with Express, 
// but feel free to use whatever libs or frameworks you'd like through `package.json`.

// http://expressjs.com/en/starter/static-files.html 
app.use(express.static(path.join(__dirname, '../GuideBox')));

// http://expressjs.com/en/starter/basic-routing.html
app.get("/", function(request, response) {
    // response.sendFile(__dirname + '/views/index.html'); 
    response.sendFile('index.html', { root: path.join(__dirname, '../GuideBox') });
});

app.get("/searchContent", function(req, res) {
    var searchQuery = req.query.search;
    console.log(searchQuery);
    Guidebox.search.movies({ field: 'title', query: searchQuery })
        .then(function(data) {
            res.send(data);
        });
});


app.get("/getMovies", function(req, res) {
    Guidebox.movies.list()
        .then(function(data) {
            res.send(data);
        })
        .catch(function(e) {
            console.log(e);
        });
});

app.listen(3030);
console.log("my server is running...");
`

index.html // front end ui

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Guide Box Demo</title>
    <link rel="stylesheet" href="css/custom.css">
    <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
</head>

<body>
    <div>
        <h1>GUIDEBOX DEMO</h1>
    </div>
    <div id="col-one" class="widthClass">
        <form id="searchTerm">
            <input type="text" id="inputField" name="search" placeholder="search content here... " maxlength="120">
            <button type="submit" id="searchButton"><b>SEARCH</b></button>
        </form>
        <br>
        <br>
        <br>
        <div>
            SEARCH RESULTS:
            <br>
            <div id="searchResults"></div>
        </div>
    </div>
    <div id="col-two" class="widthClass">
        <button type="submit" id="getMoviesButton" value="MOVIES"><b>GET MOVIES</b></button>
        <br>
        <br>
        <br>
        <div>
            MOVIES RESULTS:
            <div id="movieResults"></div>
        </div>
    </div>
    <script type="text/javascript" src="js/guideBox.js"></script> 
</body>

</html>



via Ryder

No comments:

Post a Comment