Laravel 5.4 - Write and use multiple scripts - javascript

I want to know where I should write my js files in Laravel 5.4 for compiling after this files.
Example:
I want to create a test.js file with a console.log('Hello World). Where I create this file ? Have I put it in the resources/assets/js/app.js folder ?
My example code:
Folder resources/assets/js/app.js :
require('./bootstrap');
require('./normalscripts/test');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
In resources/assets/js/normalscripts/test I put console.log('WORKS');
And in the view I loaded app.js from public folder
Other question I have is, if I want to load some differents scripts depending of the html view that I am using, how can I can configure them in the app.js for this ?
Example:
I have test1.js and test2.js. I want to load in the view1.html the test1.js and in the view2.html the test2.js. How could I do this ?
Thanks

The Documentation answers your question:
By default, the Laravel webpack.mix.js file compiles your SASS and the resources/assets/js/app.js file. Within the app.js file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in the public/js directory.

As docs says: https://laravel.com/docs/5.4/structure
The Public Directory
The public directory contains the index.php file, which is the entry
point for all requests entering your application. This directory also
houses your assets such as images, JavaScript, and CSS.
Javascript files must be stored on the public directory, after knowing this, one of the possible correct path would be:
app/public/js/compiled/app.js
And you can include to the JavaScript file on your views like this:
<script type="text/javascript" src="{{ asset('js/compiled/app.js') }}"></script>
Laravel 5.4 is prepared to work with Vue.js, by default you need to have your js files on your assets folder, after compiling them they will be outputted at the public folder.
In case you are using another JS framework you need to indicate the path for the compiled JS files, it should be pointing to the public folder.

Related

Flask js files not loading due to template folder and static folder file structure

So I'm trying to make a website where I'm able to just drag and drop folders containing HTML, js, and CSS files into a "library" directory and have those files served on my flask app. There's one big problem I haven't been able to get over. The problem is that all of these HTML files link to their respective js files using relative paths. For example:
<script src="js/keyboard_input_manager.js"></script>
and these files are 2 folders deep into my (combined) templates/static folder. I could fix this by doing
<script src="library/2048/js/keyboard_input_manager.js"></script>
but that is very tedious, especially when working with so many files.
TLDR: If I were to run my flask app and load a template, it wouldn't load any js or CSS because of relative paths.
Is there any way to go about this without individually changing each path to relate to the templates folder?
Example of my current filesystem:
-FLASK PROJECT
|->library (templates/static folder)
| |->2048
| |->index.html, index.css, index.js
| |->Game2
| |->index.html, index.css, index.js
|->main.py
What I've Tried:
Using Blueprint but I can't create a whole blueprint for every file?
Messing with paths of template folder and static folder
Flask Noob - Please let me know if I'm leaving out any helpful information :) Thanks

saving the javascript in a separate js file of single file component in vue.js

I was working in vue.js and the component script section has got really big now. I want to store the whole script externally, I believe that should be possible,
if I do <script type="text/javascript" src="js/projects.js"></script>
I get error js/projects.js module cannot be located when js folder is located at the same level as Projects.vue is.
so I have
components/
Publish/
js/
projects.js
Projects.vue
what am I forgetting somehitng or doing it completely wrong...
Do I have to have components/Publish/js file included in some path that webpack is aware to make js file import working ?

Import non-module vendor script in webpack

I'm building an app with the AirConsole JS service. AirConsole only provides their library as a .js file you would include in your page with the usual:
<script type="text/javascript" src="https://www.airconsole.com/api/airconsole-1.6.0.js"></script>
However, I'm using Webpack and would like to import the script into my other JS files. I have tried a few methods with no luck:
Create an entry file named vendor which imports the airconsole.js file. This creates a vendor.bundle.js file which I can include on my page
Add the AirConsole path to my index entry point so the script is included in the bundle.js file. With this method I can verify the AirConsole code is included in the bundle.js file but attempting to create a new instance of AirConsole results in AirConsole is undefined
Am I on the right track with these methods? If not, what is the recommended way to import a non-module .js file?
The best way is by an action which we call "shimming". You can check out our new docs page for information. There are a few different ways to do on it (that depend on the needs) for your non-module.
https://webpack.js.org/guides/shimming/

setup angular js application index.html page to include only singe controller

I have written a angular application (MEAN) using nodejs in back-end. There are multiple modules in the application so have multiple controller.
We have to include all the controllers in the index.html file and new one as well if we added in any module.
I have checked the other application which are running on the same stack (MEAN) but in there source code i haven't found all the controllers.
So please help me around the same to optimize my application.
Well then I'd suggest looking into Gulp as it allows you to concatenate and, if you want to, minify your codebase and place it into one file. That single file can then be referenced in your index.html
// Example - Concate the js files together and place them in the dist folder
gulp.task('js', function(){
var src = ['../../file-name.js'];
return gulp.src(src)
.pipe(concat('main.js').on('error', gutil.log))
.pipe(gulp.dest('dist/js').on('error', gutil.log))
});
This is an example of what I used when I worked with Angular1. Gulp places all my target files into the dist folder and into the main.js file which I reference in the index.html file.
<script type="text/javascript" src="js/main.js"></script>

ERROR:tornado.general:Could not open static file

I'm writing a tornado web app and have a file named "static" with files such as main.js, require.js, elasticsearch.js, and d3.v3.js. The last three are just source code for the javascript libraries.
In my index.html file I have the lines
<script>src={{ static_url("scripts/require.js") }}></script>
<script>require([{{ static_url("scripts/main.js") }}], function () {})</script>
Now when I run the app, I get two errors:
ERROR:tornado.general:Could not open static file '...'
for each of my two files that I'm reading in. Has anyone ever had a similar issue or have any insights as to why this is happening?
Are the js files directly in the static directory or in a scripts subdirectory? Assuming you did something like static_path="static" when creating the application, the files need to live in static/scripts/*.js to match the paths you use in your static_url call.

Categories

Resources