Add a second JS file in Express / EJS app - javascript

here the link to a project I am working on to learn express / ejs / API.
https://github.com/aspnet82/books
I would like to add a second JS file to manage clicks etc.. possibly using jQuery (also vanilla JS is ok... at the moment there is no jQuery installed).
// books.ejs
<script src="public/js/index.js" charset="utf-8"></script>
</body>
But when I add the tag and indicate the index.js as source into the books.ejs file the content of the webpages is not showing anymore, is like either the app.js or the index.js are loaded at time.
If index.js is empty the ejs file is loaded properly.
What is the best way to manage events on a node / express app? For example, if I click on a element. Is this a Js file into the public folder as it is static content? and how do I call this in the app.js file?
Thanks for any help

Related

Adding a javascript file to Angular7 dist folder

I'm building an app in Angular7 and it's ready to go but I need to create a plain javascript (hopefully could be minified) to be included in the websites which are going to use the main Angular app. This script will embed the app into an iframe when users click buttons or links. What I want is to have that script and the Angular app as part of the same bundle but not included as part of the angular app. Just available to control what the host website can do to embed our main app. If there is another approach to solve this problem I will appreciate it
Create custom js file
exports.myFunction = function myFunction() {
alert('External custom js');
}
Add this JavaScript file in scripts array in angular.json file.
"scripts": [
.....
"src/assets/js/custom.js"
]
If in your js file have function myFunction you can declare in the component
import {myFunction} from '../assets/js/custom.js';
I make a demo for custom.js
https://stackblitz.com/edit/angular-custom-js?file=src/app/app.component.ts

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 ?

Laravel 5.4 - Write and use multiple scripts

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.

Importing javascript files on WaveMaker

We have been using WaveMaker and wanted to know how we can go about importing an external javascript file using the platform ?
The external JS file should be imported into a folder in resources
The file path has to be given in login.html of the Web-App
The file path should be of the form "/projectname/foldername/filename.js/"
The functions in the external JS file can be accessed in the login page through its script and the function invoked here is from a sample js file.
The following works if using WaveMaker 6. This probably doesn't work with newer versions of WaveMaker.
Instead of having to add it to each project, try editing index.html in the webapproot directory and add you external js file:
<!-- Boot Wavemaker -->
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="/<path to javascript file>/sha512.js"></script>
Then, in order to have this work correctly in your development environment, add a context tag to server.xml just above the projects directory:
<Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false">
<Context docBase="c:/<Path To Javascript Filet" path="<path to javascript file matching whats in index.html>" reloadable="true"/>
</Host>
In the above Context tag, docBase is the local folder with js and path should match the path placed in index.html.
Doing this you can use the javascript file across all projects without having to add it to resources in the project.

serving static content in code structure generated by yeoman for angular fullstack

I am following the code structure generated by yeoman for angular fullstack.
I want to include a script called core.js in file called app.html.
<script src="core.js"></script>
I do not see express.static anywhere in this for serving static files.
I tried using it but it did not help.
It can not locate it and gives 404.
How do I get around this ?
It had happened before as well but I could get around it by using express.static and serving files from location pointed by it.
It did not help this time though.
Update:
I have app.html in folder called Music. In same folder, I have a sub folder called js where I have placed my core.js file that is to be included in app.html. I tried to access it using absolute as well as relative path but did not help and still gives 404.
In angular, the scripts go in the relevant subfolder of /scripts. Either in /controllers, /services/, /directives, etc. You then reference them in your html as such:
<script src="scripts/controllers/core.js"></script>
As for express.static, express is a NodeJS wrapper for HTTP. So that will be the service you create that lives on some Node server remotely. express.static allows the Node server to deliver static content files from the file set at the remote server. It does not go in your angular application.

Categories

Resources