I'm currently attempting to refactor my repeated JavaScript code from my xyz.scala.html files into a separate main.js file, which can then be linked to using something like the below (from my scala.html files):
<script src='#routes.Assets.at("javascripts/main.js")'><script>
And using the below in my conf/routes file:
GET /js/*file controllers.Assets.at(path = "/public/javascripts", file)
Having Googled around I'm struggling to find a simple way of using JS from a file in my Play Framework application and setting up the conf/routes file.
Does anyone know a simple way of getting this to work?
Public assets folders
Record in the routes file
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
Script loading in twirl template
<script src="#routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
Related
I'm a beginner at web dev, I'm currently working on a project, but the javascript file insert.js won't load. The html document, upload.html is inside the public folder, and the javascript is inside the main folder.
I used the following path to link the javascript file,
<script src= "../insert.js"></script>
But it didn't seem to work, so I then tried moving upload.html to the main folder, which is HR and I used the following code,
<script src = "/insert.js"></script>
And this didn't work either, so I then tried moving insert.js to the public folder, and used the same path as I have mentioned above, but, then I couldn't export variables to app.js which is located in the main HR directory.
The image I have attached shows location of the files
I don't get what could possibly cause this, I think I should mention this as well, but I got an error while running my javascript file in node. So I inserted the following code in node_modules/whatwg-url/dist/encoding.js:
const {TextDecoder, TextEncoder} = require("util");
I don't know if this has anything to do with my issue, but I thought I would just mention it.
localhost can only access your public folder, so you have to move insert.js in the public folder and do:
<script src = "index.js"></script>
Also if you have node modules in that javascript file it wont run because it can't run the modules and you would have to use a bundler for that js file like webpack, rollup or snowpack.
Normally I use a javascript file to import different JS files. Now having a difficulty to do it so. The project I am working on went wild and have a 5Mb JS file and I only want a piece of it to load on one page.
In a Javascript file I could import the Module like this,
import {Module} from "./components/Module";
and use as
Module.init();
But what I am trying to do is load this Module in a blade file. The js file lives under resources/assets/js/components/Module.js
Because this folder is not public I am not sure if I use something like
<script src="../../../resources/assets/js/components/Module.js"></script> on the page. Well, tried it but did not work as well.
All I want to be able to init the JS like Module.init(); inside my blade file.
I would really appreciate and directions as I am a bit confused right now:(
You cant import your files from resources directory, the only visible part of your application to users should be public folder so you should put your file into the public folder. for example
public/js/modjule.js
and import it like this
<script src="{{ asset('js/module.js') }}"
if your site is on a https protocol you can use secure_asset()
<script src="{{ secure_asset('js/module.js') }}"
I want to use this package for audio equalizing animation. I want to add it in my Laravel project so I copied two files which are
jquery.reverseorder.js
jquery.equalizer.js
to /myproject/node_modules/myjss/
and added these two lines
import 'myjss/jquery.equalizer'
import 'myjss/jquery.reverseorder'
into /myproject/resources/js/app.js
but it returns TypeError: $(...).equalizer is not a function
How can I fix it?
You don't need to save those files like that. Just save them in laravel's assets folder. then in laravel, you should include it like this <script type="text/javascript" src="js/jquery.reverseorder.js"></script> . in src path, you can use asset_path of laravel. You can include this path in js or laravel's blade template.
I want to make an application for which I use ReactJS for front-end and Laravel for the back-end. I have both ready, the Laravel part is done and so is the ReactJS.
I tried the most stupid thing a sane person would do, copy-paste ReactJS build folder to the Laravel's views folder and Laravel's assets folder. It does not seem to be working. It says missing references to all JavaScript and CSS files.
I changed index.html into index.blade.html.
And, I thought, perhaps, I linked to a wrong path for CSS and the JavaScript. I changed /static/css/main.ac1cfcf0.css to main.ac1cfcf0.css and /static/js/main.551bf7d2.js to main.551bf7d2.js in my index.blade.html but I still receive the same error.
What can I do to integrate the front-end and back-end into one project properly?
If you're using Laravel Mix, you can easily create and transform your JS files to use ES6 and React: https://laravel.com/docs/5.5/mix#react
In your webpack.mix.js file, compile your assets like this:
mix.react('resources/assets/js/react-app.jsx', 'public/js');
Then, in your blade file, bring in your bundle like this:
<script type="text/javascript" src="{!! asset('js/react-app.min.js') !!}"></script>
I am new in asp.net mvc and I am trying to include .js files in my project but I could not access it on my browser. Like it.
#Scripts.Render("~/bundles/responds.js")
#Scripts.Render("~/bundles/jquery-1.11.3.min.js")
#Scripts.Render("~/bundles/jssor.slider-22.0.15.mini.js")
<script type="text/javascript">
</script>
Anyone can help me, how can I add these files in mvc project? These files exists in Scripts folder.
You can manually add a .js file to a view with the following example code
#model YourNameSpace.ViewModels.YourViewModel
#Scripts.Render("~/Scripts/yourScript.js")
If you want the files to be bundled & you can add them in App_Start/BundleConfig.cs
Example:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle(("~/bundles/customBundle").Include(
"~/Scripts/yourScript.js",
"~/Scripts/anotherScript.js");
}
You can render your script files for the whole application in the ~/Views/Shared/_Layout.cshtml file or any master page by adding the following code
#Scripts.Render("~/bundles/customBundle")
You can inspect the .js file by browsing to the root of your application & add the path of the .js file or bundle (for this example)
http://localhost:9654/bundles/customBundle
http://localhost:9654/Scripts/yourScript.js
I have solved my problem by just drag and drop script files from Scripts folder to at desired place in Index.cshtml and Visual studio auto generate below code.
<script src="~/Scripts/jquery-1.11.3.min.js"></script>
<script src="~/Scripts/jssor.slider-22.1.5.mini.js"></script>
Which includes the script files in asp.net MVC.
You can use C# code to calculate & generate the right file address as follows:
<script type="text/javascript" src='#Url.Content("~/Content/vendor/jquery/jquery.min.js")'></script>
This pattern can use in *.cshtml files.