I have a create-react-app (CRA) deployed to Netlify and I copied over my .env file contents over to Netlify's environment variables build settings. I added REACT_APP_VERSION as the key with $npm_package_version as the value.
But when the app got deployed, this particular environment variable is being shown as a literal string. It doesn't get evaluated to 0.1.0 as what is defined on my package.json file. All my other environment variables work just fine because they are string literals. How do I fix this?
I was able to fix this by injecting environment variables using local build plugins.
Here's my file structure:
> project
> plugins
> netlify
> env
- index.js
- manifest.yml
- package.json ---> only for the plugin (to define as a module)
...
- netlify.toml
- package.json ---> where I need to grab values from
...
And these are the contents of the files:
index.js
export const onPreBuild = function ({ netlifyConfig, packageJson }) {
netlifyConfig.build.environment.REACT_APP_NAME = packageJson.name;
netlifyConfig.build.environment.REACT_APP_VERSION = packageJson.version;
};
manifest.yml
name: netlify-env
package.json (inside of plugins/netlify/env directory)
{
"name": "netlify-env",
"version": "1.0.0",
"type": "module"
}
netlify.toml
[[plugins]]
package = "/plugins/netlify/env"
Related
I have a file that i need compulsory to make my application work,i am able to use the file in development by specifying fixed path var path = process.cwd() + '/src/app/components/task/Scripts'; and the file name after that,but after packaging the app i want to move the file i need in extraResources folder in system from where i will be able to use it let path = pathPackage.join(process.resourcesPath, 'extraResources');,i am using electron-forge maker to produce a production build exe,how ever there is no extraResources folder created after installing the exe,i am specifying it in package.json file
"build": {
"extraResources": [
"./extraResources/**"
]
},
Can someone provide a solution for it,i have tested all examples but none of them worked
As it mentions in the documention (actual options documented here), you can add files using the extraResource option of the packagerConfig configuration.
extraResource
extraResource: string | string[]
One or more files to be copied directly into the app's
Contents/Resources directory for macOS target platforms, and the
resources directory for other target platforms. The resources
directory can be referenced in the packaged app via the
process.resourcesPath value.
For example, in your package.json file:
{
"config": {
"forge": {
"packagerConfig": {
"extraResource": [
"./src/extraResources/file.txt",
"./src/extraResources/folder"
]
}
}
}
}
The files will be placed in the process.resourcesPath directory when running npm run package.
Is it possible to set environment variables in the manifest.json file of a Chrome Extension?
Like wOxxOm said, I used webpack to proccess manifest.json.
In my case, I needed to set version automatically on manifest file.
I added to webpack script:
plugins: [
new CopyWebpackPlugin([
{
from: "public/manifest.json",
to: "manifest.json",
transform(content, path) {
return modify(content)
}
}
]),
]
And the modify function replaces version on file for the parameter:
function modify(buffer) {
var manifest = JSON.parse(buffer.toString());
let argv = process.argv[2];
if (argv) manifest.version = argv.split("=")[1];
let manifest_JSON = JSON.stringify(manifest, null, 2);
return manifest_JSON;
}
So, I build like "yarn build --version=x.x" and webpack do what I need.
PS: if you're going to use this, remember to change:
the manifest.json directory, if necessary;
the value in the modify function, in my case it was version
As the OP has mentioned in her answer, using the copy-webpack-plugin in the webpack.config.js file is the way to go if you're building your Chrome Extension with React. However, if your React app is based on create-react-app, directly editing the webpack.config.js file (which is located in node_modules/react-scripts/config) is not recommended.
In such a case, use craco, which is an npm package that can be used to customize an app based on create-react-app. Here's how you do it:
Install craco into your project using npm i #craco/craco.
Install copy-webpack-plugin as a dev-dependency in your project using npm i --save-dev copy-webpack-plugin.
Let's suppose we're creating a development and a production build of our Chrome Extension. Let's also suppose we've already assigned "version": "0.1.0" in our Chrome Extension's manifest.json. Depending on the build type, we'd like to assign accordingly the version_name field in our Chrome Extension's manifest.json, e.g., "version_name": "0.1.0 dev" for development and "version_name": "0.1.0" for production. In your React app's package.json, introduce two fields (the script names can be whatever you wish) as follows:
"scripts": {
...
"build-dev": "CRX_ENV=dev craco build", // or "set CRX_ENV=dev&& craco build" in the case of Windows
"build-prod": "CRX_ENV=prod craco build", // or "set CRX_ENV=prod&& craco build" in the case of Windows
...
}
Create a new file called craco.config.js in the root of your project. As per your need, do something similar to the following in the craco.config.js file:
const CopyPlugin = require("copy-webpack-plugin")
module.exports = {
webpack: {
plugins: [
new CopyPlugin({
patterns: [
{
from: "public/manifest.json",
to: "manifest.json",
transform(content, path) {
return modifyManifest(content)
},
},
],
}),
],
},
}
function modifyManifest(buffer) {
const manifest = JSON.parse(buffer.toString())
if (process.env.CRX_ENV === "dev") {
manifest.version_name = `${manifest.version} dev`
} else if (process.env.CRX_ENV === "prod") {
manifest.version_name = `${manifest.version}`
}
const manifestJson = JSON.stringify(manifest, null, 2)
return manifestJson
}
Run npm run build-dev. It will create a folder called build in your project root. This build folder is your unpacked Chrome Extension, which you can load into Chrome using the "Load unpacked" button on the chrome://extensions page. Once loaded, you should be able to see 0.1.0 dev as the version name of your Chrome Extension.
Delete the build folder created from the previous step and run npm run build-prod, and repeat the same steps. You should be able to see 0.1.0 as the version name of your Chrome Extension on the chrome://extensions page.
I'm working on ReactJS and trying to read some configs from .env file.
I follow instruction from this page but it doesn't work for me.
Here is my Test.js:
import React from 'react';
require('dotenv').config()
class Test extends React.Component {
constructor(props) {
super(props);
this.state={
user:process.env.DB_USER,
pass:process.env.DB_PASS
}
}
render() {
return (
<div>
<p>Test</p>
{this.state.user}
{this.state.pass}
</div>
);
}
}
export default Test;
Here is my .env file:
DB_USER=test
DB_PASS=test
Here is my folder structure:
On my page I get only the text: "Test". So I think the app cannot get the value from .env file.
Is there anyone here can help me to read configs from .env file? Thank you in advanced.
Assuming that you use create-react-app for your project boilerplate. You can just add REACT_APP prefix to your env variables. First, create a .env file at your root directory (outside src folder). In your .env file
REACT_APP_USERNAME=lorem
then you can call it anywhere in your project by using process.env.REACT_APP_USERNAME, for example
console.log(process.env.REACT_APP_USERNAME)
I hope this works and good luck
1) ReactDocs If you use create-react-app as boilerplate
1.1 #.env file
REACT_APP_SOME_NAME=something
Name MUST start with REACT_APP_
1.2 Access ENV variable
<p>{process.env.REACT_APP_SOME_NAME}</p>
1.3 npm run start
Restart application after adding variable in .env file using npm run start
2) If not using create-react-app
2.1) npm install dotenv --save
2.2) Next add the following line to your app.
require('dotenv').config()
2.3) Then create a .env file at the root directory of your application and add the variables to it and restart application after adding variables using npm start.
// contents of .env
REACT_APP_API_KEY = 'my-secret-api-key'
2.4) Finally, add .env to your .gitignore file so that Git ignores it and it never ends up on GitHub.
Assuming that you're running your app from the root directory of the project, my understanding is that you'll need to specify the path of the .env file as src like this:
const dotenv = require('dotenv');
/* Specify path to .env file */
dotenv.config({ path: 'src' });
I am using create-react-app to build an application and when I run npm run build it creates a build folder with static folder inside it which is expected.
build--> static
But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static which is why the page does not load properly as it is missing the assets .
Is there any config setting I can do to fix this problem ?
If all you want is to run your app, all that you have to do is run the command: npm start
But, if you are really trying to prefix the static references to upload your code on an specific subdirectory you should add on your package.json the homepage you want to use on your create-react-app.
So, if you want your react app to use /build in the beginning of each reference you should add the following line to your package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "/build",
...
}
The following message is displayed when you generate your build without the homepage in the configurations:
The project was built assuming it is hosted at the server root.
To override this, specify the homepage in your package.json.
For example, add this to build it for GitHub Pages:
"homepage" : "http://myname.github.io/myapp",
The build folder is ready to be deployed.
You may serve it with a static server:
yarn global add serve
serve -s build```
But when I see the index.html file inside the build folder, the path to assets is /static and not /build/static
This behaviour is expected.
You're supposed to deploy the build folder and serve the application from it. Since index.html is inside build, it would be served for /, and files in build/static/* will be served for /static/*.
For more specific instructions for this, please read the Deployment section of the User Guide.
It sounds like you're trying to use unimported assets.
I prefer to create an assets folder and place these sort of files here, and then import/use them accordingly.
From the documentation:
import React from 'react';
import logo from './logo.png'; // Tell Webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
If you really want to use the public folder, you can use the PUBLIC_URL variable.
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
I have a Angular application that uses Webpack as module bundler. In my package.json, I have the following scripts:
"scripts": {
"start": "webpack",
"start-in-war": "??????"
}
Also, this is the output portion of my webpack.config.js
output: {
path: __dirname + "/dist/",
filename: "app.js"
}
Since I also want this application to be packaged into a WAR file with my backend service, I need to pass that path field as parameter, so I will mantain both configurations: the default that is more development-friendly (I don't have to deploy the application anytime I make a client change) and the one I will ultimately use (that would be the "start-in-war" parameter).
How can I achieve that?
Note: The start-in-war script is not gonna be used just for production, also development.