I am trying to run my React application via https local. I have followed the steps of this tutorial, have installed mkcert correctly and the root of my project currently looks like this:
|-- my-react-app
|-- package.json
|-- localhost.pem
|-- localhost-key.pem
|--...
And my package.json file looks like this:
"scripts": {
"start": "HTTPS=true SSL_CRT_FILE=localhost.pem SSL_KEY_FILE=localhost-key.pem react-scripts start",
...
Yet when I run npm start I receive this error:
'HTTPS' is not recognized as an internal or external command, operable program or batch file.
I also tried creating a .env file in the root and adding the variables like this:
HTTPS=true
SSL_CERT_FILE=localhost.pem
SSL_KEY_FILE=localhost-key.pem
However when I run the app this way I receive a warning to say my connection is not secure.
I have spent time googling the errors and so far still unable to find a solution.
The solution was to amend my package.json file to look like this:
"scripts": {
"start": "set HTTPS=true&&set SSL_CRT_FILE=localhost.pem&&set SSL_KEY_FILE=localhost-key.pem&&react-scripts start",
...
This produced a RangeError: Invalid typed array length: -4095 on start. Upgrading my react scripts to the latest version with npm install --save react-scripts#latest solved that.
I now have a secure connection on my localhost. Hope this helps someone else out in the future.
Related
I would like to set the "proxy"-property in the package.json file of a create-react-app project to the value of an environment variable called "REACT_APP_API_BASE_URL". The variable is stored in the .env.development.local file. I can't find the right way to do this. What is the right notation to access the variable? Each way I tried ended in the following error, when starting the app with npm start:
When "proxy" is specified in package.json it must start with either http:// or https://
This error probably occurred because the value isn't accessed correct.
If you specify in your .env.development.local:
REACT_APP_API_BASE_URL=[your url]
you can use source .env.development.local to store the value and then use it using $REACT_APP_API_BASE_URL.
For example in your package.json you could do this:
"scripts": {
"deploy": "react-scripts build; source .env; ./scripts/deploy.sh $REACT_APP_API_BASE_URL"
}
This answer suggests overriding PUBLIC_URL when running in in development, and is exactly what I need (see immediately below).
{
// ...
"scripts": {
"build": "react-scripts build",
"build-localhost": "PUBLIC_URL=/ react-scripts build"
// ...
}
// ...
}
How do I actually make use of this though? I tried building like this
npm run-script build-localhost
But I got an error saying
'PUBLIC_URL' is not recognized as an internal or external command
The app I'm trying to use this in is a ASP.NET Core 3.1 webapp with React inside, but my React knowledge is very limited. When I start the app in Visual Studio I want it to be running the app with a public URL of '/'.
OP works for linux/mac.
Seems like your dev environment is Windows.
Change package.json like the following:
"build-localhost": "set PUBLIC_URL=/ && react-scripts build"
And then run
$ npm run build-localhost
I am trying to setup a project for staging between dev to prod. I am trying to follow this article as it seems kind simple just to have a config file.
https://serverless-stack.com/chapters/manage-environments-in-create-react-app.html
However early in the article he states you set the variable by doing this:
REACT_APP_TEST_VAR=123 npm start
When i start by app like that I get following:
The term 'REACT_APP_STAGE=123' is not recognized as the name of a cmdlet, function. Any pointers?
I also tried:
you need to put the "REACT_APP_TEST_VAR=123" inside the script of npm start. For example when I run a npm build command it runs the following command (Where ENVIRONMENT is a env variable):
ENVIRONMENT=production webpack --mode production
So let's assume your cnpm start runs the regular "react-scripts start". You should define in your package json that the script "start" will do "REACT_APP_TEST_VAR=123 react-scripts start":
"start": "REACT_APP_TEST_VAR=123 react-scripts start",
create-react-app and npm noob here, and I'm having some trouble with deploying to production. When I start my app, I want to start a specific js file, as well as run the normal react-scripts start. So in my package.json, I have the following.
"scripts": {
"start": "node -r esm src/server.js & react-scripts start",
...
}
When I run npm start, it works great, both scripts are executed locally and up and running.
My cursory reading seems to indicate that npm start is just for development though. In production, the build/ folder will be used and... I can't figure out how it's run. Testing locally, after running npm run build, the build/ folder is made. And then running serve -s build, something is executed, but it's not my npm start script. It looks like it's just react-scripts start. Attempting to deploy to several real-life production servers like Firebase and Netlify behaves the same way.
So how exactly is the production build started? And how can I configure it to behave like my development build.
I feel like I must be misunderstanding something fundamental as I can't find any explanation online, but any help would be appreciated.
If you're interested in why exactly I have this strange setup, I'm attempting to deploy boardgame.io with a multiplayer server.
The reason to use npm start is so that you can fire up a local web server on the fly and paired with nodemon and other goodies, changes to the source can easily be viewed as if it were in production.
npm build transpiles the source into a lightweight, lazy loading bundle suitable for production. Once the build is complete, you use a web server to host build/index.html and access the site from there. What you use to host it is up to you (most commonly nginx but you could use something like apache or node like you're alluding to with serve -s build).
I have a file structure that looks like this:
/client
|--/src
|--package.json
|--/build
/controllers
/models
app.js
package.json
/node_modules
My client folder has all of the CRA stuff in it, however I gutted the package.json file to only include the scripts. Client has none of the dependencies as I moved them into the parent package.json file. The start script works exactly like it should. However when I run the build script I get the following error:
'react-scripts' is not recognized as an internal or external command,
I've tried removing node_modules and reinstalling but that hasn't fixed the problem. This leads me to believe that the build script is looking for the react-scripts in the same directory that the client package.json is in.
I can't just move the build script up to the parent directory though as then it can no longer locate the index.html file. Anyone know of a way to help react-scripts be found in the parent directory before I'm forced to have 2 node_modules?
so I found that using this command in the parent directory let's react-scripts know where to look for node_modules
"build": "npm run build --prefix client",