We Keep Coding

Run a npm based web page on Github

I'm trying to run a web page based on npm on my Gituhb repository (paul.github.io) . In it's Readme.md we can find :
# Three.js Journey
## Setup
Download [Node.js](https://nodejs.org/en/download/).
Run this followed commands:
``` bash
# Install dependencies (only the first time)
npm install
# Run the local server at localhost:8080
npm run dev
# Build for production in the dist/ directory
npm run build
```
On my laptop (windowsà I succeed on installing nodejs and npm. However, I didn't find how to install these on github. Any Idea please?

In the light of the comments, I fixed the issue by building the projet with "npm run build", and I saved the output which has been made in dist/ folder in my Github repository. Thanks again to all contributors.

Where is json.config file found in the root of the project?

I am new in development field.
I have already made an app in create-react-app.
But now I have been asked to submit json.config file..
It is mentioned that -
The file must be called config.json and must be stored in the root level of your project.
Here is the format of the configuration file:
{
"install": "npm install",
"run": "npm start",
"port": 3000
}
I am unable to find it in my project folders and dependency folders and files.

Create-React-App creates this file for you under the hood. So you don't have to setup it. You can open the terminal and write npm install and after npm start. That will open your web app in http://localhost:3000.
More details https://create-react-app.dev/docs/available-scripts
Edit: Dependencies should be inside the package.json in the root directory.

How to fix "'BROWSER' is not recognized as an internal or external command"?

I am trying to run react-d3-tree-demo following this README.md at https://github.com/bkrem/react-d3-tree-demo
After following the other steps, I got stuck on the second step of trying to run the app locally. The command line returns an error: "'BROWSER' is not recognized as an internal or external command, operable program or batch file," when I try to execute "npm run dev" in the react-d3-tree-demo directory that I cloned from the same repo.
The README.md page instructs to run "npm run dev" in both the react-d3-tree and react-d3-tree-demo directories. I actually got an error when I did that command in the react-d3-tree directory where the command line said the linebreak was incorrect, but I went into the eslintrc.js file and added "'linebreak-style': 0," in the module exports which resolved the error. I've tried turning off my Avast antivirus software which was suggested on another page. Nothing has worked so far.
To reproduce my problem:
Demo:
Clone this repo: git clone https://github.com/bkrem/react-d3-tree-demo.git
cd react-d3-tree-demo
Run yarn or npm install OR run bash ./setup.sh and skip to Running locally
React-D3-Tree library:
Inside the react-d3-tree-demo directory, clone the library: git clone https://github.com/bkrem/react-d3-tree.git
Run yarn or npm install
Running locally:
Set up 2 terminal windows, one in the react-d3-tree-demo directory, the other in react-d3-tree-demo/react-d3-tree (i.e. the sub-directory into which we cloned the library itself)
Run yarn dev/npm run dev in each
Any changes made to the demo app or the library should now automatically rebuild the library and reload the app with the fresh build (via nodemon).
I expect the react app to open a page at localhost:8000 that looks like this: https://bkrem.github.io/react-d3-tree-demo/ however, I get a message from the command line that was detailed earlier. I'm not sure why they told me to clone react-d3-tree inside the demo, I'd appreciate any explanation of that also.

Do an npm install of cross-env in your cloned repo:
npm install --save cross-env
Then in your cloned repo, open up package.json and change dev to this:
"dev": "cross-env BROWSER=none yarn clean:lib && webpack --progress --colors --watch --env dev",
Basically adding this to the beginning of the command: cross-env BROWSER=none
BROWSER is an environment variable, and you can use the cross-env package to properly handle it.
Now try running npm run dev again, and it should work.

There are two fixes I found that work perfectly well
Install cross-env (npm package cross-env) npm install cross-env then you change your dev script to
"electron-dev": "concurrently \"cross-env BROWSER=none yarn start\" \"wait-on http://localhost:3000 && electron .\"",
Install concurrently and run this (on windows though)
"electron-dev": "concurrently \"SET BROWSER=none&&npm run start\" \"wait-on http://localhost:3000 && electron .\""
please note that you also have to install concurrently if not already installed

i success using cross-env, so try this one:
"dev": "concurrently -k "cross-env BROWSER=none npm start" "npm:electron"",
"electron": "wait-on http://localhost:3000 && electron ."

Try this: paste this BROWSER=none in your project's .env file then save and re-run the project. Because maybe this a path related issue.

Bundle.js isn't found when deployed to gh-pages

I used react-create-app for building my application and deployed it to github-pages while strictly following the instructions I was given during the process. When I load the page I get an error in the console: "Failed to load resource: the server responded with a status of 404" (Bundle.js). The app runs fine when I run it using "npm run start" locally, finding all paths, but something shady is going on on github-pages. Can somebody help me fix this issue?

This is the official documentation on how to deploy your React app to Github Pages. You need to do the following:
In package.json set homepage to
{
"homepage": "https://myusername.github.io/my-app",
}
Install gh-pages
yarn add gh-pages
Add deploy and predeploy run scripts to package.json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
Deploy it
yarn run deploy
The gh-pages branch will be automatically created, and the generated files pushed to this branch.
Relative path for "homepage"
I had 404: Not Found errors for the generated Javascript and CSS files, and it was only solved when I set the homepage (in package.json) value to
"homepage" : "."

I think you'd have to set the "homepage" variable in your package.json
and this would be your npm script command in package.json
"homepage": "https://<username>.github.io/<repo_name>/"
....
"scripts": {
...
"deploy": "npm run build&&gh-pages -d build"
...
}
More here in the docs : https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#building-for-relative-paths

About MEAN 2 stack using angular-cli

I'm studying MEAN 2.0 . I need to do "ng build" before running "node server.js".
I would like to ask if do I need to do (ng build) everytime I changed something in my angular side? Because when I'm using only angular-cli, when I changed something and my server is still running. It will show the changes. I tried to change something but when I re-run my node server nothing happens.

Yes you need to do ng build before running node server.js.
ng serve :- serves on a server,
node server.js :- doesnt serve on the same port, it runs on the port you define in your server.js, it reads from the build folder, which will need updated fies.
Live reload wont work :(
You can
1. write tasks for it
2. write script in package.json which does ng build && node server.js

If you arranged your folder structure to be:
|_server
|_ server.js
|_ public (angular-cli project)
|_ dist
|_ src
|_ package.json (client)
|_package.json(server)
Considering you've the default angular-cli package.json,
Add concurrently using npm:
npm install concurrently --save-dev
All you would need is to add those scripts in server package.json:
"scripts": {
"client":"cd public && ng build",
"server":"ndoe ./server/server",
"start":"concurrently --kill-others \"npm run client\" \"npm run server\""
}
Now, all you have to do is:
npm run start