Approach: Use gulp to create static html with posts from mongodb
Stack:: express, mongodb, pug, gulp
TL:DR
I have a express app with connected mongodb and a few posts which are displayed on my landingpage. Per server everything works, it also runs on a prod-environment. But in addition to this I also want a static version of my landingpage.
I know there are many fancy static site generators out there, but I'm a fan of gulp and want it handmade =)
I have this gulptask which already connects per MongoClient to my local DB (db: passport, collection: posts) and console.logs my posts
I think this is not the way, but I can log the posts in the data function successfully
gulp.task('db-test', function() {
return gulp.src('views/index.pug')
.pipe(data(function(file, cb) {
MongoClient.connect('mongodb://localhost:27017/passport', function(err, db) {
db.collection('posts').find().forEach(function(doc) {
console.log(doc) // This logs each of my posts from the mongodb - yayy but how to pass it correctly to the pug function below?
});
if(err) return cb(err);
cb(undefined, db.collection('posts').find());
});
}))
.pipe(pug({
// here Im using a static array, otherwise the posts are not logged in the data function
locals: {posts: [{title: "blabal"}, {title: "heyhey"}]}
}))
// If im doing like in the instruction of gulp-data, it breaks in my template
// .pipe(pug({}))
.pipe(gulp.dest('./dist'))
});
Template
ul
each val in posts
li= val.title
When i remove this dynamic part, the gulp taks generates my html without any problems.
The version how it should work (but doesn't)
gulp.task('db-test', function() {
return gulp.src('views/index.pug')
.pipe(data(function(file, cb) {
MongoClient.connect('mongodb://localhost:27017/passport', function(err, db) {
if(err) return cb(err);
cb(undefined, db.collection('posts').find());
});
}))
.pipe(pug({})) // now my gulp-pug tasks says cannot find length of undefined = no posts found or just accessing the Cursor from the mongo collection - i dont know...
.pipe(gulp.dest('./dist'))
});
When i debug my gulp task i see that db.collection('posts').find() is a pending promise. I also tried to resolv that, without success.
Gulp Heros out there - help me!
Related
I've created a SNS web application (using node.js) where people can upload pictures (using cloudinary) into collections.
The application works perfectly on a cloud-based IDE I use for writing code; however, after pushing it to heroku, the image upload no longer works. I don't get any error message in my console, even though I think it should be console.logging it, however the error flash happens and the image doesn't upload.
Here is my code:
router.post("/", middleware.isLoggedIn, upload.single('image'), function(req, res){
cloudinary.v2.uploader.upload(req.file.path, function(err, result) {
if (err) {
//if error
console.log(err.message);
req.flash("error", "Can't upload image, try again later.");
return res.redirect("back");
}
//else
// add cloudinary url for the image to the campground object under image property
req.body.image = result.secure_url;
req.body.imageId = result.public_id;
// add author to campground
req.body.author = {
id: req.user._id,
username: req.user.username
};
I've tried searching other posts for a possible reason; but I can't find anything that matches my situation. If anyone can help...please, your advice would be greatly appreciated!
Thank you.
Sorry! The problem was the CLOUD_NAME config variable had '' marks around it.
If anyone is having similar issues, try removing the quotes around the name variable.
I am using Node.js w/ Heroku & Postgres
My code needs to pull data from Postgres, store that data, send that data to a webpage to be displayed.
The code looks like this. I want to get the information from
SELECT * FROM people;, then I want to store it somehow, and then I want to res.render it onto 'pages/sql'.
So when I visit myURL.com/sql I will see a stringified version of the results gotten from the database. So far I can see this information in my console when I run heroku logs --tail but I want it to be rendered on a live webpage visible to anybody.
Ideally I'd like to be able to do a lot more than this, but this would help for now.
By wanting to do much more I'd like to eventually find out how to have a full ejs webpage and to pull in a large amount of data from the db onto one page and not use res.render just for one table.
const { Client } = require('pg');
const client = new Client({
connectionString: process.env.DATABASE_URL,
ssl: true,
});
app.get('/sql',function(req,res){
res.status(200);
client.connect();
client.query('SELECT * FROM people;', (err, res) => {
if (err) throw err;
for (let row of res.rows) {
console.log(JSON.stringify(row));
}
client.end();
})
res.render('pages/sql', {body:"HELLO"});
});
Ideally where it says HELLO, I would be sending the data I get from the stringified JSON
So you have to send the response when you got the result, so you should do something like this
app.get('/sql',function(req,res){
res.status(200);
client.connect();
client.query('SELECT * FROM people;', (err, res) => {
if (err) throw err;
for (let row of res.rows) {
// If you want to get the single row
res.render('pages/sql',JSON.stringify(row));
console.log(JSON.stringify(row));
}
// if you want all rows return then
res.render('pages/sql',JSON.stringify(res.rows));
client.end();
})
});
I'm using nodejs and express and I have a navigation menu that is built using data that is in mongodb currently I'm just making a call to the database to get a list of companies and passing that back inside each route. There doesn't seem to be a way to store this information in localstorage client side. So I"m wondering what is the most effective way to handle this situation. Sample of my code
admin.get('/', function(res, resp){
mongodb.connect(url, function(err, db){
var collection = db.collection('companies')
collection.find({}).toArray(function(err, companies){
res.render('adminview', {companies:companies})//once the page is rendered I would like to save the company list to localstorage.
})
})
})
admin.get('/:company', function(res, resp){
/* repeating code from above because I need this list */
mongodb.connect(url, function(err, db){
var collection = db.collection('companies')
collection.find({}).toArray(function(err, companies){
/* more code to do stuff to render the company page */
res.render('companyadminview', {companies:companies, company:company})
}) })
I could be going about this the wrong way I'm new to web development this feels wrong to me but can't figure out a different way.
So, first off you should be able to store it in localstorage or sessionstorage just fine, unless you're targeting browsers that don't support it.
That said, I think it's best not to, as the fact that you're storing it in the DB implies that it changes with enough frequency that you will get buggy clientside behavior if you cache it there for too long.
Instead, I'd just setup a middleware and attach it to the locals object on a per request basis, unless you want to do some kind of cache on the server:
app.use(function(req, res, next) {
mongodb.connect(url, function(err, db){
if (err) return next(err);
var collection = db.collection('companies')
collection.find({}).toArray(function(err, companies){
if (err) return next(err);
res.locals.companies = companies;
next();
});
});
});
I'm converting an MS Access database to a webapp. I'm using Angular JS, Node JS with the express framework and MySQL as database.
In ms access you don't have any edit/save features. When you edit something, the database changes instantly. I like this. Feels smooth. So I want to have this the same way in the web app. My question is. Will there be any problems with this approach in my webbapp?
This is a piece of my node js code which updates the database with a restcall:
/*
Post /api/products/ HTTP/1.1
*/
exports.editProduct = function(req, res) {
console.log(req.body);
var post = [{title_en: req.body.title_en},req.params.id];
if (connection) {
connection.query("UPDATE products SET ? WHERE id = ?", post, function(err, rows, fields) {
if (err) throw err;
res.contentType('application/json');
res.write(JSON.stringify(rows));
res.end();
});
}
};
And on the client side I use the a the $resource object
$scope.save = function(){
$scope.product.$save(function(){
console.log('Save successfull);
});
};
And in the view. I simply have inputs with ng-change:
<input ng-model="product.title_en" ng-change="save()".
Will this work good in production mode with a couple hundred users? Is the chances of blocking/crashing etc?
The only thing I see is if (err) throw err;
if there is an error the server crash so change it with a json response with a 500 status.
By the way express has a build-in way to output json
It's better off to validate title_en and id
exports.editProduct = function(req, res) {
console.log(req.body);
var post = [{title_en: req.body.title_en},req.params.id];
if (connection) {
connection.query("UPDATE products SET ? WHERE id = ?", post, function(err, rows, fields) {
if (err) {
return res.json(500,{ error: 'Cannot update the product' });
}
res.json(200,rows);
});
}
an other thing try to use restangular instead of resource it's a lot of fun :)
};
Hi i am developing nodejs application. I am inserting data to mongodb but my page always in 'loading' mode. But strange thing is my data inserted to mongodb immediately but page load not stopping. My code is shown below:
app.post('/Management/Post/New',function(req, res){
new Post({
title:req.body.post.title,
body:req.body.post.body,
keywords:req.body.post.keywords
}).save(function (err, docs){
if(err) {
return res.render(__dirname + "/views/createpost", {
title: 'Yeni Gönderi Oluştur',
stylesheet: 'postcreate',
error: 'Gönderi oluşturulurken bir hata ile karşılaşıldı'
});
}
console.log('Gönderi oluşturuldu');
});
});
Have no idea.
You only send a response when there is an error. If there's no error, you server never sends anything back: that's why the page seems to always be loading.
You need to send a response when you have no error, like this:
.save(function (err, docs){
if(err) { // Executed when there was an error with Mongo
return res.render(...);
} else { // Executed when everything is fine
return res.render(...);
}
});
You aren't handling the success scenario except for a console.log. You need a res.render() or res.redirect() on success, not just error