We Keep Coding

Sails autodelete a resouce I added in layout

I'm using Select2 in a sails project (https://select2.org/getting-started/installation). For that I added the following lines in my layout.ejs
<link href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
But when I run the application with the command sails lift the two lines are automatically deleted from the layout.ejs.
I know it's not the editor (I'm using vscode) because I test that looking for the problem. Do you know what I can do to solve that?

Sails uses Grunt to generate files and automatically add resources into layout.
Scripts are inserted between <!--SCRIPTS--> and <!--SCRIPTS END-->
Styles are inserted between <!--STYLES--> and <!--STYLES END-->
So if you add resources manually between these tags, they will be deleted by Grunt.
See https://sailsjs.com/documentation/anatomy/tasks/config/sails-linker.js for more informations

Adding script in Laravel

I am fairly new to Laravel but I'm getting to grips with it.
At the moment there a partial blade that just includes scripts from the public assets folder, like below.
<script src="{{asset('js/jquery-3.2.1.min.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('js/bootstrap.js')}}"></script>
<script src="{{asset('assets/library/slick/slick.js')}}"></script>
<script src="{{asset('assets/library/slick/slick-init.js')}}"></script>
<script src="{{asset('assets/library/tinymce/jquery.tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce.min.js')}}"></script>
<script src="{{asset('assets/library/tinymce/tinymce-settings.js')}}"></script>
<script src="{{asset('js/isotope-docs.min.js')}}"></script> <!-- JQuery and Bootstrap JS -->
<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('js/grid.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
<script src="{{asset('vendor/laravel-filemanager/js/lfm.js')}}"></script>
I feel like this is a bit messy and far from optimal.
I did some poking around in resources/assets/js and saw that by default Laravel uses bootstrap.js and then grabs this in app.js. Also the items in bootstrap.js seem to be grabbed directly from the node_modules folder.
Is it better practice to instead include all the JavaScript libraries in bootstrap.js?
If so, could I install all these libraries via NPM and somehow include them in the bootstrap.js file? At least the ones that are available via npm.
Then in my footer I could just include app.js instead of my individual scripts.

You can use Laravel mix to concatenate, minify/uglify your JS, style assets.
Laravel mix documentation

How to use concatenated minified file in Gulp

I'm brand new to Gulp and I was able to create a site.min.js file, which as I understand is the minified versions of my JavaScript files.
How do I take advantage of that?
I'm not sure if I'm on the right track, but should my index.html also be getting modified to only load the new min.js file?

When you minify a file, the result is a completely different file. You need to link it in your page in order to use it.
<script src="site.min.js"></script>
The production version of your index.html file should only link to the minified version and any non-minified version should be removed.
There are gulp plugins which help with this.
gulp-useref is popular
gulp-html-replace is quite flexible
gulp-usemin
gulp-htmlbuild
They all offer a similar feature where you can specify blocks within HTML comments that will be replaced by the minified version.
<!-- build:js -->
<script src="website-module.js"></script>
<script src="core.js"></script>
<!-- endbuild -->
With the right options within your gulp task, it would become:
<script src="site.min.js"></script>

django css: general query on CDNs and crispy forms

I have set up a page and have implemented bootstrap using the CDN code that is recommended to access the online bootstrap server:
for the CSS:
<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">
Javascript:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
However eventually my site will have to go live and I'm not certain that this code will suffice when that happens and I feel I should download the actual bootstrap code.
Furthermore if I download the bootstrap code properly and put it in a hypothetical media folder called "css2" such that it won't interfere with my own custom css files, where do I then put crispy_forms.
As of now I am holding them in the downloaded crispy forms files within "media"- on the same level as "myproject" but the "{ load crispy_forms}" tag doesn't look in the media folder because the "CRISPY_TEMPLATE_PACK = 'bootstrap3'" does not specify a path to look for the crispy forms content... the crispy forms website tells to look up the django documentation for how to organise my media folder but searching the website under "cripy forms" returns nothing.....
Finally, I have added crispy forms to my installed apps:
INSTALLED_APPS = (
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myproject.myapp'
'crispy_forms', ###Registered
)
However when i migrate and run the server I get an error:
ImportError: No module named myappcrispy_forms
so I rearranged the order of the modules and then got this error:
ImportError: No module named crispy_forms
Should i download bootstrap properly or do the CDNs suffice?
Where do I store the bootstrap code and how will it affect my own CSS code?
How do register the module crispy_forms? and where do I store the crispy forms folder there is little documentation on this?
Thanks

Using CDN has it's pros and cons: it allows you to cache bootstrap files, so that your site pages should be downloaded faster from the second time. On the other hand, you do not usually need to use all the bootstrap css functionality, but only a tiny bit of it. In that case local and "self-cleaned" bootstrap files are prefered. Project collectors like Gulp can really help you with the "cleaning" of bootstrap css.
I usually store bootstrap files in /static/css/bootstrap.min.css
and /static/js/bootstrap.js - in the same folder with other css and js files. In order to give your own css more priority just link it in html file after bootstrap files.
Well, personally I think crispy_forms have quite clear documentation. To start using it you should only: install it, add app to Installed apps in settings.py and point to the css framework you want to use by setting a template pack variable. From docs you can see that crispy no longer upload it's own bootstrap files. It will use yours instead.

SystemJS, Browser Sync Setup

I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.
<script>
.......
System.import('./app/boot')
.then(null, console.error.bind(console));
</script>
The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my "gulp serve" build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?
Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.

Well you are not posting you code from where we detect the whats error is in your code. but yes gulp with browsersync is a very good combination to make our project run smoothly. i think you are not importing your bootstrap file properly that's may be the error.
still me to used same project setup for my project. i used gulp task with the browsersync in the angular2 you can refer to my repository for the help. this repo may help you to figure out whats the error
https://github.com/MrPardeep/Angular2-DatePicker

I had similar issues after changing my build process to compile everything into a dist folder instead of root. I tried adjusting baseUrl in System.config, adding maps, paths, manually adding the .js extension to imports etc.
Lessons I learned:
The sequence of loading scripts and configuring libraries is crucial.
System.config needs to be set before including Rx & angular libraries.
Then you can import and bootstrap app.
Following #pardeep-jain advice to look at his datepicker repo this worked for me.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: '/node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>