Unable to npm run dev

[drdreo]

After cloning the repository and -bower install -npm install ,

i get these warnings:

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: nx-local-server@0.0.2 (node_modules/nx-local-server):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: nx-local-server@0.0.2 postinstall: `./postinstall.sh`
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Exit status 1

which leads to an error when calling "npm run dev" in the terminal: no such file or directory, open 'node_modules/nx-local-server/nginx.conf'

Node version: v6.10.0 Bower version: 1.8.0 npm version: 5.0.1

[lastmjs]

What operating system are you using?

[lastmjs]

I'm only supporting unix-based systems, Linux or Mac

[drdreo]

Using Macbook Pro with macOS, and WebStorm to code.

[lastmjs]

Sweet. So, this is my fault for not making this easier on the end user, but I haven't gotten to it yet. Take a look at the nx-local-server readme: https://github.com/lastmjs/nx-local-server

You might need to install libpcre3 or libpcre3-dev

[lastmjs]

I'll be fixing this eventually here: https://github.com/lastmjs/nx-local-server/issues/2, but for now you'll just have to install them on your own.

[drdreo]

so libpcre3 isn't available for mac. I've found pcre and installed it but still can't install nx-local-server. ./postinstall.sh: line 3: wget: command not found

Seems that shell command isn't supported.

[lastmjs]

You also need to install wget

[lastmjs]

It's a common command-line tool for doing simple get requests

[drdreo]

So many dependencies that have other dependencies. Well, now i can npm install without errorrs. nx-local-server is finally there.

Back to the error in the beginning: Error: Failed to lookup view "error" in views directory .. At Function render

[lastmjs]

When does the error come up? In the Electron console window as you first load the app? Or when you hit one of the endpoints from the browser?

[drdreo]

npm run dev or npm run dev-window then

localhost:3000/
localhost:3000/helloworld
etc.

always the res.render("error") function gets called which leads to the error.

[lastmjs]

Maybe it's the permissions on your views. pug is a layout engine that is going to read files in and produce html files for you. Have you worked with chmod?

[lastmjs]

This isn't best practice, but it might get things to work for now. Try chmod -R 777 views on the views directory.

[lastmjs]

If that doesn't work, log this: pathModule.resolve(__dirname, 'views') somewhere in the AppComponent. It should resolve to the absolute path to your views directory on your machine. If it doesn't we'll need to fix that.

[drdreo]

Couldn't test it earlier. My Progress so far - chmod drwxrwxrwx 8 Andreas staff 272 5 Jun 18:36 views

in the app.component.ts i put the following

const debug = require('debug')('my-application');
const pathModule = require('path');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const mongo = require('mongodb');
const monk = require('monk');
const db = monk('localhost:27017/nodetest1');

console.log(pathModule.resolve(__dirname, 'views'));
class AppComponent {`

ready() {
        console.log(pathModule.resolve(__dirname, 'views'));

still the Failed to lookup view "error" but nothing is logged.

[lastmjs]

No log? Can you log anything from the ready function or before the class? If nothing is logging, it would seem like the component script isn't even running, though the error makes me think the handlers are hooked up

[drdreo]

Nothing. <script src="app.component.ts"></script> is at the end of the server app.

And other components are imported at the top.

Will the components in the template be "executed" before it gets to the app.component.ts and hence, throwing some error and it doesn't even get to the .ts

[lastmjs]

It looks like all of the components are just setting up handlers, not actually running any of them. I don't see why the error would occur unless you hit one of the handlers with a request. Maybe it isn't worth it to get this demo running on your machine, is there a reason you want to use this demo in particular? It's a bit dated, and I wouldn't recommend building an app this way. For example, I wouldn't use server-side templating with pug. I build single-page apps with web components (usually using Polymer), and then I just use the server as an API if I have to. I just hook up a bunch of endpoints that manipulate, store, and return data. What's the scope of your app? If you want, maybe I can point you to a better example project that is simpler and better suited for single-page apps and API servers.

[lastmjs]

Are you using npm run dev-window? If not, the console won't log if you're using scram-engine 0.6.1. Try putting --enable-logging after electron in your npm scripts:

"dev": "electron --enable-logging node_modules/scram-engine/main.js --entry-file app/server/index.html",
"dev-window": "electron --enable-logging node_modules/scram-engine/main.js --entry-file app/server/index.html --window"

[drdreo]

The reason i want to get this example running is, that for my bachelor thesis i want to develop parts of a CMS with only web components server- and clientside. This example fitted this purpose well.

[lastmjs]

Alright then. Did you get anymore logs from --enable-logging or viewing the Electron window?

[lastmjs]

If at all possible we need to see what the __dirname is, I'm thinking that could be the problem

[drdreo]

yes, now i see the console.log();

I always opened a chrome tab and entered localhost:3000, using the electron-window a white window appears and in the electron console the logs appear. WebComponents/nodetest1 is my working folder. __dirname = /Users/Me/WebstormProjects/WebComponents/nodetest1/node_modules/electron/app/server

[lastmjs]

That looks strange, I think webstorm is complicating things. Can you open up a terminal, do a manual clone of the repo, then bower install and NPM install all from the terminal? Then do npm run dev-window and let's see what the logs say.

[drdreo]

thats exactly what i did. I just use it as an editor, everything else is done via terminal.

[lastmjs]

I guess I don't understand the file structure, I don't understand why the __dirname would be in node_modules/electron/app/server. When I do a direct clone and log the dirname, I get something like:

/absolute-path-to/node-tutorial-for-frontend-devs/app/server

There shouldn't be any node_modules in the path, and I'm wondering why the directory is called nodetest1 instead of node-tutorial-for-frontend-devs?

[drdreo]

I guess that was a remaining thing from the original node express example project - deleted everything, created new folder and runned it.

restarting removed some errors. now, in the electron window, it says its running, but there is nothing to see.

[drdreo]

But if we don't get it to work, do you know any other example project with server-side web components?

[lastmjs]

You just need to kill the process on port 5050. There is a left-over Electron server instance running still

[lastmjs]

I don't know the mac command, but in Ubuntu I would do sudo fuser -k 5050/tcp. Search around if that command doesn't work, this might help: https://stackoverflow.com/questions/3855127/find-and-kill-process-locking-port-3000-on-mac

[lastmjs]

All examples that are in existence that I know of are under this project: https://github.com/scramjs

[lastmjs]

I would love to get this one to work for you though

[lastmjs]

I'll work on a better example for you that is more up to date, it can be found here: https://github.com/scramjs/dokku-example

It shouldn't take too long, and it will have the latest express web components, scram-engine, and will use Polymer 2.

[lastmjs]

Also, if you want more reading materials and such, I'm not sure what you've seen yet or not, so here is a list of pretty much everything there is out there on web components outside of the browser (including server-side which is what you're interested in):

• Server-side Web Components article: https://scotch.io/tutorials/server-side-web-components-how-and-why
• Express Web Components: https://github.com/scramjs/express-web-components
• JFive Web Components: https://github.com/scramjs/jfive-web-components
• Scram.js: https://github.com/scramjs/scram-engine
• Universal Web Components article: https://scotch.io/bar-talk/universal-web-components
• Universal Web Components video presentation: https://www.youtube.com/watch?v=2eJkKJMSDCU&t=452s
• Universal Web Components podcast episode: http://thewebplatformpodcast.com/123-universal-web-components
• Server Side Web Components podcast episode: http://thewebplatformpodcast.com/98-server-side-web-components-0

[lastmjs]

Alright, this one is all up-to-date: https://github.com/scramjs/dokku-example

It's a pretty simple client and server together, might suit your needs better. I'll get the one we're working on fully up-to-date as well.

[lastmjs]

And sorry to do this to you again, but I've completed update this repo: https://github.com/scramjs/node-tutorial-for-frontend-devs

I would delete the old one and clone again, then bower install and npm install. I recommend doing this because the updated code uses Polymer 2 and the v1 specs for custom elements and shadow DOM, and the way you write the express handlers is simpler by just using methods, instead of setting functions directly onto the context (this) of the component class.

[drdreo]

Restarting killed the process, i've looked into the examples in scram.js but thought yours is easiest. Thank you very much for the literature. That's what i needed.

So i cloned and installed everything, again ^^ dev-window opens up the electron window, no errors in the console, a message that it listens on port 3000 shows, but the rest stays white, nothing to see.

[drdreo]

Now i tested the dokku-example - no errors and again, a white window appears. Is electron really automatically showing the index.html? How would i access the site in a chrome browser, or do i need to use the electron window?

[lastmjs]

Now just go to localhost and the port in Chrome. The Electron window is just showing you the server itself, and rendering the actual server components, which don't have a GUI right now. If Express is running then you've got yourself a server

[drdreo]

Well thats what i did now and back then with the pug error. Electron says app listening on port:3000 and in localhost:3000 -> Error: Failed to lookup view "error" in views directory

[lastmjs]

Maybe doing something similar to your fix here will solve it. The path that pug is trying to render is probably off

[drdreo]

Yep, oh my gosh. So happy, that it works now. Damn that

__dirname

is totally off on macOS. app.set('views', pathModule.resolve('./app/server/views/'));

works.