Frage zu EJS Template Engine

[alphakanal]

Hi!

Baue mein erstes Node Projekt zum x-ten mal um bzw. neu auf.

Aber die finale Struktur ist ( hoffentlich ) mittlerweile grob fertig. Werde auf jeden Fall die Template Engine EJS verwenden, da diese mir am sympatischten ist, da sie für mich am nächsten an HTML dran ist.

Jetzt verstehe ich nur eines noch nicht so recht:

1. Meine views ( index, hilfe, drucken, speichern, login ) sind in src/views/*.ejs
2. In die views werden diverse Informationen wie Navigation, Title-Tag usw. gefüllt
3. Entrypoint ist app.js
4. Meine Javascript-Dateien werden gebundelt und in den public/assets/js gelegt

app.js :

var express = require('express');

var app = express();

var port = process.env.PORT || 8080;

var hilfeRouter = require('./src/routes/hilfeRoutes'); // Routinen für mysite/Hilfe aufrufe
var speichernRouter = require('./src/routes/speichernRoutes');
var druckenRouter = require('./src/routes/druckenRoutes');
var loginRouter = require('./src/routes/loginRoutes');

app.use(express.static('public'));

app.set('views', './src/views');
app.set('view engine', 'ejs');

app.use('/Hilfe', hilfeRouter); // wenn als url:  mysite/Hilfe aufgerufen wird dann -> hilfeRouter ausführen ( routes/hilfeRoutes.js)
app.use('/Drucken', druckenRouter);
app.use('/Speichern', speichernRouter);
app.use('/Login', loginRouter);
app.get('/', function (req, res) {
    res.render('index', {
        title: 'Mein Title', nav: [
            {
                Link: '/',
                Text: 'Home'
            },
            {
                Link: '/Hilfe',
                Text: 'Hilfe'
            },
            {
                Link: '/Drucken',
                Text: 'Drucken'
            },
            {
                Link: '/Speichern',
                Text: 'Speichern'
            },
            {
                Link: '/Login',
                Text: 'Login'
            }]
    });
});

app.listen(port, function (err) {
    console.log('running server on port ' + port);
});

Lokal funktioniert das ohne Probleme. Wenn ich das online stelle, wird doch nur der Public Ordner hochgeladen, oder denke ich hier falsch ?

Was muss ich jetzt noch einstellen dass am Ende auch eine aufrufbare index.html im public Ordner entsteht und hier dann die Infos aus res.render() eingesetzt werden ?

[kkapsner]

Wenn ich das online stelle

Wo und wie?

Ich verstehe nicht ganz, was du eigentlich machen willst. Willst du nur komplett statische HTML-Seiten online stellen und diese per nodejs erstellen? Dafür ist dein Konstrukt nicht ideal, da du ja nur die router definierst und diese werden nur aufgerufen, wenn auch eine entsprechende URL auf den express-Server trifft. Du müsstest also einmal alle zu erstellenden Seiten besuchen und die HTML-Dateien speichern, damit du sie dann hochladen kannst. Das könnte man natürlich auch automatisidert machen, aber so wie es aussieht, willst du eigentlich online auch einen node-Server haben und nicht etwas anderes (z.B. Apache).

[alphakanal]

Hi,

genau hier liegt eigentlich auch mein Hauptproblem im Verständnis der ganzen Node Geschichte! Irgendwie fehlt mir die "logische" Verbindung von dem was ich lokal mache zu dem was letztlich online steht bzw. wie es online funktioniert.

Ich hatte mal gelernt, dass www.MeineWebsite.de auf ein Verzeichnis mit einer index.html verwiesen hat und von da aus sämtlich HTMLs ansteuert - und so verstehe ich auch meine "Webapp": Da ist eine index.html und die lädt meine Javascript-Bundles. Also was ich eigentlich will ist: Alles was am Ende in meinem Public Ordner ist soll 1:1 online gestellt werden und laufen

Willst du nur komplett statische HTML-Seiten online stellen und diese per nodejs erstellen?

Ja! Wobei hier interativ mit einem Canvas Element gearbeitet wird, einfacher Login gecheckt werden sol usw - Schema findest Du in diesem Post hier (Konstruktor und Pfadangeaben aus externer Datei lesen). Würde sowas als SinglePageApp sehen.

Dafür ist dein Konstrukt nicht ideal

Was wäre hier dann empfehlenswert? Ich dreh mich da seit Wochen irgendwie im Kreis...

[kkapsner]

Irgendwie fehlt mir die "logische" Verbindung von dem was ich lokal mache zu dem was letztlich online steht bzw. wie es online funktioniert.

Du solltest online eigentlich die gleiche Infrastruktur haben, wie auf deinem lokalen Webserver - also einen nodejs (express) Server. Dann kannst du deine Dateien einfach da hochladen und es funktioniert (meistens).

einfacher Login

Das funktioniert nicht mit statischen HTML-Seiten - außer du machst das komplett unsicher und mit JS im Client...

[alphakanal]

Du solltest online eigentlich die gleiche Infrastruktur haben, wie auf deinem lokalen Webserver - also einen nodejs (express) Server. Dann kannst du deine Dateien einfach da hochladen und es funktioniert (meistens)

Und das heißt? Ich lade meinen kompletten Projektordner auf den Server - also inklusiv src + node_modules ordner? Wohin soll dann meine Meine Website verweisen ( Strato 0815 Webhosting ) ?

Mit einfachen Login meinte ich "nur" eine MySQL DB Abfrage ob der User existiert ohne Userbereich und -verwaltung. Wird aktuell via PHP gemacht. Wie das hier am Ende aussehen wird weiß ich noch nicht.

Kann mir auch vorstellen mich mit React näher zu befassen. Nur ob das die richtige Wahl ist, weiß ich eben auch ned, denn:

Was ich weiß:
Zentraler Bestandteil ist ein Canvas-Element, für das ich CreateJS + einem CreateJS ToolScript verwenden muss - weil diese Kombi mir die Funktionaltät im Canvas-Element ermöglicht die ich benötige.

Was ich nicht weiß:
Welche Frameworks hierfür am besten geeignet sind...ist ein wenig im Trüben fischen.

[kkapsner]

Strato 0815 Webhosting arbeitet nicht mit einem nodejs Server. Da musst du dir ein anderes Hosting suchen, wenn du auf der serverseite mit nodejs arbeiten willst. Aber mir scheint es, dass du nodejs wirklich nur zum "built" verwenden willst...

Mit einfachen Login meinte ich "nur" eine MySQL DB Abfrage ob der User existiert ohne Userbereich und -verwaltung. Wird aktuell via PHP gemacht. Wie das hier am Ende aussehen wird weiß ich noch nicht.

OK - jetzt bin dich verwirrt... du hast in deinem nodejs-Projekt auch noch PHP dabei?

Was ich nicht weiß:
Welche Frameworks hierfür am besten geeignet sind...ist ein wenig im Trüben fischen.

CreateJS ist doch schon ein Framework...? Für was willst du den noch ein Framework haben?

[alphakanal]

Aber mir scheint es, dass du nodejs wirklich nur zum "built" verwenden willst...

Exakt - ist mir heute eigentlich erst so richtig klar geworden.

OK - jetzt bin dich verwirrt... du hast in deinem nodejs-Projekt auch noch PHP dabei?

Keine Panik - damit meinte ich eigentlich dass das auf der aktuellen Webseite so gehandhabt wird. Das läuft momentan mit Flash ( AS3 ) und darum möchte ich das Ganze auf HTML / Javascript umstellen.

CreateJS ist doch schon ein Framework...? Für was willst du den noch ein Framework haben?

Öhm.. Wenn das reicht? Gerne!!

Hatte die letzten Wochen fast rund um die Uhr Tutorials von Pluralsights geschaut über SPAs, Node.js & Co und da wurden immer zig Frameworks verwendet für dies und für das..war ein wenig Input Overkill mit dem Resultat dass ich eigentlich nicht mehr wusste wie ich es machen soll, denn überall könnte ich ein wenig von dem erkennen was ich brauche....wie war das gleich nochmal mit dem Wald und den Bäumen ? ;-)

[tsseh]

Hatte die letzten Wochen fast rund um die Uhr Tutorials von Pluralsights geschaut über SPAs, Node.js & Co und da wurden immer zig Frameworks verwendet

ganz ohne wird es eine menge arbeit.
ob die einarbeitung in die frameworks auf kurze sicht weniger ist, hängt von deinem kenntnisstand ab.
das framework welches für spa am häufigsten genutzt wird dürfte angular sein. das reicht eigentlich auch schon aus.
diverse build umgebungen basierend auf nodejs würde ich an deiner stelle erst mal außen vor lassen.
http://forum.jswelt.de/javascript/62...tml#post400286 (MVVM Patter mit JQuery Mobile)
oder mit mehr handarbeit mit templateengine und router
http://forum.jswelt.de/ajax/62508-di...tml#post400658 (DIV-Inhalt mittels XML und Ajax ändern)
wobei man dann auch ganz schnell wieder bei angular landet
http://forum.jswelt.de/ajax/62508-di...tml#post400994 (DIV-Inhalt mittels XML und Ajax ändern)

[alphakanal]

Danke für die Links und Antwort!

ganz ohne wird es eine menge arbeit.
ob die einarbeitung in die frameworks auf kurze sicht weniger ist, hängt von deinem kenntnisstand ab.

Wenn ich programmiere, dann eigentlich in C# für Unity 3D Echtzeitanwendungen - aber nichts Komplexes sondern eher Basic-Sachen. Die Zeit nehme ich mir -> lerne gerne Neues. Wenn ich denn endlich weiß was es wird, sollte am Ende schon eine runde Sache werden

das framework welches für spa am häufigsten genutzt wird dürfte angular sein. das reicht eigentlich auch schon aus.

Das ist auch auf meiner Liste - wobei ich hier nicht weiß ob ich Angular 1.x oder gleich Angular 2 nehmen soll. Nach allem was ich bisher gelesen habe würde ich zu AJS 2 tendieren, doch hier kommt wieder mit TypeScript eine weitere "Unbekannte" ins Spiel -> ist das ne eigene Sprache, eine Bibliothek, ein weiteres Framwork, zwingend notwendig für Angular 2 ?

Alternativ hätte ich noch React auf dem Zettel gehabt - hier kommt wieder die Unbekannte JSX ins Spiel...und so hangel ich mich von einer Rechnung ( Angular 1/2 ) mit Unbekannten ( TypeScript ) zu einer anderen Rechnung ( React ) mit Unbekannten ( JSX ).

Wie gesagt wichtig ist mir:

• die Nutzung von CreateJS für das zentrale Canvas Element
• die Nutzung von Bootstrap als Gerüst
• die Möglichkeit "fertige" Module einzubinden, welche mir das Leben leichter machen - wie z.B. bei ner MySQL Abfrage
• möglichst umfangreich dokumentiert und viele How-To-Do Infos

Eigentlich tendier ich zu Angular - da hier wesentlich mehr an Infos, Tutorials und Dokumentationen zur Verfügung stehen. Ob 1.x oder 2 ->

[tsseh]

doch hier kommt wieder mit TypeScript eine weitere "Unbekannte" ins Spiel -> ist das ne eigene Sprache, eine Bibliothek, ein weiteres Framwork, zwingend notwendig für Angular 2 ?

typescript "übersetzt" es6 in js welches die browser verstehen.
und weil Angular 2 massiv es6 features verwendet welche nicht in den browsern implementiert sind ist es zwingend.
ich würde sowieso zu angular 1 raten, dafür gibt es viele erweiterungen, die du für angular 2 noch nicht findest.

[alphakanal]

Ist Typescript dann sowas wie Babel in Node - das compiled ( oder transpiled ? ) doch auch es6 ?
Jedenfalls danke schonmal, dann werd ich mich mal auf Angular 1 konzentrieren

[tsseh]

Ist Typescript dann sowas wie Babel in Node - das compiled ( oder transpiled ? ) doch auch es6 ?

Babel versteht reines es6, Typescript hat jetzt wieder noch erweiterungen

[alphakanal]

Babel versteht reines es6, Typescript hat jetzt wieder noch erweiterungen

Warum kann nicht einmal alles einfach nur einfach sein?

So habe jetzt begonnen mit Angular und baue gerade das Angular Seed Projekt ein wenig um, so dass es ein wenig übersichtlicher wird. Jetzt hab ich vorab gleich eine Frage, nicht dass ich später darauf komme dass das Probleme bereitet:

Ich habe meine einzelnen Views in einen views Ordner verschoben und jede View hat ihren eigenen Ordner, in dem auch der viewcontroller ist. Die Controller werden an Ende des Body-Tags geladen:

  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="views/main/main.js"></script>
  <script src="views/drucken/drucken.js"></script>
  <script src="views/login/login.js"></script>

Jetzt möchte ich am Ende ein Bundle.js erstellen welches app.js und die views/*/*.js beinhaltet - geplant ist das mit gulp concat.

Meine bisher gebundelten Javascripte waren immer via require miteinander verknüpft - aber hier ist das ja nicht der Fall. Kann ich trotz fehlender interner "Verknüpfungen" und der unterschiedlichen Pfade die Dateien bundeln , werden die Pfade intern "beibehalten" ?

P.S.
Das "Problem" beim Minifien von Angulardateien ist mir bekannt und ist schon berücksichtigt.

[tsseh]

Jetzt möchte ich am Ende ein Bundle.js erstellen welches app.js und die views/*/*.js beinhaltet - geplant ist das mit gulp concat.

Meine bisher gebundelten Javascripte waren immer via require miteinander verknüpft

was verstehst du unter "via require miteinander verknüpft"? require ist ja meist ein mechanismus zum dynamischen laden von js dateien.
du meinst vermutlich sowas https://www.npmjs.com/package/gulp-resolve-dependencies. da bin ich kein fan von. abhängigkeiten über komentare... . ich würde das explizit über gulp.src lösen. aber das ist nur meine meinung, wenn dir das andere besser gefällt, nimm es.

Kann ich trotz fehlender interner "Verknüpfungen" und der unterschiedlichen Pfade die Dateien bundeln

welche fehlenden "Verknüpfungen"? meinst du die reihenfolge der dateien im bundle anhand von abhängigkeiten? das musst du in gulp lösen

werden die Pfade intern "beibehalten" ?

wie intern "beibehalten"? das verstehe ich überhaupt nicht. da bleiben ja keine pfade mehr übrig?!

Das "Problem" beim Minifien von Angulardateien ist mir bekannt und ist schon berücksichtigt.

mir nicht, welche sollen das sein? angular dateien sind js dateien wie andere auch.

[alphakanal]

was verstehst du unter "via require miteinander verknüpft"?

Immer schwer zu erklären wenn man die Fachbegriffe ned so weiß, meine eigentlich mit import und hatte mit Import von Modulen zu tun, sorry. Aber das alles hat sich sowieso ergeben, ich hatte hier einen Denkfehler.

mir nicht, welche sollen das sein? angular dateien sind js dateien wie andere auch.

Um das zu erklären kenne ich die Termini auch ned alle - jedenfalls hat es damit zu tun was mit Funktionen an z.B Controllern übergeben wird und wie Angular anschließend innerhalb der Controller damit umgeht ( mit den Injections ? ). Das lässt sich mit dem Package gulp-ng-annotate beheben.