I am trying to get swagger-ui npm work in my node.js application.
I have a js file with the following code:
const swagger = require('swagger-ui');
module.exports = Backbone.View.extend({
initialize: function() {
this.$el.html(pugFile);
swagger({
spec: {... specs},
dom_id: '#docus',
});
}
});
where specs contains json for the API definition. It loads and renders fine - but without any CSS!
There is no other code in my application for using swagger-ui, only those few lines. If the CSS wasn't missing, all would be perfect.
Can someone point out to me what I am missing? I just installed swagger-ui with "npm install swagger-ui" and used it as above.
Thanks a lot!
Related
I have two application which has developed with Typescript. They are server-side and client-side application. I used NodeJs for them. On client-side also used fuseJs for hot-reload feature. But I have a problem I can't debug the client-side application. I'm always writing to console and there is so much "console.log() lines".
I can debug my server-side. But I can't debug client-side.
Here is my fusejs configuration:
const { FuseBox, WebIndexPlugin, CSSPlugin, CSSResourcePlugin } = require("fuse-box");
const { src } = require("fuse-box/sparky");
const fuse = FuseBox.init({
tsConfig: "tsconfig.json",
homeDir: "src",
target: "browser#es6",
output: "dist/$name.js",
plugins: [
WebIndexPlugin({template:'src/dashboard.html'}),
CSSPlugin()],
});
fuse.dev({port:8080});
fuse
.bundle("app")
.instructions(" > main.ts")
.hmr()
.watch();
fuse.run();
I was run my client-side app like: node fuse.js but I read this docs: https://nodejs.org/api/debugger.html then I added "debugger" line to my code and I run it: node inspect fuse.js
But I can't still debugging it. Somebody suggested chrome debug extension but I don't want change my any config or don't want to be reason for it. Is there any other way before try this extension? Can anybody help me?
I am new in laravel. I installed npm before some days. And now I need editor in my application. So I have installed it via npm using "npm install summernote --save-dev" command. And add below lines in my app.js
require('./bootstrap');
require('summernote');
require('summernote/dist/summernote.css');
require('summernote/dist/summernote.js');
require('jquery');
$(document).ready(function() {
$('#content_editor').summernote();
});
and then compiled the assets via "npm run dev" command. But it will display 2 textarea, one that is in my html and second is summernote textarea. It is not displaying toolbars and other things. It is displaying only textarea.
Can anybody please help me to resolved this problem. I am newly learning laravel. So, I don't have deep knowledge of packages. I just want to display it without including css and js to header. I need it via webpack.
This code in app.js with Laravel 8 does work:
require('./bootstrap');
require('summernote');
require('summernote/dist/summernote.css');
require('summernote/dist/summernote.js');
import $ from 'jquery';
window.$ = window.jQuery = $;
$(document).ready(function () {
$('.summernote').summernote();
});
The trick is in webpack.mix.js configuration file. It should appear something like:
const mix = require('laravel-mix');
let path = require('path');
mix.webpackConfig({
resolve: {
alias: { jQuery: path.resolve(__dirname, 'node_modules/jquery/dist/jquery.js') }
}
});
// Into app.js, you require 'summernote' as always
mix.js('resources/js/app.js', 'public/js');
Source: https://laracasts.com/discuss/channels/javascript/summernote-and-webpack
I am working off of Yeoman's gulp-webapp generator. I have modified my gulp serve task to use my Express server, rather than the default connect server it ships with. My issue is with Livereload functionality. I am trying to simply port the connect-livereload to work with my Express server rather than having to install new dependencies. It's to my understanding that most connect middleware should work fine with Express, so I am assuming connect livereload is compatible with Express 4.
Here are the contents of the relevant tasks in my gulpfile:
gulp.task('express', function() {
var serveStatic = require('serve-static');
var app = require('./server/app');
app.use(require('connect-livereload')({port: 35729}))
.use(serveStatic('.tmp'));
app.listen(3000);
});
gulp.task('watch', ['express'], function () {
$.livereload.listen();
// watch for changes
gulp.watch([
'app/*.ejs',
'.tmp/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', $.livereload.changed);
gulp.watch('app/styles/**/*.css', ['styles']);
gulp.watch('bower.json', ['wiredep']);
});
gulp.task('styles', function () {
return gulp.src('app/styles/main.css')
.pipe($.autoprefixer({browsers: ['last 1 version']}))
.pipe(gulp.dest('.tmp/styles'));
});
gulp.task('serve', ['express', 'watch'], function () {
require('opn')('http://localhost:3000');
});
With this simple setup, when I run gulp serve in my cmd everything spins up fine and I can accept requests at http://localhost:3000.
Now if I go and change the body's background color from #fafafa to #f00 in main.css and hit save, my gulp output will respond with main.css was reloaded, as seen in the bottom of this screenshot.
However, my webpage does not update. The background color is still light-grey instead of red.
Is there perhaps a conflict between my express server config and the way gulp handles its files? Is my Express server forcing the use of app/styles/main.css rather than the use of .tmp/styles/main.css? Shouldn't the livereload script handle the injection of the new temporary file?
Thanks for any help.
EDIT:
I was able to move forward a bit by adding livereload.js to the script block of my index file, like so:
<script src="http://localhost:35729/livereload.js"></script>
I am now able to get live changes pushed to the client. Why was this file not getting injected before? How can I ensure this is getting used programatically as opposed to pasting it into my files?
I was able to get past this issue by removing the app.use(require('connect-livereload')({port: 35729})) from my gulpfile, along with a couple of other lines, and having that instantiate in my Express server's app.js file.
My gulpfile's express task now looks like this:
gulp.task('express', function() {
var app = require('./server/app');
app.listen(3000);
});
I added in the connect-livereload just above where I specify my static directory in Express:
if (app.get('env') === 'development') {
app.use(require('connect-livereload')());
}
app.use(express.static(path.join(__dirname, '../app')));
Once I started using this setup, I was getting the livereload.js script injected into my document, and client-side changes are now auto-refreshed just how I wanted.
Hope this helps someone!
I installed grunt-bower module and followed up the below link:
https://stackoverflow.com/a/22456574/194345
but still not able to access js or css files placed in assets folder.
I installed jquery with bower which is in "assets\lib\jquery\dist\jquery.js" but in browser, tried following URL to access it:
http://localhost:1337/js/jquery.js
http://localhost:1337/lib/js/jquery.js
http://localhost:1337/lib/jquery/dist/jquery.js
it always displays not found.
What is the correct path?
I think you may not have fully implemented the solution from the link you posted, specifically the part about configuring the grunt-bower task. I've edited that otherwise excellent answer to be a but more clear--you need to wrap the configuration in a function and save it as tasks/config/bower.js:
module.exports = function(grunt) {
grunt.config.set('bower', {
dev: {
dest: '.tmp/public',
js_dest: '.tmp/public/js',
css_dest: '.tmp/public/styles'
}
});
grunt.loadNpmTasks('grunt-bower');
};
Then, next time you lift Sails, jquery.js will be copied to .tmp/public/js and therefore be available at http://localhost:1337/js/jquery.js.
I am trying to debug my routes while using NodeJS and the Express framework. I installed node-inspector and got it fully working and open in a Chrome tab. Nevertheless, it isn't showing anything when I have this code in my index.js route
exports.index = function(req, res){
var $ = require('jquery');
console.log($('.title').val);
res.render('index', { title: 'Express' });
};
I'm wondering what the reason behind this is. I hope someone can help!
Edit: When I place a console.log in the app.js the debugger isn't showing anything either.
Other info:
I am using Windows
I first run node-inspector
And then in a second terminal I run node --debug-brk app.js
Not sure if this is the problem:
But this -> console.log($('.title').val);
should be this -> console.log($('.title').val());
But honestly I don't think jQuery works well with Node on the backend side. I have used it with express on the client side, but not on the server side.
I have seen this jQuery install for Node:
npm install jquery
https://npmjs.org/package/jquery
I haven't used this install with node so I cannot be certain this works.