Zappa Error unable to find view (jade template) - node.js

I am trying a zappa node application and am unable to get it working beyond a trivial example.
I have application.coffee
require('zappajs') ->
#set views: "#{__dirname}/views"
#set 'view engine': 'jade'
#use 'bodyParser', 'methodOverride', #app.router, 'static'
#configure
development: => #use errorHandler: {dumpExceptions: on}
production: => #use 'errorHandler'
#get '/': -> #render 'index'
and i am getting an error. Zappa seems to be prepending a guid to the file name.
example/app/views/7b16eeab-de6f-41b0-b196-8f23f4b7237d/index.jade
Here is the complete trace
Error: ENOENT, no such file or directory '/Users/irfn/project/example/app/views/7b16eeab-de6f-41b0-b196-8f23f4b7237d/index.jade'
at Object.fs.openSync (fs.js:338:18)
at Object.fs.readFileSync (fs.js:182:15)
at Object.rethrow (/Users/irfn/project/example/node_modules/jade/lib/runtime.js:155:27)
at parse (/Users/irfn/project/example/node_modules/jade/lib/jade.js:116:13)
at Object.exports.compile (/Users/irfn/project/example/node_modules/jade/lib/jade.js:163:9)
at Function.exports.compile (/Users/irfn/project/example/node_modules/zappajs/node_modules/express/lib/view.js:68:33)
at ServerResponse.res._render (/Users/irfn/project/example/node_modules/zappajs/node_modules/express/lib/view.js:417:18)
at ServerResponse.res.render (/Users/irfn/project/example/node_modules/zappajs/node_modules/express/lib/view.js:318:17)
at Object.zappa.app.app.(anonymous function).apply.concat.render (/Users/irfn/project/example/node_modules/zappajs/lib/zappa.js:593:33)
at Object.zappa.app.app.(anonymous function).apply.concat.ctx.render (/Users/irfn/project/example/node_modules/zappajs/lib/zappa.js:545:31)
Here is how my package json dependencies are setup
"dependencies": {
"coffee-script": "1.3.3",
"underscore": ">= 1.3.3",
"stylus": ">= 0.28.2",
"zappajs": ">= 0.3.10",
"jade": ">= 0.18.0"
},
"devDependencies": {
"watchr": "*",
"mocha": "*",
"chai": "*",
"request": "*"
},

Came across this myself - did not have the time to track down the cause but there is an easy workaround:
instead of
#get / : ->
#render index: {key:value}
use the more old school connect-style
#app.get '/', (req,res) ->
res.render 'index', {key:value}
Hope this helps you get over the hump.
PS:
Come to think of it, I assume it might have something to do with the way zappa evaluates coffee(k/c)up templates by default. In this case it might be trying to apply that logic to jade which breaks.

Related

Cannot read property 'jquery' of undefined

I have a Rails 6 application with Webpacker. Node packages have been successfully installed with yarn.
The application works locally both in development and production modes with Puma server. But when calling the website on our virtual host, Phusion Passenger fails loading the Bootstrap 4 JavaScript part:
/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:21178
var e = i.default.fn.jquery.split(' ')[0].split('.');
^
TypeError: Cannot read property 'jquery' of undefined
at Object.jQueryDetection (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:21178:32)
at a (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:21183:9)
at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:22435:56)
at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
at Module.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:18176:7)
at Module.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:18179:7)
at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
at /var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:26:98
at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:27:2)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
app/javascript/packs/application.js:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
console.log('Webpacker: START application.js');
require('#rails/ujs').start();
require('turbolinks').start();
require('#rails/activestorage').start();
require('channels');
require('jquery');
// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
// #################### Proprietary configuration ####################
// JAVASCRIPT LIBRARIES
import 'popper.js';
import 'bootstrap';
import '#fortawesome/fontawesome-free';
// CSS OF USED LIBRARIES
import 'stylesheets/application';
// datetime picker
// load "moment" globally to avoid:
// "Error: Tempus Dominus Bootstrap4's requires moment.js. Moment.js must be included before Tempus Dominus Bootstrap4's JavaScript."
// See https://stackoverflow.com/questions/49580266/tempus-dominus-bootstrap4-requires-moment-js-datetime-picker
global.moment = require('moment');
require('moment/locale/de');
// If you require timezone data (see moment-timezone-rails for additional file options)
// import "moment-timezone-with-data"
require('tempusdominus-bootstrap-4');
console.log('Webpacker: END application.js');
config/webpack/environments.js (don't know what's correct here):
const { environment } = require('#rails/webpacker')
const webpack = require('webpack');
environment.plugins.prepend('Provide', // append
new webpack.ProvidePlugin({
$: 'jquery/src/jquery',
jQuery: 'jquery/src/jquery' // ,
// Popper: ['popper.js', 'defaults']
})
);
module.exports = environment
package.json:
{
"name": "myapp",
"private": true,
"dependencies": {
"#fortawesome/fontawesome-free": "^5.15.4",
"#popperjs/core": "^2.10.1",
"#rails/activestorage": "^6.1.4-1",
"#rails/ujs": "^6.1.4-1",
"#rails/webpacker": "5.4.3",
"bootstrap": "4.6.0",
"jquery": "^3.6.0",
"moment": "^2.29.1",
"moment-timezone": "^0.5.33",
"popper.js": "^1.16.1",
"tempusdominus-bootstrap-4": "^5.39.0",
"tempusdominus-core": "^5.19.0",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"devDependencies": {
"webpack-dev-server": "^3"
}
}
When I use
if (typeof window !== "undefined") {
require('popper.js');
require('bootstrap');
require('#fortawesome/fontawesome-free');
}
like in Trying to import Bootstrap on Next.JS but says "TypeError: Cannot read property 'jquery' of undefined", I get another error:
/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1785
return window.document;
^
ReferenceError: window is not defined
at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1785:7)
at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1786:7)
at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:6524:10)
at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1682:110)
at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1772:8)
at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
at Object.<anonymous> (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:1860:7)
at n (/var/www/vhosts/mydomain.com/httpdocs/myapp/public/packs/js/application-2432a12b5b63094eb637.js:8:17)
What am I missing?
Rails applications with Webpacker must not run as Node.js application additionally, although there are some Node packages used with Webpacker. They are only for client-side.
Phusion Passenger on the virtual host was configured not to load frequent application changes of all my numerous trial fixes. That's why the error didn't disappear when I tried the above solution weeks ago already ;-)
https://stackoverflow.com/questions/60198141/trying-to-import-bootstrap-on-next-js-but-says-typeerror-cannot-read-property was correct. Just had to wrap ALL Javascript library loads in application.js into condition:
if (typeof window !== "undefined")

Access swagger path parameters from middleware

How can I retrieve a swagger path parameter from nodejs?
The swagger definition:
/objects/{id}:
x-swagger-router-controller: object.controller
get:
summary: Get object
operationId: getObject
consumes:
- application/json
parameters:
- in: path
name: id
type: string
required: true
What I've tried:
req.swagger.params['id'].value
req.query.id
Is there any dependency I need? My current dependencies are
"dependencies": {
"body-parser": "^1.18.3",
"express": "^4.12.3",
"morgan": "^1.9.1",
"swagger-express-mw": "^0.7.0",
"swagger-tools": "^0.10.4",
"swagger-ui": "^3.20.5",
"web3": "^1.0.0-beta.36"
}
Change this: req.swagger.params['id'].value --> req.swagger.params.id.value.
If you're using express framework and express router you can access request parameters by their name. For example this /objects/{id}: path parameter can be accessed like: req.params.id

Brunch with SugarSS (PostCSS parser)

How can I start using SugarSS parser with Brunch?
Here is the plugins part of my current config:
exports.config = {
...
plugins: {
babel: {
ignore: [/web\/static\/vendor/]
},
postcss: {
processors: [
require("postcss-cssnext")(["last 3 versions"]),
require("precss"),
require("lost")
]
},
cssnano: {
autoprefixer: {
add: false
}
}
}
...
};
And my package.json:
{
"repository": {},
"dependencies": {
"babel-brunch": "~6.0.0",
"brunch": "~2.1.3",
"css-brunch": "~1.7.0",
"cssnano": "^3.5.2",
"cssnano-brunch": "^1.1.5",
"javascript-brunch": "~1.8.0",
"lost": "^6.7.2",
"phoenix": "file:deps/phoenix",
"phoenix_html": "file:deps/phoenix_html",
"postcss-brunch": "^0.5.0",
"postcss-cssnext": "^2.5.1",
"postcss-scss": "^0.1.7",
"precss": "^1.4.0",
"sugarss": "^0.1.2",
"uglify-js-brunch": "~1.7.0"
}
}
The way PostCSS plugin for brunch works is, it's invoked after all the stylesheets were compiled and concatenated into a single file. (Brunch calls that an optimizer plugin)
Support of SugarSS or similar, however, will require creating of a custom compiler plugin, that will only transform sss into normal css.
It's actually easier than it sounds :) Use plugins.md as a plugin API reference. If it helps, take a look at stylus-brunch — https://github.com/brunch/stylus-brunch/blob/master/index.js.
What you'll basically need to change is:
compile() method, to invoke PostCSS with SugarSS parser and return a promise that resolves to an object with at least the data key (which in your case will be a string css)
change prototype.extension to be the extension you want to handle, sss in this case
you probably won't need stylus' constructor() and might not need the css modules support
you can release it so that other people looking to use SugarSS with Brunch won't have do this themselves. Sharing is caring, right? :)
(If you do go that route, it's customary to name brunch plugins with a suffix, like sugarss-brunch. You can also then include it in our list of plugins https://github.com/brunch/brunch.github.io/blob/master/plugins.json)
Hope this clears things up a bit. If you encounter any issues, feel free to either comment there or open an issue on our GitHub http://github.com/brunch/brunch

getting error with ember-fire: Assertion Failed: You must include an 'id' for undefined in an object passed to 'push'

I have a sample notebook app that works with ember-cli's HTTP mocks and also my rails backend using ActiveModelSerializer.
When I hook it to firebase with ember-fire, I am able to register a user (I see it in the dashboard) but when I try to retrieve it by email, I get the following warning:
WARNING: Encountered "0" in payload, but no model was found for model name "0" (resolved model name using ui#serializer:application:.modelNameFromPayloadKey("0"))
then this error:
Error: Assertion Failed: You must include an 'id' for undefined in an object passed to 'push'
at new Error (native)
at Error.EmberError (http://localhost:4200/assets/vendor.js:24735:21)
at assert (http://localhost:4200/assets/vendor.js:14636:13)
at Object.assert (http://localhost:4200/assets/vendor.js:22037:34)
at ember$data$lib$system$store$$Service.extend._pushInternalModel (http://localhost:4200/assets/vendor.js:75316:15)
at ember$data$lib$system$store$$Service.extend.push [as _super] (http://localhost:4200/assets/vendor.js:75302:34)
at push (http://localhost:4200/assets/vendor.js:94940:38)
at superWrapper [as push] (http://localhost:4200/assets/vendor.js:30984:22)
at http://localhost:4200/assets/vendor.js:70210:27
at Object.Backburner.run (http://localhost:4200/assets/vendor.js:9707:25)
I am querying the store using:
export default Ember.Route.extend({
actions: {
login: function() {
this.store.query('user', {
email: this.controller.get('email')
}).then((users) => {
if(users.get('length') === 1) {
var user = users.objectAt(0);
this.controllerFor('application').set('user',user);
this.transitionTo('notebooks', user.get('id'));
}
else {
console.log('unexpected query result');
}
});
}
}
});
Digging in, I can see by setting breakpoint at finders.js#157 I am about to
store._adapterRun(function () {
var payload = normalizeResponseHelper(serializer, store, typeClass, adapterPayload, null, 'query');
//TODO Optimize
records = store.push(payload);
});
push the payload. The adapter payload inspects to
adapterPayload: Array[1]
0: Object
email: "test#test.com"
first_name: "Test"
id: "-K1oINClDw2ylQLww7-p"
last_name: "User"
which is my user. So all's good except for the trace. Not sure about that ID but I am new to firebase; maybe it's ok. It matches what I see in my dashboard.
I haven't done anything special with my serializer -- it's vanilla.
import DS from 'ember-data';
export default DS.RESTSerializer.extend({
});
AFAIK I am using the latest & greatest -- here's bower.json
{
"name": "ui",
"dependencies": {
"ember": "2.1.0",
"ember-cli-shims": "ember-cli/ember-cli-shims#0.0.4",
"ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
"ember-data": "2.1.0",
"ember-load-initializers": "ember-cli/ember-load-initializers#0.1.7",
"ember-qunit": "0.4.9",
"ember-qunit-notifications": "0.0.7",
"ember-resolver": "~0.1.18",
"jquery": "^2.1.4",
"loader.js": "ember-cli/loader.js#3.2.1",
"qunit": "~1.18.0",
"foundation": "~5.5.3",
"bootstrap": "~3.3.5",
"showdown": "~1.3.0",
"firebase": "^2.1.0"
}
}
and my dev dependencies in package.json
"devDependencies": {
"body-parser": "^1.14.1",
"broccoli-asset-rev": "^2.1.2",
"ember-cli": "1.13.8",
"ember-cli-app-version": "1.0.0",
"ember-cli-babel": "^5.1.3",
"ember-cli-dependency-checker": "^1.0.1",
"ember-cli-htmlbars": "1.0.1",
"ember-cli-htmlbars-inline-precompile": "^0.3.1",
"ember-cli-ic-ajax": "0.2.1",
"ember-cli-inject-live-reload": "^1.3.1",
"ember-cli-qunit": "^1.0.0",
"ember-cli-rails-addon": "0.0.12",
"ember-cli-release": "0.2.3",
"ember-cli-showdown": "2.5.0",
"ember-cli-sri": "^1.0.3",
"ember-cli-uglify": "^1.2.0",
"ember-data": "2.1.0",
"ember-disable-proxy-controllers": "^1.0.0",
"ember-export-application-global": "^1.0.3",
"emberfire": "1.6.0",
"express": "^4.13.3",
"glob": "^4.5.3",
"morgan": "^1.6.1",
"nedb": "^1.2.1"
}
Any pointers/help/guidance would be great! I am also new to ember too, so maybe I am missing the obvious?
You need a type key to be returned from your backend, rather than just sending an array. This lets Ember Data know what type of model you're pushing to the store. Your payload should look like this:
users: [
{
email: "test#test.com",
id: "abcdefg"
(...)
}
]
instead of this
[
{
email: "test#test.com",
id: "abcdefg"
(...)
}
]
Alternatively you can explicitly pass in the type and data:
store.push("user", store.normalize("user", response[0]));
(where response is still the array)

requirejs no longer loads cdn scripts after optimization

I'm struggling to get requirejs to work after optimizing with r.js
It works fine pre optimization
I'm following the docs for configuring main.js and the build profile using empty:
However after optimization, CDN scripts are no longer loaded.
public/index.html
<script data-main="editor/js/main" src="editor/js/vendor/require.js"></script>
public/editor/js/main.js
requirejs.config({
baseUrl: "/editor/js",
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",
"order": "vendor/require_order",
"underscore": "vendor/underscore",
"handlebars": "vendor/handlebars-1.0.0.beta.4",
"jquery.mobile.router": "vendor/jquery.mobile.router",
"jquery.mobile": "http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min"
}
});
require(["order!jquery", "order!underscore", "order!handlebars", "order!jam", "order!jquery.mobile"], function () {
//loaded
});
config/build.js
({
baseUrl: "../public/editor/js",
name: "main",
out: "../public/editor/js/main-built.js",
paths: {
"order": "vendor/require_order",
"underscore": "vendor/underscore",
"handlebars": "vendor/handlebars-1.0.0.beta.4",
"jquery.mobile.router": "vendor/jquery.mobile.router",
"jquery": "empty:",
"jquery.mobile": "empty:"
}
})
When I run r.js node config/r.js -o config/build.js
main-built.js is built successfully.
Is there a particular reason why you are loading everything using the order plugin?
Were you having load order problems in your built javascript?
If you load jQuery mobile normally (without the plugin) your "empty" configuration should take effect.
require(["jquery", "underscore", "handlebars", "jam", "jquery.mobile"], function () {
http://requirejs.org/docs/optimization.html#empty
You will also need to define the dependency chain for jQuery.mobile.router
requirejs.config({
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min",
"order": "vendor/require_order",
"underscore": "vendor/underscore",
"handlebars": "vendor/handlebars-1.0.0.beta.4",
"jquery.mobile.router": "vendor/jquery.mobile.router",
"jquery.mobile": "http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min"
},
shim: {
"router": {
"deps" : ["jquery.mobile"]
},
"jquery.mobile" : {
"deps" : [ "jquery.mobile.router"],
"exports": "$.mobile"
},
"jquery.mobile.router": {
"exports": "$.mobile.Router"
}
}
});
see the answer to this question:
Require.js with jQueryMobile-Router
I hope that resolves your issues with requirejs, I've found it to be a very powerful and useful tool, once you get used to its structure.
_Pez

Resources