Develop Reference

Only js file per page in laravel

In a Laravel setup using Laravel mix, the mix.js(['resources/js/app.js','resources/js/new-offer.js'], 'public/js') puts everything in one file, app.js.
What I am trying to achieve is to have multiple .js files each for one page. For example. I want to have index.js for my index.blade.php and new-offer.js for my new-offer.blade.php etc ...
The idea is that each page is server side rendered and each page represents a static page comming fromm the server and each one should has it's own set of js files that works in. How this should be done, is it recommended, what are other arhcitectures ?

You can use multiple concatenated .js(...) statements. In your case:
mix.js('resources/js/app.js','public/js').js('resources/js/new-offer.js' ,'public/js')
This will createapp.js and new-offer.js files in your public js folder

Can anyone explain me why we use a public folder to hold css and image folder?

Can anyone explain to me why we use a public folder to hold CSS and images folder?I am new to node js and trying to learn in-depth about it.

As the name suggests "public", it is to serve static files (which don't change) like CSS, JavaScript, images, etc.
We keep these files in the public folder and expose the entire folder through proper means.
Now, whoever requests these files (The browser) which are present in this public folder can access the files . Note that you can have any name and expose it , the "public" is just a proper and common name.
Also, by default your folder will not be accessible. You need to enable that.
From express documentation,
For example, use the following code to serve images, CSS files, and JavaScript files
in a directory named public:
app.use(express.static('public'))
Now, you can load the files that are in the public directory:
http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html
https://expressjs.com/en/starter/static-files.html Check this for more info, if you use express.
Lets say you don't keep the files in a folder that is not made public or exposed, what will happen is the browser or any client that tries to retrieve the image or CSS will not be able to access. In this case you need to enable separate routes for these files independently and for all the public files, which is time consuming and complex.
Let me give you an example, consider your webpage has an image of cat in an tag in html. What browser does is it will make a get request to get that image from the server, if the image is not in the public folder or there is no route setup to handle this file, the browser will not be able to display the image in the webpage.
Note: This is why private pictures are not saved in a public directory, you better have a dynamic route that handles those pictures. Only authenticated users will be able to access. If you place private pictures in public folder, anyone can access it.

Nodejs is simple a server side scripting language. Its main work is to process data that comes from the client side (i.e HTML) or frontend and store it to database. After the data from the html are processed then it is needed to be sent back to the browser. On sending data from server to the client , the rendered element need to have different styles and js and image as well. These things are to be made available publicly because the browser should be able to access it and process in client side. so for this and images, css, js and docs as well, we use public fonder.
or putting it simple, those static (constant) files which are accessed by the browser (not server) are kept in the public directory.

React JS - Reading environment configurations from external property file

Problem :
I am new to React JS, and looking for an option to read environment configs from an external property file. This problem is more specific for one of my clients, who is looking to have an option to change the environment files dynamically. E.g. change the hostname/port dynamically whenever there is a change. The build process is not owned by my client. I create a minified final package, which my client deploys it on tomcat/web server.
Tried Solution :
With some read-outs, I have configured .env files for different environments and able to successfully read configs from these files. However, these are more of a build process environment files. And, I am trying to find a way to read the configs from an external source after my package is created.
Possible solutions : Here is one possible approach I can think of -
Read external property file using libraries like "properties-reader". I will provide the property file as part of my release bundle (i.e. build folder). My client can change this property file whenever required.
Please suggest if this is the correct approach or is there a better solution to this problem?

A Solution which worked for me !!
1) Create a "config.js" file inside public folder of react project. Sample Content of the
"config.js" file -
window.env = {
API_DOMAIN_ADDR: "http://localhost:8080"
};
2) Refer "config.js" file inside index.html. Code for index.html will be -
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/config.js"></script>
</body>
3) Now, content of the config.js file will be accessible to react code. Sample code to retrieve the value of config.js variables -
window.env.API_DOMAIN_ADDR
Add this code wherever variable value needs to be accessed. I added this in my service class which is making ajax call.

I would suggest using something like Firebase Realtime DB. I had a similar requirement for pointing the App builds to production or development server APIs for my company. For this, we use to load a Firebase Config and from there the UI used to pick up the host server endpoint.
Advantages:
This saves you from deploying your build folder every time.
This is realtime and less prone to errors.
FirebaseDB is free for small stuff like this.
The second option is to create two environment files which I see you have already done.

File upload - Node Js(Express) to React Js. How to get correct image path?

I'm working on local system and developing file upload feature in node js. Currently my file structure is like below.
Project
..client
.... source code of React App
..Server
....uploads
......avatar
........image.png
....index.js
Here server is Node js code and Client is React js code.
So I've developed one API to upload image into 'server/uploads/avatar'. As you can see there is one image named 'avatar.png' is there in 'uploads' folder.
My Question is that what path to show to access that particular image with full domain path? I want this kind of result in API.
Ex.
{ avatar: "http://192.168.1.100:3000/*" }. Consider * as remaining image path. But i'm not able to access image on client side. I don't know if this is the correct way.
May be i need to set static path for Nodejs in index.js file. Not sure.

You should set static folder path in express configurations like below:
app.use(express.static('public'))
ofcourse you will need to create new folder with this name and then you can put all the assets in that, after that you will be able to access files like below:
http://localhost:3000/kitten.jpg

HTML/Javascript: Enabling folder access from a subdirectory

I have a simple HTML file with some JavaScript that I would like to run locally (as opposed to deploying to a server). It is embedded inside a larger project whose file structure I would like to maintain. For example, the structure is something like this:
project level folder > src folder containing folders & files I would like to probe
> separate, non-project util folder > HTML & JS files I would like to run against src
I am aware that certain browsers do not allow this for security reasons (as pointed out here), but since I control all of the files - is there a way for the src folder/files to somehow indicate that they will allow the 'separate, non-project util folder' to access them? Maybe some kind of project-specific settings somewhere? I am aware that this can be done in server settings, but as I mentioned above I'd like to be able to run it locally without the need for a server.
The JavaScript that is attempting to access the src files uses RequireJS, in case that helps.

Here is what I ended up doing:
I wasn't able to provide full access exactly this way, but instead I setup a dummy HTML page in the project level folder that clicks itself to redirect to the HTML file located in the separate, non-project util folder. This allowed me to keep everything but that one, very small file separate but not have issues with file access.