Develop Reference

GitHub Pages User Page Showing Blank Screen

I recently created a barebones React.js website and deployed it to GitHub pages as a user page, meaning the page should have a url of propertycashflowapp.github.io. The GitHub repo is public and can be found here.
Here is the directory tree:
├── README.md
├── index.html (this index.html is a duplicate of the one in the public directory)
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── reportWebVitals.js
└── setupTests.js
I followed all the steps in the GitHub Pages documentation. When I run npm start, the webpages shows up correctly. However after deployment when I type the url https://propertycashflowapp.github.io, I only see an empty screen.
I tried to move my index.html file to the root directory as was advised online, but it did not work. I also tried to change the line
"homepage": "https://propertycashflowapp.github.io/" many times to include the path to the index.html file, but this did not work either. I also added <BrowserRouter basename={process.env.PUBLIC_URL}> to my index.js that wrapped around my <App /> JSX tag, but this did not fix it either. I've looked at several other answers for similar questions but wasn't able to fix my issue.
All help would be greatly appreciated, thank you!

You are trying to deploy the react project with the devlopment code or the source code. This code typically contains unminified and uncompressed JavaScript and CSS files. It is not optimized or suited for production use.
You need to run npm run build command.
To know what the command does read
What is "npm run build" in create-react-app?
There are two options to deploy you code.
Option 1: use the build folder instead of the complete react project
Use this option if you want easy deployment and do not intend on changing your code.
In your local development environment, build your React application using the command npm run build. This will create a "build" folder with the optimized production version of your application.
The build folder is the folder which will contain index.html file.
Commit and push the build folder to the GitHub repository.(should be the root folder)
cd build
git init
git add .
git commit -m "message"
git branch -M
git remote add origin https://github.com/propertycashflowapp/propertycashflowapp.github.io.git
git push origin main
Enable GitHub Pages for your repository by going to the repository settings and selecting the "main" branch option under "GitHub Pages" section.
Option 2: using gh-pages
Use this option if you intend to write new code regularly. (needs setup)
Please read this article first: https://www.c-sharpcorner.com/article/how-to-deploy-react-application-on-github-pages/
Install the gh-pages package in your React app by running npm install gh-pages --save-dev in the command line.
Add a homepage field in your package.json file. This field should contain the URL of your GitHub Pages repository, which will be in the format https://propertycashflowapp.github.io.
Create a new script in your package.json file for deploying to GitHub Pages. For example, you can add the following script:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
}
Sample package.json file can be found here
Run the deploy script by executing npm run deploy in the command line. (If you change any code run npm run deploy for deploying the changes.)
Wait for the deployment to complete and then visit the URL of your GitHub Pages repository to see your app live.
If you encounter any issue in the process, you can check the logs for troubleshooting.
Hope this helps.

How to structure static javascript files in Node.js (Express) + Typescript application and what is the right way of using environment variables?

I am working on a Node.js (Express) + TypeScript application which implements the MVC pattern. This is how my project directory looks like
.
├── dist/
├── LICENSE
├── package.json
├── package-lock.json
├── public/
├── README.md
├── src/
│   ├── app.ts
│   ├── controllers/
│   ├── routes/
│   └── views/
└── tsconfig.json
Now, I know I can put all the static files like all the JS files for the client-side inside the public folder but that is if I am writing my application in JS. As I mentioned, I am using TypeScript for this application and want to write my client-side logic using TypeScript. But I don't know, for example, what should be the folder structure inside the src directory and also If I am marking the public folder (which is outside the dist folder) as static using express.static(), how can I tell the TS compiler to move the files for client-side code to the public/js directory, instead of putting it inside the src directory along with the server-side code.

How to import a custom local version of a node module

I'm currently developing a javascript project that has a kepler.gl dependency, but I need to edit the kepler.gl source code.
I'm unable to import the modified version correctly.
Currently, it only works if kepler.gl is installed via npm/yarn and the import looks like this:
import KeplerGl from 'kepler.gl';
It's important to remember that kepler.gl folder has it's own node_modules directory.
My current directory structure:
MyApp
├── index.html
├── kepler.gl
├── node_modules
├── package.json
├── package-lock.json
├── README.md
├── src
├── webpack.config.js
└── yarn.lock
I've tried several ways, but I want to know the recommended way because I want a solution that will work with any configuration of babel, eslint, other packages installed, etc. that works with the original package.

After some days of research I've found that the probably the recommended way is using link with yarn or npm:
The documentation is clear:
https://docs.npmjs.com/cli/link
https://yarnpkg.com/lang/en/docs/cli/link/

How to use eslint plugin modules located in parent directory?

I have some services organized into a monorepo in such a fashion:
repo_root/
├── services/
│ ├── service_one/
│ ├── service_two/
│ └── service_three/
├── package.json
├── node_modules
├── .eslintrc
Additionally, each individual service has its own package.json and node_modules. I would like to use the eslint configuration stored in the repo_root directory to lint individual services. My problem is that when I try to run something like
eslint services/service_one
for example, it fails to find the eslint plugin modules that are required by .eslintrc and installed in the node_modules directory of repo_root.
I'd like to avoid redundantly requiring these plugin modules in every service. Is there anyway to configure eslint to intelligently find the modules even though they are in the parent directory of the services themselves?

For anyone wondering, my problem was I was running the command using a globally installed eslint, which in turn looked for global modules. After changing it to run a local version of eslint, everything worked fine!

Cannot find module './fonoapi.node.js' but when listing, the module is shown

I am trying to use fonoapi-nodejs. I installed it using npm install fonoapi-nodejs --save.
Then when I try to acces it using var fonoapi = require('./fonoapi.node.js');
It gives me an error Error: Cannot find module './fonoapi.node.js' and when I list the npm packages using npm list --depth=0 the package
├── body-parser#1.16.1
├── cookie-parser#1.4.3
├── debug#2.6.3
├── ejs#2.5.6
├── express#4.14.1
├── fonoapi-nodejs#0.1.1
├── morgan#1.7.0
└── serve-favicon#2.3.2 is listed there.

Change require('./fonoapi.node.js') to require('fonoapi-nodejs') to load from node_modules.
When you do npm list, that is showing the contents of your node_modules directory. But you are including ./ at the start of the path, which tells require() to use a relative path rather than the node_modules directory.
Additionally, npm list shows that the module name is fonoapi-nodejs and not fonoapi.node.js.
(And yes, it appears that the documentation for fonoapi-nodejs shows the usage you have. In this situation, it's wrong, though.)