NodeJS med Bootstrap Kapitel 1 NodeJs med Bootstrap. Vi tager udgangspunkt i Express, og kan via filen package.jason (fra et andet projekt) nemt hente de filer der er afhængige for projektet. Men skriv først npm install i den folder via terminalen du har oprettet til dit projekt. Giv dit projekt et kort navn og klik dig igennem installationen. Tilføj så de dependencies du har brug for: Åbn din package.jason (fra et andet projekt) og kopier de linjer der indeholder den info du har brug for, til den package.jason du lige har bygget. Disse linjer skal tilføjes/redigeres: { } "name": "node-ejs", "main": "server.js", "scripts": { }, "start": "nodemon server.js" "dependencies": { } "body-parser": "^1.16.1", "ejs": "^2.5.6", "express": "^4.14.1", "express-session": "^1.15.1", "req-flash": "0.0.3", "mysql": "^2.15.0", "mysql2": "^1.5.3" Kør så npm install igen! Hvis terminalen brokker sig over det navn (name) du har givet, så ændr det! Nu ser din mappestruktur således ud:
-Ikke meget, men der er kommet nye mapper til med alle de nødvendige biblioteker du har brug..! Opret nu en fil ved navn server.js, der er dén fil du starter når du kører dit projekt. Her skal du hente (loade) alle de biblioteker du har brug for. Der er ikke forklaring på disse, men du kan se at du skal bruge biblioteker som path, body-parser og express for at få dit site til at virke. // load de biblioteker vi har brug for var express = require('express'); var app = express(); var path = require('path'); var session = require('express-session'); var bodyparser = require('body-parser'); var port = process.env.port 1387 //En port der er åben. Kunne også være 3000 eller 1387 eller...; app.use(express.static('public')); app.use(bodyparser.urlencoded({ extended: false })); app.use(bodyparser.json()); app.use(express.static(path.join( dirname, 'public'))); // Public mappens adgang app.use(session({ secret: 'keyboard cat', resave: false, saveuninitialized: true, cookie: { maxage: 5 * 60 * 1000 } // 5 minutter })); // set the view engine to ejs app.set('port', port);
app.set('views', dirname + '/views'); app.set('view engine', 'ejs'); require('./routes/allroutes')(app); app.listen(port); console.log(port + ' er den port du skal bruge i din browser'); Kør nu nodemon./server.js i din terminal og se den besked der (forhåbentligt) kommer: Appen chrasher, fordi den ikke kan finde mappen routes og filen allroutes.js, der håndterer navigationen. Opret mappen routes og en allroutes.js-fil med indholdet: module.exports = function (app) { }; // tom lige nu :) Prøv igen: Jeg måtte ændre porten i server.js fra 8080 til 1387, du skal måske gøre det samme. Men får jeg beskeden 1387 er den port du skal bruge i din browser, fra terminalen (console.log()). Afprøv dit site i en browser: Det virker! Serveren svarer! Vi får en fejl da vi endnu ikke har en index-fil klar. Den skal naturligvis ligge i mappen views/pages da det jo er har vi har defineret vores view (se server.js omkr. linje 26). Opret mappen views i roden. I den opretter du mappen pages. Her opretter du filen index.ejs. Skriv Hello World! i den. Ret din allroutes.js til, så den rent faktisk kan returnere indhold af index.js-filen: module.exports = function (app) { // Index page app.get('/', function (req, res) { res.render('pages/index', { side: "index" }); }); }; // Fil: allroutes.js
Din browser skulle nu vise flg.: Succes! Nu skal vi ikke vise Hello World i den formatering, men i en Bootstrap-version. Hent Bootstrap og tilføj HTML, DOCTYPE, mv. til dit projekt! <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>nodejs</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-gn5384xqq1aowxa+058rxpxpg6fy4iwvtnh0e263xmfcjlsawiggfaw/dais6jxm" crossorigin="anonymous"> </head> <body> Hello World <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-jzr6spejh4u02d8jot6vlehfe/jqgirrsqqxsffwpi1mquvdayjuar5+76pvcmyl" <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384- KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-apnbgh9b+y1qktv3rn7w3mgpxhu9k/scqsap7huibx39j7fakfpskvxusvfa0b4q" </body> </html> Tilføj evt. Jumbotron-, header- og andre css-klasser, så det ser godt ud. Gå til https://getbootstrap.com/docs/4.0/getting-started/introduction/ og til https://getbootstrap.com/docs/4.0/examples/jumbotron/ (view-source) for at hent de nødvendige filer.
Mit projekt so far: http://dotnet.dk/nodejs/nodejsmedbootstrap_kap-1.zip