I have two different environments with named .env.development, .env.production, and common .env also.
.env.development looks like this,
TEST_LABEL=Development
.env.production looks like this,
TEST_LABEL=Production
.env looks like this,
TEST_LABEL=ENV
And here is my babel.config.js,
module.exports = function (api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
["module:react-native-dotenv",
{
"moduleName": "#env"
},]
]
};
};
this is the scripts in package.json
"scripts": {
"start": "react-native start",
"development": "NODE_ENV=development expo start",
"production": "NODE_ENV=production expo start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
And this is how I used it in my Homescreen.js
import {TEST_LABEL} from "#env"
...
<Text>{TEST_LABEL}</Text>
And this displays always Development even I run the production env
I run the app like npm run development for development environment, npm run production for production environment.
I am using react-native-dotenv
Here is the Project structure snapshot,
I found this issue and it says the only supported envs are development, production, and test. If you want to use other env names you can use the experimental feature APP_ENV
"demo": "APP_ENV=demo expo start",
"local": "APP_ENV=local expo start",
and I think .local files are loaded by default
UDPATE
I tested your config and it looks like this issue is the reason the value is not updating, adding -c to your commands clears the cache and load the correct env values
"development": "NODE_ENV=development expo start -c",
"production": "NODE_ENV=production expo start -c",
Related
I can't commit and push my code in git.
What i do:
git add .
git commit -m "init commit"
What i get:
after that nothing works for me, I can't click anything.
My package.json
"devDependencies": {
"husky": "^8.0.2",
"lint-staged": "^13.1.0",
"prettier": "^2.8.1",
}
scripts": {
"start": "cross-env PORT=3006 react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-scripts test --watchAll",
"test:ci": "cross-env CI=true react-scripts test",
"eslint": "eslint -c .eslintrc.js --ext .ts src/ --max-warnings=0",
"eslint:fix": "npm run eslint -- --fix",
"prepare": "husky install"
},
My .lintstagedrc
{
"*.{ts,tsx}": "npm run eslint",
"*.test.{ts,tsx}": "npm run test:ci"
}
npm install does not help(
You tests are being run in watch mode, as people have said in the comments.
The test:ci command you have is intended to disable watching by creating the CI environment variable, but you're probably not running on the platform that command was written for.
The simplest solution is to add the --watchAll=false command line option in the test:ci script:
"test:ci": "cross-env CI=true react-scripts --watchAll=false test",
Ref: https://create-react-app.dev/docs/running-tests/#on-your-own-environment
PS: I'm not familiar with cross-env, but that reference shows ways you might configure test:ci on various platforms.
I want to see any updates i make to my code reflected in the browser. In VSC terminal I run "npm run dev". If i make changes to the code nothing happens unless i CTRL + C and run "npm run dev" again.
I have tried running it in Chrome (instead of Brave)
I have tried:
npm run build
npm start
I have tried:
"scripts": {
"test": "jest",
"dev": " next dev -p 8000",
"build": "next build",
"start": "next start",
}
I have tried:
"scripts": {
"test": "jest",
"dev": " next dev -p 8888",
"build": "next build",
"start": "next start",
}
im wondering if it has to do with the way ive organized my project
below is my project's directory organization:
v components
v web3
Connected.js
NotConncted.js
Web3Button.js
DashboardSidebar.js
>node_modules
>pages
>api
_app.js
index.js
...etc
My react app's environment variables still returns undefined after trying to prepend "REACT_APP_" in my variable. I'm using create-react-app, and I see a lot of the prepending of "REACT_APP_" as the common solution for this, but it doesn't work for me.
.env:
REACT_APP_UNSPLASH_KEY=my_api_key
REACT_APP_OWM_KEY=my_api_key
In my App.js:
const get_random_photo = () =>
`https://api.unsplash.com/photos/random/?orientation=landscape&w=1920&h=1080&query=${weather_query}&client_id=${process.env.REACT_APP_UNSPLASH_KEY}`;
const get_weather = () =>
`https://api.openweathermap.org/data/2.5/weather?q=${location}&units=metric&appid=${process.env.REACT_APP_OMW_KEY}`;
I also tried installing env-cmd, separating .env into a .env.production and .env.development, and editing scripts for package.json:
"scripts": {
"preinstall": "npx npm-force-resolutions",
"start:staging": "env-cmd -f .env react-scripts start",
"start:prod": "env-cmd -f .env react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And still no luck.
If your .env files are named as .env.production and .env.development you are not using them in the package.json scripts.
It should be like env-cmd -f .env.development react-scripts start and your production build can be env-cmd -f .env.production react-scripts build
I have deployed my simple React app to Heroku - https://projectslist.herokuapp.com It works just fine except for the server part which doesn't work at all. I've seen the logs and it says that my only server method - /sendmail - returns error 404. How can i fix this problem? I suppose that I should edit something in package.json file but I'm not sure what I should change.
Here's my github repo - https://github.com/VasVV/Projects-list
Try putting your server files in the root directory folder and everything else in a client folder within the root:
1.) Put your server.js into the root directory
2.) Add these commands to your root package.json...
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"proxy": "http://localhost:4242/"
3.) Create a client folder and put your src and public folders in it.
4.) Add these commands to your client folders package.json...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
Your file structure from root should look like this:
Root
client
Public
Src
package.json
server.js
package.json
5.) Move all your server-related stuff into the root folder, that way, you don't have to cd into any nested folders.
Add a Procfile to your root folder that says something like:
web: node server/index.js -port 8000
And a small addition to the scripts part of your package.json that tells Heroku that once it's fetched all the dependencies for your project it should build it, although that may not be necessary now.
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
I am using nuxt 2.5.1 and want to log some messages by debug. I tried start up the project by "DEBUG=* nuxt" and tons of debug messages flooding in, so I expect the setup is OK.
But when I try showing my custom messages in a project file, the debug messages never show up.
I start the app by 'npm run dev-debug'.
package.json
"scripts": {
"dev": "nuxt",
"dev-debug": "DEBUG=app nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
middleware/api/staffDuties.js
const axios = require('axios')
const debug = require('debug')('app')
export default function() {
debug('Hello')
axios({
url: 'http://localhost:3010/staffDuties',
method: 'get'
}) // do stuff...
debug('succeed')
}
The staffDuties.js is placed inside the middleware folder and is mapped to the index.vue. I use json-server to mock an API endpoint, from the run log of json-server I can confirm the function is indeed executed.
Can anyone give me some advice?