Integrating blur-admin into an existing node.js server public folder

[demym]

Hi,

i have the need to integrate your beatiful blur-admin into an existing node.js server (for deployment on the cloud); that is, i usually put all my webclient stuff into the node.js server /public folder; but doing that, and then starting the node.js server with npm start command does not render the dashboard (which is usually itself started by the gulp serve command). How can i achieve this ?

Thanks very much in advance

[arihantdaga]

You can do it like this. Download all the files from here http://akveo.github.io/blur-admin/articles/091-downloads/ In this archive you'll find a dev-release folder. (I am assuming you will want to do few changes, otherwise you can use release folder as well). This dev-release folder is what we are going to use. From this folder copy all 4 html files aka- index.html,404.html,auth.html,reg.html and put them in your views folder of express app under a subfolder named admin. So you'll have this - ./views/admin/index.html , ./views/admin/auth.html etc... Now copy rest of the files and put them in a subfolder named admin in your public folder of express app. so you'll have this - ./public/admin/{everything else you copied}

Now in your app.js file - set admin_path as - app.set('admin_path',path.join(__dirname,'views','admin'+path.sep));

Routing for admin- const adminRoutes = require('./routes/adminRoutes'); app.use('/admin',adminRoutes)

and in adminRoutes.js file -

router.get('/', function(req, res, next) { res.sendFile(req.app.get("admin_path")+"index.html"); console.log(req.path);

});

Done. go to 127.0.0.1:3000/admin/

Cheers..

[guillaumedenece]

Hey!

Thank's for those informations. However, once I did that, the blur admin stays on the loading page.. How can I solve it? I followed your tutorial with an express app I just generated with the express generator.

Here are the piece of code I changed from the default express generation, according to your advices:

app.js: `var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser');

var index = require('./routes/index'); var users = require('./routes/users');

var app = express();

// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade');

app.set('admin_path',path.join(__dirname,'views','admin'+path.sep));

// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index); app.use('/users', users);

const adminRoutes = require('./routes/adminRoutes'); app.use('/admin',adminRoutes)

// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); });

// error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page res.status(err.status || 500); res.render('error'); });

module.exports = app;`

adminRoutes.js: `var express = require('express'); var router = express.Router();

router.get('/', function(req, res, next) { res.sendFile(req.app.get("admin_path")+"index.html"); console.log(req.path); });

module.exports = router;`

Thank you !

[arihantdaga]

Check in Inspector (You'll find errors in console). I think most of the files(Javascripts) are not getting loaded. If you see 404 for most JS files, that means you haven't setup public folder yet. As i mentioned in my comment you'll have to Copy all the files from dev-release folder into the ./public/admin folder. Also you'll have to run "bower install" obviously in the ./public/admin folder to install all the bower dependencies. This is what i mentioned- "Now copy rest of the files and put them in a subfolder named admin in your public folder of express app. so you'll have this - ./public/admin/{everything else you copied}"

If you have nay other problem, let me know.

[guillaumedenece]

It works !

Thank you so much for your help!

[nxd1184]

I did follow your steps but it's not works. I have uploaded project structure image, app.js, route admin.js

app.js

`var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser');

var index = require('./routes/index'); var users = require('./routes/users'); var admin = require('./routes/admin');

var app = express();

// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'jade');

// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index); app.use('/users', users); app.use('/admin', admin);

// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); });

// error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page res.status(err.status || 500); res.render('error'); });

// blur admin config app.set('admin_path',path.join(__dirname,'views','admin' + path.sep));

module.exports = app;`

admin.js

`var express = require('express'); var router = express.Router();

router.get('/', function(req, res, next) { res.sendFile(req.app.get('admin_path') + 'index.html'); console.log(req.path); });

module.exports = router;`

I'm appreciate your help.

[arihantdaga]

@nxd1184 I think it should help. did you check on the url for ex. in my case (127.0.0.1:3002/admin/). Can u send me what error you are getting. ?

[nxd1184]

This is my screen, it's not error. I think most of the files(Javascripts) are not getting loaded but I don't know how to do that.

[arihantdaga]

Hmm.. Everything looks fine only in your code. But Looks like your static content is not being served. can u check response of this "http://127.0.0.1:3000/admin/app/app.js". are you getting app.js file. ? . If not then try once by upgrading express. I have express - 4.14.0.

or u can try adding this line - "app.use('/admin', express.static(path.join(__dirname ,'public/admin'))); " right after app.use(express.static(path.join(__dirname, 'public')));

[abdullahhacettepe]

hi, i'm having same problem with @nxd1184 . Any solution came up?

[lesterfernz]

The problem is the index.html file from the dev release folder. The path for the bower components is incorrect eg:

the path ../ should be removed .hence the correct path would be

Just do a change all for ../ and it should work just fine.

[ghost]

Hi,

I was able to integrate the blur admin theme into my express app (great tutorial), but I've encountered one problem:

My views outside of the SPA (auth.html, reg.html, etc.) seem to be inaccessible. I get the following error when trying to navigate to auth.html from the dashboard:

Not Found

404

Error: Not Found at C:\Users\MByrd\Desktop\ress\app.js:37:13 at Layer.handle [as handle_request] (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:317:13) at C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:284:7 at Function.process_params (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:335:12) at next (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:275:10) at C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:635:15 at next (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:260:14) at Function.handle (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:174:3) at router (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:47:12) at Layer.handle [as handle_request] (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:317:13) at C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:284:7 at Function.process_params (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:335:12) at next (C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:275:10) at C:\Users\MByrd\Desktop\ress\node_modules\express\lib\router\index.js:635:15

My app.js and adminRoutes.js are identical to those pasted in the above comments:

app.js - 'var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser');

var index = require('./routes/index'); var users = require('./routes/users');

var app = express();

// view engine setup app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'pug');

app.set('admin_path',path.join(__dirname,'views','admin'+path.sep));

// uncomment after placing your favicon in /public //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico'))); app.use(logger('dev')); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); app.use(cookieParser()); app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index); app.use('/users', users);

const adminRoutes = require('./routes/adminRoutes'); app.use('/admin',adminRoutes);

// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); });

// error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get('env') === 'development' ? err : {};

// render the error page res.status(err.status || 500); res.render('error'); });

module.exports = app;'

adminRoutes.js - /var express = require('express'); var router = express.Router();

router.get('/', function(req, res, next) { res.sendFile(req.app.get("admin_path")+"index.html"); console.log(req.path); });

module.exports = router;'

Thanks in advance!

[mohdbred]

@arihantdaga Clear and concise explanation. Saved my time. Thanks.

[sidd1811]

Hi @nxd1184 , did you find a resolution for your issue? I am having the same issue