Hello I use nodeJS and I want to create an application in which I want to make a post request with a Json object from Postman or curl, my app will fetch Json Object and it will appear the object in broswer.
So, I tried to do that , but I have the problem that the json Object don't appear on broswer
(I use npm hbs, but also I tried it without that).
my nodeJS code is:
app.use(express.json())
app.use(express.urlencoded({extended:true}))
app.use('/notify',(req,res)=>{
const json = req.body
console.log(json)
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(json) // I tried and without JSON.stringify
})
})
With Postman request I send for example that
{
"test": "ok",
"var": 12
}
The result from console.log is :
{ ok: 'ok', var: 12 }
But on the broswer I just take this:
{}
This is my website
Why I can't appear my Json Object on broswer?
This is my index file
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{{title}}</title>
</head>
<body>
<!-- Header -->
{{>header}}
<!-- End Header -->
<div>
<p>Use this site for the Weather</p>
<form id="formSearch">
<input placeholder='Location' id="inputSearchValue">
<button>Search</button>
</form>
</div>
<br>
<p id="location">{{expect}}</p>
<p id="forecast"></p>
<!-- Footer -->
{{>footer}}
<!-- End Footer -->
<script src="js/app.js"></script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I don't have the info I need to exactly match your setup but here is a close approach. Keep in mind this is not how you would do it in a actually site but will work for learning.
You can think of dataStore as a temporary database that only exist while the app is running. In the index.html I commented out/disabled the following: header, footer, and as you didn't provided and I don't want to create them :D
I suggest you continue along the FreeCodeCamp path as it will cover data storage down the road.
package.json
{
"scripts": {
"start": "node src"
},
"dependencies": {
"express": "^4.17.1",
"mustache": "^4.1.0",
"mustache-express": "^1.3.0"
}
}
src/index.js
const mustacheExpress = require('mustache-express')
const express = require('express')
const app = express()
app.use(express.json())
app.use(express.urlencoded({extended:true}))
app.engine('html', mustacheExpress());
app.set('view engine', 'html');
app.set('views', __dirname + '/views')
let dataStore = {
expect: {user: 'jdoe', age: 30},
}
app.use('/',(req,res)=>{
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(dataStore.expect) // I tried and without JSON.stringify
})
})
app.use('/notify',(req,res)=>{
const json = req.body
console.log(json)
dataStore.expect = json
res.render('index' , {
title: 'Weather App',
name:'ApLaz',
expect: JSON.stringify(dataStore.expect)
})
})
app.listen(3000, (err) => {
if (err) return console.log(err)
console.log('server listening on port: %s', 3000);
})
src/view/index.html
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="css/style.css">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>{{title}}</title>
</head>
<body>
<!-- Header -->
<!-- >header}}-->
<!-- End Header -->
<div>
<p>Use this site for the Weather</p>
<form id="formSearch">
<input placeholder='Location' id="inputSearchValue">
<button>Search</button>
</form>
</div>
<br>
<p id="location">{{expect}}</p>
<p id="forecast"></p>
<!-- Footer -->
<!-- >footer}}-->
<!-- End Footer -->
<!--<script src="js/app.js"></script>-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
To start the app open a terminal and run yarn start or npm start
Related
I use Twitter Typeahead and Bootstrap Tags Input on our admin-website. Both work perfect when used seperatly. When I try to combine the 2, only the Bootstrap Tags Input code works, Twitter Typeahead does nothing - not even with simple data-objects. I don't see where it goes wrong. This is my test-code.
The objects are delivered from a php-mysql page which delivers data like this:
[{"tags_id":"1","tags_expression":"CLB"},{"tags_id":"2","tags_expression":"SO"},{"tags_id":"3","tags_expression":"Basisonderwijs"}]
Someone an idea?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Naamloos document</title>
<!-- Custom CSS -->
<link href="/style/css/style.css" rel="stylesheet">
<!-- Bootstrap Core CSS -->
<link href="/plugin/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Tags input -->
<link href="/plugin/bootstrap-tagsinput/css/bootstrap-tagsinput.css" rel="stylesheet" />
<!-- Typehead CSS -->
<link href="/plugin/typeahead.js-master/dist/typehead-min.css" rel="stylesheet">
</head>
<body>
<form method="post" class="form-horizontal form-material" name="FAQ_Modal_edit_record_insert_form" id="FAQ_Modal_edit_record_insert_form">
<div class="col-md-12">
<h4 class="text-info adjustpadding">Tags</h4>
<div>
<input type="text" class="form-control" value="" id="FAQ_public_tags" name="FAQ_public_tags" autocomplete=off />
</div>
</div>
</form>
</body>
<!-- ============================================================== -->
<!-- Jquery / Bootstrap -->
<!-- ============================================================== -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- ============================================================== -->
<!-- Bootstrap Tagsinput -->
<!-- ============================================================== -->
<script src="/plugin/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<!-- ============================================================== -->
<!-- Typehead Plugin JavaScript -->
<!-- ============================================================== -->
<script src="/plugin/typeahead.js-master/dist/typeahead.bundle.js"></script>
<script>
var data = (function()
{
var json = null;
$.ajax(
{
'async': false,
'global': false,
'url': '/include/FAQ/LIBRARY_Tags.php',
'dataType': "text",
'success': function(data)
{
json = data;
}
});
return json;
})();
$('#FAQ_public_tags').tagsinput({
typeaheadjs:{
name: 'tags',
limit: 5,
displayKey: 'tags_expression',
valueKey: 'tags_id',
source: function(query, process)
{
tags = [];
map = {};
$.each($.parseJSON(data), function(i, tag)
{
map[tag.tags_expression] = tag;
tags.push(tag.tags_expression);
});
process(tags);
},
updater: function(item)
{
var tag = map[item]['tags_expression'];
var tag_id = map[item]['tags_id'];
$("#FAQ_public_tags_id").val(tag_id);
return tag;
}
},
freeInput: true
});
</script>
</html>
I am trying to send a html file through express but it is not able to include tailwindcss
I did all the set up correctly (at least that's what I think)
Is sendFile not capable of sending tailwindcss
This is the express setup
// express setup
const app = express();
const port = 9000;
app.use('/static', express.static('static'))
the endpoint
app.get("/", (req, res)=>{
res.sendFile(path.join(__dirname, "/template/home.html"))
});
html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website</title>
<link rel="stylesheet" href="../static/output.css" />
</head>
<body>
<h1 class="text-sm">Doesn't Works</h1>
</body>
</html>
css file
#tailwind base;
#tailwind components;
#tailwind utilities;
tailwind config file
module.exports = {
content: ["*"],
theme: {
extend: {},
},
plugins: [],
}
and yes the path are correct it works with normal css but not with tailwindcss
I also don't want to use pug for it
Is there a way around it?
You can simple Use the Play CDN to try Tailwind right in the browser without any build step.
Add the Play CDN script tag to the <head> of your HTML file, and
start using Tailwind’s utility classes to style your content.
But remember :
The Play CDN is designed for development purposes only, and is not the
best choice for production.
<script src="https://cdn.tailwindcss.com"></script>
Folder & file structure :
app.js
const express = require("express");
const path = require("path");
const app = express();
const port = 9000;
app.use(express.static("./public"));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "/public/home.html"));
});
app.listen(port, () => {
console.log(`Server is listening at http://localhost:${port}`);
});
home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Express & TailwindCss</title>
</head>
<body>
<div class="flex items-center justify-center h-screen flex-col gap-5">
<h1 class="text-5xl font-bold underline text-green-500">
Express with TailwindCss
</h1>
<h3 class="text-blue-900 text-3xl font-bold">It does works! ;-)</h3>
</div>
</body>
</html>
Output :
This is just a simple html file using pdfmake .
I click a button and then open a pdf file .
using :
pdfMake.createPdf(docDefinition).open();
it's ok , but now i want to see a specific language (ex:Bangla) in my pdfpage . how it is possible . please help or suggest me .
header part:
<head>
<!-- <meta charset="utf-8" />-->
<meta http-equiv="Content-Type" content="text/html" meta charset="utf-8" />
<title>html to pdf</title>
<link href="css/main.css" rel="stylesheet">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='pdfmake/build/pdfmake.min.js'></script>
<script src='pdfmake/build/vfs_fonts.js'></script>
<script src='build/pdfmake.min.js'></script>
<script src='build/vfs_fonts.js'></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
body part :
<body>
<h1>Hello World</h1>
<div class="btn-group">
<div class="btn btn-success buttin_click_1" type="button">download</div>
<div class="btn btn-danger button_click_2" type="button">open</div>
</div>
</body>
Script :
<script>
$(document).ready(function () {
var docDefinition = {
content: 'This is an sample PDF printed with pdfMake ami '
};
$('.buttin_click_1').click(function () {
console.log('btn 1 clicked');
pdfMake.createPdf(docDefinition).open();
});
$('.button_click_2').click(function () {
console.log('btn 2 clicked');
});
});
</script>
Thank you .
Import the Font in pdfMake.
Afterwards update the vfs_fonts.js as described on github
assign pdfMake.fonts in your javascript
$(document).ready(function () {
pdfMake.fonts = {
'SolaimanLipi': {
normal: 'SolaimanLipi-Regular.ttf',
bold: 'SolaimanLipi-Medium.ttf'
}
};
var docDefinition = {
content: 'হ্যালো',
defaultStyle:{
font: 'SolaimanLipi'
}
};
$('.buttin_click_1').click(function () {
console.log('btn 1 clicked');
pdfMake.createPdf(docDefinition).open();
});
$('.button_click_2').click(function () {
console.log('btn 2 clicked');
});
});
I am using express with hoganjs templating instead of jade.
When I try to access one of my routes, it wont work though...
In app.js, I have the following (relevant to the route):
var awesome = require('./routes/awesome.js');
app.use('/awesome', awesome);
In the routes/awesome.js file, I have the following:
var express = require('express');
var router = express.Router();
/* GET awesome page. */
router.get('/awesome', function(req, res, next) {
res.render('awesome', { title: "awesome", message: "awesome"});
});
module.exports = router;
And lastly, here is my awesome template (located in ./views/awesome.hjs).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{title}}</title>
<meta name="Author" content="{{author}}"/>
<link rel="shortcut icon" href="" />
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<h1>{{ title }}</h1>
<p>Welcome to {{ title }}, here is your message: {{message}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
I have basically the same code for the index route so why wont this one work too?
In awesome.js change the router path location to /
router.get('/', function(req, res, next) {
res.render('awesome', { title: "awesome", message: "awesome"});
});
Now localhost:3000/awesome should be available.
app.use('/awesome', ...) matches all the routes starting with awesome. Paths specified in router.get('/awesome', ...) acts as sub-paths. The path URL will be localhost:3000/awesome/awesome.
I've been trying to create a build system using gulp in a Laravel project and the only problem left right now is renaming the right file names inside my master.blade.php file. As it is now, it's only following the filenames provided in the gulp-useref parameters, but the files revisioned by gulp-rev are not replaced by gulp-rev-replace.
Here is my gulp task:
gulp.task('build', ['clean', 'scss', 'js', 'master'], function() {
var assets,
jsFilter = $.filter('**/*.js'),
cssFilter = $.filter('**/*.css');
return gulp.src('app/views/layouts/master.blade.php')
.pipe(assets = $.useref.assets({searchPath: '/'}))
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore())
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore())
.pipe($.rev())
.pipe(assets.restore())
.pipe($.useref())
.pipe($.revReplace())
.pipe($.rename(function(path) {
if(path.extname === '.php') {
path.dirname = 'app/views/layouts';
} else {
path.dirname = 'public/assets';
}
}))
.pipe(gulp.dest('./'))
.pipe($.size({title: 'build files', showFiles: true}))
.on('end', function() {
setTimeout(function() {
// force watchify to close all watchers
process.exit();
});
});
});
The default master.blade.php would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<!-- build:css assets/index.css -->
<!-- bower:css -->
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.css" />
<!-- endbower -->
<link rel="stylesheet" href="/.tmp/index.css">
<!-- endbuild -->
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<!-- build:js assets/index.js -->
<!-- bower:js -->
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/lodash/dist/lodash.compat.js"></script>
<!-- endbower -->
<script src="/.tmp/index.js"></script>
<!-- endbuild -->
</body>
</html>
and the result will always look like this despite the gulp-rev-replace pipe.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{$title}}</title>
<link rel="stylesheet" href="assets/index.css">
</head>
<body>
<section id="container">
<header>
#include('layouts.navbar')
</header>
<aside>
#include('layouts.sidebar')
</aside>
<section>
#yield('content')
</section>
<footer>
#include('layouts.footer')
</footer>
</section>
<script src="assets/index.js"></script>
</body>
</html>
I figured out the problem, The gulp-rev-replace documentation mentions that they only replace files with extensions ['.js', '.css', '.html', '.hbs'] by default. By passing ['.php'] in the replaceInExtensions option.