Is it possible to launch create-react-app App in a certain browser of my choice? Currently, it always runs in the Chrome while I want it to do that in the Chrome Canary. Does anybody know?
You can use BROWSER environment variable to set which browser you wanna open the app in. For example,
BROWSER=firefox yarn start
or
BROWSER=firefox npm start
will open the app in firefox.
So, you can put something like this in your package.json
"scripts": {
"start": "BROWSER=firefox react-scripts start",
"build": "react-scripts build && sw-precache --config=sw-precache-config.js",
"test": "react-scripts test --env=jsdom",
You can read more about it in this pull request thread
With current iterations of create-react-app this can be accomplished by adding a .env file to the project with a "BROWSER" key. It's described in the Advanced Configuration section of the documentation.
If you want to use Google Chrome Canary for your development browser (as I do) then you'll need to create that .env file in the root of the project with the following contents:
# Override default browser for npm start in react-script
BROWSER=Google Chrome Canary
Be sure you don't get overzealous and quote it or add a semi-colon at the end. I did both and scratched my head at first why it didn't work.
You can use .env file with BROWSER=firefox
https://create-react-app.dev/docs/advanced-configuration/
This worked for me:
Set Chrome Canary as default browser in PowerShell (choose the right path first)
$chromePath = "${Env:ProgramFiles(x86)}\Google\Chrome\Application\"
$chromeApp = "chrome.exe"
$chromeCommandArgs = "--make-default-browser"
& "$chromePath$chromeApp" $chromeCommandArgs
(answer from)
https://stackoverflow.com/a/17536704/11878186
Set variable BROWSER=Chrome in .env file in root directory
Related
Inside svelte.config.js I was using this
const dev = process.env.NODE_ENV === 'development';
to conditionally set a base path which was working fine in projects with #sveltejs/kit#1.0.0-next.350 and *.357
After installing now the most recent SvelteKit version #sveltejs/kit#1.0.0-next.386 it only results to undefined
Differences I notice is that the new project lists "vite": "^3.0.0" as devDependency and the script changed from "dev": "svelte-kit dev", to "dev": "vite dev"
Update: It's also the case for a project with #sveltejs/kit#1.0.0-next.366, vite#2.9.14, "dev": "vite dev" - so the switch was before vite 3.0
Going through the vite docs I find import.meta.env, but that's also undefined inside svelte.config.js
Switching from Node v16 to 17 didn't make a difference as well
What changed and how can I now distinguish between dev and build mode?
The behavior you describe was introduced in 100-next384
[breaking] remove mode, prod and server from $app/env (#5602)
and here is the relevant discussion
respect --mode, and remove server, prod and mode from $app/env
I think you should use Vite capabilities to configure dev VS production/build modes.
Update
Considering better your case, a way to solve the issue is to set a value for the NODE_DEV environment variable, like (Linux/Mac):
export NODE_ENV=development && npm run dev
There are other ways to do this but at least for development it should do the trick.
This might help someone in the future. I encountered this error when I created an express server in a react application. I created the server directory in the root folder of the react application and I was running both react app and express server at the same time.
All of a sudden, when creating a react production build, I get this error.
> safe-courier#0.1.0 build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'fs' in '/workspace/safe-courier/client/node_modules/dotenv/lib'
I have searched on the web, found similar cases but different frameworks of which all were not of help in regards to this issue.
I have tried to uninstall dotenv and reinstall it again but i get the same error. I'm not sure what could be the problem understanding that fs module is part of nodejs and comes bundled with it
To solve this:
Create the .env file at the root level of you app
Name your variables beginning with REACT_APP_ // that's the key !!
Restart your server with npm start each time you change an env variable
Use your variable with process.env.NAMEOFYOURVARIABLE
No need of dotenv for your React app.
I solved the same problem;
npm install dotenv-webpack --save-dev
Create .env file under root folder
create env variable as
REACT_APP_YOURVARIABLE=itsvalue
Create webpack.config.js file under the root folder with following content
const Dotenv = require('dotenv-webpack');
module.exports = {
plugins: [
new Dotenv()
]
}
Then wherever you want to use variable in .env write
process.env.REACT_APP_YOURVARIABLE
There is no need to import dotenv. It is already done in webpack.config.js
1- As already mentioned by Stéphane Sulikowski, No need to use dot-env in react projects
Why?
"dot-env" uses some modules that are only supported by nodejs but not supported by "browser engines" like fs, os etc. React-code-bundle runs in the browser and the browser doesn't support module "fs", so if any modules reference the "fs" module will get the same error.
There is some inbuilt support by reactjs to use environment variables stored in a .env file and begins with REACT_APP_
2- If you have to use it for some reason use "env-cmd"
npm install env-cmd
3- create environment specific .env files like .env.local OR .env
4- In your "environment specific" OR .env file, add variables beginning with REACT_APP_
REACT_APP_API_BASE_URL="http://localhost:4000"
5- Use these environment variables in your code files
like console.warn (process.env.REACT_APP_API_BASE_URL)
6- OPTIONALLY...... configure package.json something like this
...
"scripts": {
"start": "env-cmd -f .env.local react-scripts start",
"build:staging": "env-cmd -f .env.staging react-scripts build",
"build:production": "env-cmd -f .env.production react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Note - When you add a new variable in .env .... files, you have to run npm start OR related...
Just like Reno mentioned just create your .env at the root with the name prepended with REACT_APP and it will work out of the box
Example .env file
REACT_APP_GITHUB_API_URL=https://api.github.com/graphql
Usage:
process.env.REACT_APP_GITHUB_API_URL
If you are using create-react-app this article describes the behavior of environment variables: https://create-react-app.dev/docs/adding-custom-environment-variables/
Note that the document frequently reminds you of this warning:
WARNING: Do not store any secrets (such as private API keys) in your React app!
Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files.
To securely use secrets such as passwords and tokens, consider setting up a server that can deliver this data to the frontend via HTTP. For example, once users authenticate into your app you send their credentials to a microservice that can validate their identity and return an API key or session to be used for subsequent REST API calls.
I have a desktop application, packaged using node-webkit JS. Is there any way to open this app with IP address from other computer by browser? I just set node-remote to http://localhost:3000 in package.json but is not working when I use chrome and open the IP. There are some errors like nw is not defiend and etc. Please tell me if this way can work or not. Thanks
I don't know nwjs but if I understand correctly, you want to access to localhost in your computer from another computer.
you can not use ip to access because of NAT. but fortunaly you can do that by a third computer (that is not behind NAT). to do that use localtunel.
for more info see this.
Do you think you could paste what your package.json looks like? I've done what you are talking about. Here is what my file structure looks like:
!(https://i.imgur.com/L3M6lvx.png)
The package.json that is in my project folder:
!(https://i.imgur.com/uZV7mzr.png)
The 1st thing that I did was install my dependencies into my project folder so that I don't get the command not recognized error. I did that by going to my project folder and typing:
npm init -y
npm install nw#0.50.1-sdk nwjs-builder -D
This creates a fresh package.json and adds the modules to the file as dependencies. Then I went into my src folder and created another package.json. I set the "main" tag to my index.html
Going back to the .json in my root project folder, we add to the "script" tag:
"script": {
"dev": "nw src/ --remote-debugging-port=9222"
}
(you can make dev whatever you want)
Once you have that setup, all you need to do is run npm run dev and your app will open up. Head over to chrome and type localhost:9222 and you should be set.
It is possible to create an app that can run in a regular browser, and also in NW.js with added features when it runs inside NW.js. You would need to basically wrap anything in if statements, like
if (window.nw) {
let fs = window.nw.require('fs');
let file = fs.readFileSync('./whatever.txt');
console.log(String(file));
}
You could then create two different npm scripts. One to just run a local web server and one to run it and launch NW.js.
{
"main": "http://localhost:4467",
"node-remote": "http://localhost:4467",
"node-main": "server.js",
"scripts": {
"start": "concurrently \"npm run serve\" \"wait-on http://localhost:4467 && nw .\"",
"serve": "node server.js"
},
"dependencies": {
"express": "latest"
},
"devDependencies": {
"concurrently": "latest",
"wait-on": "latest"
}
}
Example: https://github.com/nwutils/nw-local-server-example
I'm a senior .NET developer wanting to move into MERN, full-stack. Is there a scaffolding tool that will quickly get me setup and that also supports authorization (register/login features, etc), built-in?
Express development is fairly unopinionated. As a result of that flexibility, there's a lot less built into it than there is in more opinionated framework like Rails for example.
The other thing is that since the MERN stack isn't monolithic, you'll need to set up the front and back ends independently.
The two most common 'scaffolding' tools I've come across in MERN development are Create React app and Express generator. These will get you started with a front end and a server that will run immediately, but for things like auth, you'll either need to build your own, or install packages that will handle it for you.
I've seen open source templates on Github that you can start with, but since things change so fast, I personally don't like the idea of starting off with someone else's outdated code.
Hope that helps!
For whoever lands on this page like I did.
I found two option for MERN scaffolding. The first is deprecated and the second seems to be abandoned and/or incomplete:
mern-cli (http://npmjs.com/package/mern-cli) (DEPRECATED)
mern (http://npmjs.com/package/mern) (ABANDONED)
My solution was to keep my React UI and Express API on separate directory, say "ui" and "server", in my project's root directory.
Then I use the cors module (http://npmjs.com/package/cors) to handle cross site resource sharing for development environment only, so that my react app can talk to my express server, which is running on a different port during development, like this (in server.js)
const cors = require('cors');
if (app.get('env').trim() == 'development') {
app.use(cors());
}
For production I just run a batch script that copies all the files from my ui/build directory to server/public directory after the react build process is complete. The scripts section of my package.json looks like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"postbuild": "copy-build.bat",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And the content of batch file reference in the postbuild key is
xcopy "build\*" "..\server\public" /s /y
If you prefer or have to use a bash script instead you can make a copy-build.sh file with the content
cp -r build/* ../server/public
I am very new to server side scripting. And I am using NodeJS. My Problem is that after adding some new features to the app, i.e. after changing the code, these changes will be applied only after restarting the server. Till then NodeJS behaves so as though I hadn't changed anything. So for instance if I add console.log("works") and don't restart the server, then it hasn't any effect.
I am using Nuxt.js, which is actually the Vue.js framework but with additional and very usefull features mainly for server side rendering. I didn't integrate the express.js at the beginning of the project, beacause it wasn't planned to write any server side code. So I am normally exporting express and using it, which is pretty fine for me, since I need just a couple lines of code to use the NodeJS file system.
So, as it is pretty hard to code, if I should restart the server once I changed anything, I want to ask you if there is any solution to this problem.
Use nodemon
step 1 : npm install -g nodemon <- this will install nodemon globaly in your system
step 2 : change your start script within package.json
"scripts": {
"start": "nodemon fileName" <- like this //filename is you root file which starts the app like app.js
}
step 3 : npm start
This is already build in into nuxt. You just need to run it in dev mode, not in production.
E.g. for dev with change monitoring
nuxt
For production without monitoring
nuxt start
So in this particular case the following changes to the "scripts" in package.json have solved my problem.
"scripts": {
"dev": "nodemon --watch api --exec \"nuxt\"",
"start": "nodemon nuxt",
}
The following link could also be usefull to you.
Install nodemmon in your application to allow live update npm -g install nodemon
and add the following codes inside your packages json file :
"main": "app.js",
"scripts": {
"start": "node app"
},
on your command line, just type : start