Named URLs for React app - create-react-app

Does Create-React-App support named URLs e.g. my-app.dev as opposed to the default localhost:3000?
I am using a Windows 10 machine. I used to use an Apache virtual host to set this up but I can't figure out how to do it in CRA.
UPDATE:
I've half solved the problem by adding 127.0.0.1 www.my-app.dev my-app.dev to the hosts file located at C:\Windows\System32\drivers\etc.
I also had to create a .env file in the root of my React project and added HOST = my-app.dev
I then tried to add PORT = 0 to the .env file but that made no difference.
Now when I run the app with npm start it opens at my-app.dev:3000
Is there a way to get rid of of the port?

I have found the answer on the CRA Github page here

Related

node red cannot GET /myfile from directory

I would like to ask.
I have file in C:\users\nxf68958\.Node-red\report.html
And when I would like to open this file by: localhost:1880/report.html
I get:
Cannot GET /report.html
in Log I have: "Nov 09:52:00 - [info] User directory : \Users\nxf68958\.node-red"
I am using:
NR: 3.0.2
Node: 18.12.0
It worked perfectly on older versions of: NR: 2.2 and Node: 16.13.
Then I actualized and it stopped working.
In settings.js is option: "fileWorkingDirectory" I tried to change it, but without change.
What I am doing wrong?
Thank you
Node-RED will not serve static files by default, you have to explicitly enable it by settings the httpStatic option in the settings.js file.
Settings the httpStatic value to point to the userDir (which is what you have basically done by setting it to __dirname) is a bad idea from a security point of view because this means anybody can download your flows.json and flows_creds.json files and the files like settings.js and .config.runtime.json (which holds the default encryption key for the creds file).
fileWorkDirectory is purely to set the default working directory for the code nodes that interact with the filesystem, it will have no effect on what files are served by the HTTP server.

Expo application doesn't get changes in .env file

I have an Expo managed react native application. I created my .env file in the root of my project, installed react-native-dotenv and set up babel to use it. After a while I managed to get it to work.
I have my environment variable
ENDPOINT=http://127.0.0.1:8000/api
and i use it with
process.env.ENDPOINT
After a while I decided to test the android version of the app, so i changed the endpoint url to my LAN ip and restarted the server. The problem is that even after restarting the server, the cache and the computer, when I call process.env.ENDPOINT it keeps the first url I set.
Here's a list of the things i tried:
restarting the server
restarting the server and the cache
restarting the whole computer
change the variable name to REACT_APP_ENDPOINT as many suggested (I get undefined, it's still stuck to ENDPOINT)
empty expo cache
The strange thing is that I already changed that same variable twice (from 127.0.0.1:8000 to 127.0.0.1:8080 and back for a problem with backend) and had the same problem, but it went away by itself after a couple of minutes (and server restarts).
This time I've been trying to get it to work for 7 hours and nothing has changed.
Any idea?
I had the same issue and managed to run the app with .env changes after using the following command.
expo r -c
reference: https://github.com/goatandsheep/react-native-dotenv/issues/75#issuecomment-728055969
After a couple hundred more tests I gave up and implemented a "custom" solution, without any external library:
Switched .env files to TypeScript files (E.g. .env.development -> env.development.ts)
Set up an object named env that has all environmental variables as properties
export const env = {
VAR1: 'foo',
...
}
Imported this constant inside the application entry point (in my case App.tsx)
Inside the main constructor assign env to global.env
Use global.env instead of process.env
Not sure if this is the best practice, but solved my problem for now, works like a charm and doesn't require me to reload my application at every change. I'm a bit concerned by the security aspect of having the environment in a global variable inside a js project, so any suggestion is still welcome

How to Proxy Fontawesome Pro npm packages

I work for a Company where our Frontend Build are on a Server with a very strict firewall policy
Therefore we use a Proxy (Nexus3) for https://registry.npmjs.org which works great.
Now i want to do the same for Fontawesome Pro 5
Fontawesome tells me to add those two lines in my .npmrc file see:
https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers
#fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
my old npmrc file had this line
registry=https://nexus.mycompany.com/repository/npm-proxy/
i tried the following:
registry=https://nexus.mycompany.com/repository/npm-proxy/
#fortawesome:registry=https://nexus.mycompany.com/repository/fontawesome/ <!-- which i created on the nexus side-->
//nexus.mycompany.com/repository/fontawesome/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}
but it doesn't work and i dont know if i need a diffrent setting on the nexus side or a diffrent setting on the npmrc side...
We do have the same issue and we're asking the corresponding teams to add the Font Awesome Pro URL to the allowed list in the Firewall.

How to use npm start on remote dev box with create-react-app

I would like to know how to use the create-react-app "npm start" script when development takes place on a remote host.
Nginx is running as a reverse proxy. The external uri looks like:
https://my-dev-box/my-cra
which is set to proxy to:
http://localhost:3000
The CRA app is static (ie no API calls).
The errors appearing in the browser's web dev console are 404s related to /static/js/bundle.js and favicon. The app's index.html page is served with a 200 response.
When I build the app, "npm build" produces an index.html file with the correct paths (courtesy of the "homepage" setting in package.json). I have looked at the documentation/tickets surrounding "Invalid Host Header" and "DANGEROUSLY_DISABLE_HOST_CHECK" but have not found a combo which works for me.
It appears to me that the fundamental issue is that "npm start" does not seem aware (as "npm build" is aware) that the WebDevServer is behind a proxy and is thus not constructing correct paths for resources.
So to restate the question, does anyone know how to get "npm start" working nicely behind a reverse proxy on remote development box. (create-react-app version used: 1.5.2)
(Note: application works perfectly behind proxy when using "npm build".)
Update: Courtesy of this question I found this comment in "webpack.config.dev.js":
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
which I guess means that what I want to do is not going to be that practical unless I eject the project. (Which I'm a little reluctant to do - the reason for using create-react-app is newness to React.)

Composer needs a proxy to install laravel apparently, where do I get that? can I set it up myself using apache?

I was trying to get started with Laravel just last night, so I tried to install it with composer but it wouldn't go through and kept sayin The "https://packagist.org/packages.json" file could not be downloaded: SSL operation failed with code 1. , so I looked around and found out that you need to tell composer to use a proxy.(q1 q2 q3).
Well now this might sound silly but honestly I had no idea what a proxy was until last night, so I went and studied it a bit and I got this far:
"Proxy means to act on behalf of another. In the context of a Web server, this means
one server fetching content from another server, then returning it to the client"
and apparently there's 2 kinds of proxy: forward proxy and reverse proxy.
In those 3 pages that I just showed, they were saying before runing php bin\composer global require "laravel/installer=~1.1" you have to set an env var like this: set http_proxy=username:password#proxy_server:port
So now my question is: I still don't know where can I get a proxy like that, should I set it up myself with apache? is that gonna even work? what do I do?
Your thoughts would be appreciated, thank you.
Edit: Environment info:
I'm on windows 7
installed xampp-win32-5.6.14-0-VC11-installer
all of those 5 important extensions are all enabled in phpinfo()
the path= C:\Users\UserName\AppData\Roaming\Composer\vendor\bin is set in environment variables
here's a picture of the whole error
here's the result of php -m i.stack.imgur.com/wz030.png
Some stuff that I tried:
I went into these sites: proxy4free.com us-proxy.org proxylist.hidemyass.com ultraproxies.com,
I tried this: set https_proxy=https://xteamweb.com:xteam#75.55.165.86:8088 and this one: set http_proxy=http://1proxy.space and many others from those sites: i.stack.imgur.com/6YWyp.png
but no matter what, this is the result of all of them: i.stack.imgur.com/mqOrP.png
Still nothing...
Ok here's the solution, if you're having the same problem:
1:
Make sure these are all uncommented in php.ini:
extension=php_openssl.dll
extension=php_curl.dll
extension=php_sockets.dll
extension_dir="E:\xampp\php\ext"
browscap="E:\xampp\php\extras\browscap.ini"
Add these 2 lines at the end of php.ini
curl.cainfo=c:\openssl-1.0.2d-win32\ssl\cert.pem
openssl.cafile=c:\openssl-1.0.2d-win32\ssl\cert.pem
2:
Run this: php -r "print_r(openssl_get_cert_locations());"
and you'll get:
Array
(
[default_cert_file] => c:/openssl-1.0.2d-win32/ssl/cert.pem
[default_cert_file_env] => SSL_CERT_FILE
[default_cert_dir] => c:/openssl-1.0.2d-win32/ssl/certs
[default_cert_dir_env] => SSL_CERT_DIR
[default_private_dir] => c:/openssl-1.0.2d-win32/ssl/private
[default_default_cert_area] => c:/openssl-1.0.2d-win32/ssl
[ini_cafile] => c:\openssl-1.0.2d-win32\ssl\cert.pem
[ini_capath] =>
)
3:
Make these folders:
c:\openssl-1.0.2d-win32
c:\openssl-1.0.2d-win32\ssl
c:\openssl-1.0.2d-win32\ssl\certs
c:\openssl-1.0.2d-win32\ssl\private
Download this: http://curl.haxx.se/ca/cacert.pem.
Rename it to cert.pem and put it in c:\openssl-1.0.2d-win32\ssl\.
Rename it to cert.crt and put it in c:\openssl-1.0.2d-win32\ssl\certs\.
So:
c:\openssl-1.0.2d-win32\ssl\cert.pem
c:\openssl-1.0.2d-win32\ssl\certs\cert.crt
4:
Download https://getcomposer.org/Composer-Setup.exe and install it, It will no longer gives u the ERR_CONNECTION error.
Go to c:\users\YOURUSERNAME.
composer.bat should be there, if not create it yourself.
Add c:\users\YOURUSERNAME to your path.
Edit composer.bat and delete what's in it and put this in #php "%~dp0composer.phar" %*.
Download https://getcomposer.org/composer.phar.
Place composer.phar in c:\users\YOURUSERNAME.
5:
Done.
Composer will now install laravel using: composer global require "laravel/installer=~1.1" with no problem.
(Plus: now composer command is available globally instead of using it like: php composer.phar or php bin\composer).