We Keep Coding

JavaScript React hiding source files in sources tab

I have recently developed a website, it's NodeJs (on Ubuntu) and running a React app. The problem is, for example, on Chrome; when you right-click on the website and check sources you can see the source codes and all the files. I want to hide all of them.
In this section, I want to hide the source codes (files) in the server.
I tried couple of solutions on the internet but none of them worked.
For example,
I've added "build": "GENERATE_SOURCEMAP=false react-scripts build", in package.json and then I did run pm2 reload (also yarn build etc)
I've created a file called .env and added this line GENERATE_SOURCEMAP=false in it.
None of them has worked. My website is currently active right now and I want to hide source files, how can I hide these source files from sources tab so people can't see the source codes?

After long research, I have found the solution.
Create a file called .env in your project. The name of the file is just .env.
In that .env file put this line GENERATE_SOURCEMAP=false and save.
Then, run npm run build or yarn build.
This will generate a build folder for production. After that, depends on what you are using, run this build file for running the website. For example, I'm using pm2 on my Ubuntu server, so I've used pm2 serve build 3000 --spa (my website is running on port 3000) Also be careful you are in the same path with the build folder.
That's it. Now all the source code files are gone and website works like a charm.

Forking & modifying npm package. Src or Dist? What to do with dist?

I am working on a VueJS web app. One of the modules it uses is a wrapper for a javascript library installed through npm and packaged to integrate into vuejs. It does not quite fit our needs, we need to add some functionality to it, so I want to fork it and edit it.
The repo has two folders: src and dist.
As far as I understand, src is the actual src code while dist is a minified version for distribution. Questions:
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
Do components installed through npm use the /src/ version or the /dist/ one?
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
Thank you.

Based on your questions, I would suggest you get a bit more familiar into your stack and how to actually build your appication.
Generally speaking the /dist folder contains automatically generated files, which may be uploaded to a webserver of your choice. Since you are using VueJS, you should be able to generate these files by running npm run build.
If I want to edit it, how do I deal with the contents of /dist ? Do I delete it?
As I already mentioned, these files are automatically generated by running npm run build. Therefore everytime you run this command, everything in /dist, will be automatically updated.
Do components installed through npm use the /src/ version or the /dist/ one?
Your working directory is always /src. Dependencies can be used like in any other application (this example uses Axios, which is a http client):
import axios from 'axios';
const httpClient = axios.create({ baseURL: 'https://api.something.com' });
httpClient.get(/* ... */);
If you are a beginner and are not 100% sure about how to use depencencies, I highly encourage you to read this article: An Absolute Beginner's Guide to Using npm
If I delete /dist, work on the /src code, how do I recreate /dist based on the modified /src files?
You do not have to delete anything in /dist. Simply running npm run build automatically will add the latest changes.
Please keep in mind that running npm run build is only relevant for your production environment. For your development environment you always want to use a dev server, which can be started with npm run serve.

Cannot use import statement outside a module error after export ZIP from CodeSandbox

I've downloaded this Phaser/MatterJS example from Codesandbox (->File ->Export to ZIP).
Running it locally returns this error:
Uncaught SyntaxError: Cannot use import statement outside a module - index.js:1
How to fix this?
What I tried so far:
I've installed all dependencies
Updated to latest NodeJS
Running it with a local server

Just as you have seen yourself the javascript that is written in the files is not something that the browsers understand out of the box, and so errors were thrown your way.
To send js that browsers understand, you need to use a tool like webpack, parcel. already in the project you shared parcel is used.
You have to do the following:
install the dependecies of the probject
in the root dir of the project run npm run start
parcel will bundle the files and then open an html page with the results
unfortunately when i tried this parcel did not work for me, there were errors related to JSON loading, however i have managed to get the game to work, by running npm run build, this will output for you the build files in a folder called dist.
Go to the dist folder, and start a local server there and visit the file it should work, however again for me it did not work. but i noticed that its due to parcel not getting the correct relative path of the bundled js file.
To solve that, open the index.html file in the dist folder, you will find that there is one script there
<script src="/js.d8530414.js"></script>
I had to change that to
<script src="./js.d8530414.js"></script> // because this was the correct file in my file system
After that visit the html file in the dist folder, and the game works fine.
Obviously this way of working is not conveninent, since for each change you want to see you have to build the project again using npm run build. You need to solve the problem of npm run start not working, it could be that this problem never occurs to you if you are on different os than mine. If it happens then i suggest updating parcel and trying again, if problem still persists, then you can look here since issue seems related to phaser wanting the json file as json, while parcel compiling it to javascript object.

index.html:
<script type = "module" src = "./js/index.js">
You have to tell the browser that this js file is a module, then it will change some things on the backside for you to use this. This article is very helpful for getting started with modules.

Cannot get Hot Module working in Atom

I've installed everything what I need (webpack, webpack-server), confingured my webpack.config.js and package.json, still the localhost:8080 does not render on safe. Neither does it render on localhost:8080/webpack-dev-server/index.html on safe. On manual reload it renders perfectly.
package.json:
webpack.config.js
npm run dev executes successfully but I also have to reload the page manually after I make some changes in my index.html which is in the parent folder. Also, I always have to run webpack manually in my cmd when I change my .js file. Hot loading should also take care of this if I'm correct.
Let me also add that the app is recompiling when I run CTRL+s but it doesn't actually recompile.

I had a similar problem with live reloading on changes. Try to change link to bundle.js in your index.html
<script src="/bundle.js"></script>
If you look in console output after npm start there will be same like
webpack output is served from /
Dev-server takes bundle from root directory of your project, not from /js/bundle.js

Metalsmith.js: How to build to same directory as build script?

I am completely new to metalsmith. I've been following this tutorial: http://www.robinthrift.com/post/metalsmith-part-1-setting-up-the-forge/
I want to build my site to the root directory of my project (the same dir as the build script). I want to do this because I want github pages to play nicely with it. But when I try to build, I get this error: Error: EBUSY, resource busy or locked
Here is my dir structure:
project_folder/
_site-src/
index.html
node_modules
build.js
package.json
Here is my build.js source:
var Metalsmith = require("metalsmith");
Metalsmith(__dirname)
.source("_site_src")
.destination(".")
.build();
What I want my project dir to look like:
project_folder/
_site-src/
index.html
node_modules
build.js
package.json
index.html
I don't know what I'm doing wrong. I appreciate any help.

The error message:
Error: EBUSY, resource busy or locked
seems to be a file locked/in use error. (I'm not that familiar with Node.js errors)
I would assume this is happening when Metalsmith tries to clean the build folder (which is your solution folder i.e. a really bad idea). This is on by default but it can be turned off.
To turn this off use:
.clean(false)
before you build.
BUT if you remove items from your source folder they won't be removed from your build folder. You might be able to handle this by a custom clean-up script or plugin.
I'm not experienced with github pages but I think there should be a better alternative to the avoid the problem.
You could possibly add a symbolic link to the build folder from the project folder for the index.html file.