We Keep Coding

Where do I include custom JS and CSS files in Laravel 9?

I'm manually downloading these CSS and JS files from: https://github.com/1j01/os-gui
I'm not sure where in my Laravel 9 app I should place the CSS and JS files.
What's the proper way to do it? Should I just download and place the files in the public directory? But shouldn't I be utilizing Laravel 9's Mix to compile the JS CSS files, and if so how can I go about doing that?
This is the list of files I want to use:
css/layout.css
css/windows-98.css
css/windows-default.css
js/$Window.js
js/MenuBar.js
js/parse-theme.js
js/demo.js
js/jquery-3.3.1.js // i'll probably use v3.6.0 (or whatever is the latest version)

If you want those files to be optimized and controlled and also want that every request does not download a bunch of css and js files, you should use laravel mix which is installed by default
You should put those files inside /resources folder and compile them into a single file, adittionally you could purge with the mix purge plugin so your assets will be purged/optimized.
This is really simple in your webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.css('resources/css/app.css', 'public/css', [
// and in your app.css you can #import every css you need to load
]);

Dynamically set the file path for static files in the index.html file in a React app via a JSON file

I'm trying to dynamically set the file paths to the static files (js & css) in the index.html file of my create-react-app such that they can point to different sub-directories depending on what I set in a settings.json file.
Example:
If I set the base_url in my settings.json file like this:
{
"BASE_PATH_URL": "/subdirec1"
}
I expect the file path in my index.html file to be like this:
<script src="/subdirec1/static/vendors/js/core/jquery-3.2.1.min.js" type="text/javascript"></script>
I'd be grateful if anyone could help me out here. Thanks!

If you're using webpack, you can use webpack variables that you can set within the webpack config object, which themselves come from a .json/.js file.
This is the example you can use if you're using webpack!
WARNING: Don't use the command below before reading up on it, because it will make a big mess of files you might not understand yet!
Since you're using create-react-app, I think it uses webpack under the hood but you need to npm run eject it to have more complete access to its configuration!

Include AngularJs javascript files into Angular cli

I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.

Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.

Transfer a file, then inline it without Webpack bundling/loader code

I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!

How to move tag script in template to a .js file?

I want to move tag script content in template to a .js file(e.g. in this way, I can use JSHint, whatever) and put it into template directory.
I found the document that said it can treat .js file as a static file, so I must run python manager.py collectstatic every time when I deploy my .js file to server(because I need debug my js code). That is very trivial.
I want to put my .js file and template file which including the .js together, so how to do it?

You can use the --link option in collectstatic to symlink your files rather than copying. That means you only need to run collectstatic again when you are adding a completely new static file, since updates to existing ones will be automatically seen via the symlink.

I add this line in my template file (e.g. template file is path/to/foo.html):
<script>{% include "path/to/send_bill.js" %}</script>
so it include .js file and add into template .html file as origin, but I can modify my .js file separately!
I don't know is there some side effect?
#Daniel Roseman your solution is very graceful.