score:268
this is best done emulating the node way of doing things with your build tool - webpack, browserify - by exposing process.env.node_env
. typically, you'll have it set to "production" in prod and "development" (or undefined) in dev.
so your code becomes:
if (!process.env.node_env || process.env.node_env === 'development') {
// dev code
} else {
// production code
}
for how to set it up, see envify or passing environment-dependent variables in webpack
score:4
i wanted access to this from the index.html and desired a solution which didn't involve ejecting webpack or configuring it with additional modules and i came up with this.
sources are david's answer above and the create-react-app documentation for using environment variables in the html file
if ( ! '%node_env%' || '%node_env%' === 'development') {
// dev code
} else {
// production code
}
score:22
i use a helper file (in typescript):
import process from "process";
const development: boolean = !process.env.node_env || process.env.node_env === 'development';
export default function isdev(): boolean
{
return development;
}
then elsewhere i use it like this:
import isdev from "./helpers/devdetect";
if (isdev())
{
...
}
Source: stackoverflow.com
Related Query
- Detecting production vs. development React at runtime
- Why does production build of React app (with Webpack and Babel) use wrong development env with HMR, which causes errors?
- Using different API url for development and production with React and axios
- React JS: Use environment variables to specify two API urls based on production vs development
- React API calls work in development and fail in production build
- how to use different IP address for development and production with react and axios
- Fetching from localhost server in Create React App during development vs fetching from deployment during production
- react helper import fails in production but works in development
- Create React App production build runtime error: Cannot read property 'call' of undefined
- React - Env variables in development AND production
- When I try to use Parcel to build a production version of a React app that works fine in development mode, I get "Cannot find module 'sass'"
- Webpack production build always returns This page is using the development build of React
- React & Webpack & Docker: Inject env's at runtime in production to the docker-container
- Add production into development React Webpack config
- Deploy React Craco app to GCP Cloud Run Error: React Refresh runtime should not be included in the production bundle
- Setting Up base url for production while using proxy in development in React
- Calling API in production and development in react js
- React component not rendering in production build but works as expected in development build
- How can one tell the version of React running at runtime in the browser?
- Detecting when user scrolls to bottom of div with React js
- Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development
- React app stuck on "Starting the development server"
- Why won't React production build run on the browser?
- How to build a production version of React without minification?
- Difference between production and development build in ReactJS
- Is node-sass a dev or a production dependency on React projects?
- How to set React to production mode when using Gulp
- Why is React Webpack production build showing Blank page?
- How can remove console.log in the production build of a React application created using create-react-app?
- Can we share code between react webapp and react native app and is react-native production ready
More Query from same tag
- how to make rounded RaisedButton and Textfield
- Render props with typescript
- Passing all state properties to function except one
- How to loop through json object data and split strings into variables
- Why am I not being redirect to my selected path? React Router
- react redux - applying a "fetch" and dispatch inside of a dispatch fails
- React Hooks - Too many re-renders
- Gatsby, Environment variables not accessible in browser
- How to append nested state for a particular data?
- route router v4 does not reflect component change with Link?
- Creating a component from all components in a namespace
- Consuming from React Context returns Cannot read property 'map' of undefined
- How to set propTypes to HOC child?
- How to show loading UI when calling getComponent in react-router?
- Does using React Hooks drastically reduce how code can be reused in React / Redux?
- How to filter an array with fetched data in React.js?
- Annotate a function type to accept either a React.MouseEvent parameter or to remain anonymous
- React JSX Dynamic SVG Translate Error
- TypeScript: What type do I set a value that is to be compared with a list of types?
- NextJS Typescript Modal
- How to redirect and pass data as props on form submit in React?
- Redux dispatch throws unexpected token error
- Spring Controller GET/POST/PUT to another interface
- No unused Variables
- Webpack setup for code-split chunks imported from CDN
- Cannot submit form data to DatoCMS using Gatsby.js
- Invariant Violation: Objects are not valid as a React child when firing a function
- React js get value from input quantity
- Valid component must be returned error
- this.props is not a function - react form