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
Related
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!
I'm doing a webpage with Vue (Vue-bootstrap) and I'm having problems to make it works. I'm uploading the content of the dist folder after using npm run build, the project was started using `vue init bootstrap-vue/webpack my-project. I've tried to add a vue.config.js file with the next information:
module.exports = {
baseUrl: './',
//...
}
I've try several times adding this in different folders before build it but I can't make it work.
The result just show the footer, it is in:
http://thegraph.es/Citython/
and the code without this vue.config.js is in the next link:
https://github.com/MGijon/Citython/tree/master/web
I am new with Laravel and I am thinking about one thing.
I have a node_modules folder with bootstrap 4. But I don't want to use the CDN in order to link my template into bootstrap. I want to link the folder that npm installed in my project to my template.
I have my gulpfile.js but I don't think that's what I need.
elixir((mix) => {
mix.copy('node_modules/bootstrap-sass/assets/fonts/', 'public/fonts');
mix.sass('app.scss')
.browserify('app.js');
});
I'm searching in lot of websites but I don't have a good solution. Do you have some Ideas in order to guide me ?
Thank you for taking time on my problem and have a Merry Christmas =)
Can you please indicate all of your css and js files in gulpfile.js elixir with this way:
var elixir = require('laravel-elixir'),
gulp = require('gulp'),
htmlmin = require('gulp-htmlmin');
require('laravel-elixir-uncss');
elixir.config.sourcemaps = false;
elixir.config.css.minifier.pluginOptions = {
keepSpecialComments: 0
};
elixir(function(mix) {
mix.styles(['node_modules/bootstrap-sass/assets/bootstrap.css', 'table.css', 'font-awesome.css', 'main.css'], 'public/css/app.css');
});
elixir(function(mix) {
mix.scripts(['jquery.js', 'main.js', 'table.js', 'init.js'], 'public/js/app.js')
});
elixir(function(mix) {
mix.compress();
});
So finally all css files will make one file name app.css and all js files will make one final file name app.js
Works fine for me, hope this one will work for you too !
Thank You
I use React on server rendering, so the react code need to be used both in node and client, on client side I use browserify.
now suppose I have a component:
var item = React.createClass({
//code here
})
in order to use this component in node I have to require React first, so the component will be
var React = require('React');
var item = React.createClass({
//code here
})
but if I use this component in client via browserify, the React librray will be required, in this case my build js file will be too big. I know I can ignore React in browserify like
browserify -i React
but if I ignore the React then the code:
var React = require('React');
will cause an error "undefined is not a function"
any idea how to avoid this?
You can put your vendor packages in a separate bundle:
browserify -r react -r underscore > vendor.js
And then declare that those dependencies will be provided by an external bundle (or multiple):
browserify -x react -x underscore main.js > bundle.js
And include both in your page:
<script src="vendor.js"></script>
<script src="bundle.js"></script>
You don't need to rebuild the vendor bundle(s) when you build your main bundle (unless you've upgraded dependencies). Usually you don't actually need to do this, and if you're concerned about build times in development: watchify is a a good replacement/addition.
When something is -r'd you can also require it in a plain script tag. This means that there's now a require global, which may clash with other scripts on the page.
<script>
var React = require('react');
</script>
If you're already including React via a separate <script> tag, use the browserify-shim transform to rewrite your require('react') call to use the global React variable.
Add the following config to your package.json:
"browserify-shim": {
"react": "global:React"
}
Use the transform when bundling:
browserify -t browserify-shim lib/index.js -o build/index.js
The bundled version should look something like this:
var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
Alternatively, you can omit the need for the -t browserify-shim argument by adding some browserify transform config to your package.json
"browserify": {
"transform": [ "browserify-shim" ]
}
I am just trying gulp + angular + browserify app and got a huge browserified file, about 2M. While all it does just require angular and a sample controller.
// setup gulp task
gulp.task('browserify', function() {
gulp.src([util.format('%s/app/main.js', JS_BASE_DIR)])
.pipe(browserify({
insertGlobals: true,
debug: true
}))
// Bundle to a single file
.pipe(concat('bundle.js'))
// Output it to our dist folder
.pipe(gulp.dest(util.format('%s/js/', BUILD_BASE_DIR)));
});
//in the main.js
(function() {
'use strict';
var angular = require('angular');
var indexCtrl = require('./controllers/indexCtrl');
var app = angular.module('wohu.app', []);
app.controller('ctrl', indexCtrl);
})();
angular is installed via
npm install angular
The bundle.js is not minified but it shouldn't be that huge. Wonder what the problem is.
Browserify will include a source map in the bottom of the file which can make it seem HUGE. You can strip this out (and you should) for production. You can use exorcist for this (https://www.npmjs.com/package/exorcist) which pulls the source map into an external file for you and can be hooked up to your build process (I use Grunt but will work for Gulp too).