I have built a small extension where I had to hard-code URLs in many places(like manifest.json, etc). But I want the domain of the URLs differ between dev & production environment. Wondering what is the right practice.
If you can know your production extension url then you can see the extension id. Suppose the extension url is https://chrome.google.com/webstore/detail/eme-call-and-event-logger/cniohcjecdcdhgmlofniddfoeokbpbpb so the var chromeruntimeid='cniohcjecdcdhgmlofniddfoeokbpbpb';
if(chrome.runtime.id==chromeruntimeid){
console.log('production');
}else{
console.log('development');
}
You can try creating a JSON file and have different key, value pairs in it in the following manner:
"development": {
"oauth-code": "xyz"
}
"production": {
"oauth-code": "xyz"
}
and then load settings.json into your main script and access the setting dynamically depending upon the environment that you've chosen in the following manner:
var settings = [code to load JSON file, depending upon the language that you choose]
console.log(settings['production'].oauth-code);
console.log(settings['development'].oauth-code);
It will help you to get custom settings depending upon the environment more easily, you can though also try using an application object in your JS file with the same properties, its almost the same manner, though it is advisable to seperate settings and main logic from each other.
Related
I’m using Electron Builder to compile my Electron app to an .AppImage file, and I’m using the fs module to write to an .json file, but it’s not working in the appimage format (it’s working fine when I have the normal version not made with Electron Builder). I can still read from the file.
The code (preload):
setSettings: (value) => {fs.writeFileSync(path.join(__dirname, "settings.json"), JSON.stringify(value), "utf8")}
The code (on the website):
api.setSettings(settings);
The project: https://github.com/Nils75owo/crazyshit
That's not a problem with AppImage or Electron Builder but with the way you're packaging your app. Since you didn't post your package.json*, I can only guess what's wrong, but probably you haven't changed Electron Builder's default behaviour regarding packing your application.
By default, Electron Builder compiles your application, including all resources, into a single archive file in the ASAR format (think of it like the TAR format). Electron includes a patched version of the fs module to be able to read from the ASAR file, but writing to it is obviously not supported.
You have two options to mitigate this problem: Either you store your settings somewhere in the user's directory (which is the way I'd go, see below) or you refrain from packing your application to an ASAR file, but that will leave all your JavaScript code outside the executable in a simple folder. (Note that ASAR is not capable of keeping your code confidential, because there are applications which can extract such archives, but it makes it at least a little harder for attackers or curious eyes to get a copy of your code.)
To disable packing to ASAR, simply tell Electron Builder that you don't want it to compile an archive. Thus, in your package.json, include the following:
{
// ... other options
"build": {
// ... other build options
"asar": false
}
}
However, as I mentioned above, it's probably wiser to store settings in a common place where advanced users can actually find (and probably edit, mostly for troubleshooting) them. On Linux, one such folder would be ~/.config, where you could create a subdirectory for your application.
To get the specific application data path on a cross-platform basis, you can query Electron's app module from within the main process. You can do so like this:
const { app } = require ("electron"),
path = require ("path");
var configPath;
try {
configPath = path.join (app.getPath ("appData"), "your-app-name");
} catch (error) {
console.error (error);
app.quit ();
}
If you however have correctly set your application's name (by using app.setName ("...");), you can instead simply use app.getPath ("userData"); and omit the path joining. Take a look at the documentation!
For my Electron Applications, I typically choose to store settings in a common hidden directory (one example for a name could be the brand under which you plan to market the application) in the user's home directory and I then have separate directories for each application. But how you organise this is up to you completely.
* For the future, please refrain from directing us to a GitHub repository and instead include all information (and code is information too) needed to replicate/understand your problem in your question. That'd save us a lot of time and could potentially get you answers faster. Thanks!
I have a few components and I want to deploy them into S3 and make them reachable with CloudFront.
My problem is that I don't know what file(s) I need to upload to S3 and which file needs CloudFront needs to point to as entry point.
Here's my stencil.config.tsx:
import { Config } from '#stencil/core';
export const config: Config = {
namespace: 'stencil-test',
taskQueue: 'async',
outputTargets: [
{
type: 'dist',
esmLoaderPath: '../loader',
dir: './build/dist'
},
{
type: 'www',
serviceWorker: null // disable service workers
}
]
};
I tried executing npm run build that generated a couple of folders: build/loader and build/dist there's a lot of stuff within each folder but I have no idea how which folder and files are supposed to do what.
It was hoping the build command would generate a minified file that contained all the stuff needed (is this how it works?) so I could eventually do something like the following where I want to use my components:
<script type="module" src='https://cdn.jsdelivr.net/npm/my-name#0.0.1/dist/myname.js'></script>
Can anyone offer some guidance or point me towards any resources?
The www output target is meant for generating apps and not really relevant for component libraries. To host your components, you should upload the whole generated dist folder. Only the files that the client needs are downloaded, which depends on the client and which components they access (lazy-loading). So you don't need to worry about the amount of files. See https://stenciljs.com/docs/distribution.
To start, Stencil was designed to lazy-load itself only when the component was actually used on a page. There are many benefits to this approach, such as simply adding a script tag to any page and the entire library is available for use, yet only the components actually used are downloaded.
If you want to generate a single bundle containing all your components, there's an output target called dist-custom-elements-bundle. For the differences to dist you can have a look at the same docs link above.
One of the main differences is that loading the script doesn't automatically register the components for you, you'll have to either do it manually per component (using customElements.define(), or define them all using the defineCustomElements() export. The official documentation for that output target is https://stenciljs.com/docs/custom-elements.
hi im trying to make forgot password/reset password service.
let me show you the logic of this service.
(simply, send email in react(localhost:3000/forgotPassword) -> click link in email -> route to localhost:3000/resetPassword)
1.send email in frontend
The content is to write down the email of the account you joined.
2.email
비밀번호 리셋하기 <- this is direct to http://localhost:3000/resetPassword
3.forgotPassword.js in node.js
Here, I want to change resetURL(http://localhost:3000/resetPassword) to dynamic URL. Because I will distribute this soon.
3.package.json in react
I was able to do api communication from react to node by specifying proxy here, but /api/resetPassword does not work in node.
To sum up, I want to use the code used by React on the node as well. Like this.
You are looking to environmentalise your configuration.
You could do it through an environment variable, like this:
const baseURL = process.env.BASE_URL || 'http://localhost:3000'
const resetURL =`${baseURL}/resetPassword`
If you use the dotenv package, you can support configuration through environment variables or from a .env file.
If I understand correctly, your interested in setting up a dynamic variable for the url in your react app. Try just setting an environment config file, either a file for each environment you are developing in (i.e., Dev, QA, PROD) or a single file with multiple shared Env variables. You can even add an env variable to your package.json file for example.
NOTE the approach below would work for linux and mac, but not windows
please use the resources below for more information. This approach has been made available for react-scripts#0.9.0 and higher.
{
"scripts": "APP_URL=http://localhost:300 npm start"
}
Resources:
https://medium.com/#trekinbami/using-environment-variables-in-react-6b0a99d83cf5
https://create-react-app.dev/docs/adding-custom-environment-variables/
I'm fairly new to node and express...
I have a constant I set in my Node/Express application for "Domain". I'm constantly switching between localhost and the actual url when I switch between development and production.
I'm trying to figure out how I can automatically test the URL so that when the code is read on the server (ie actual domain url vs localhost) that it sets the proper domain url.
Here is my code:
function define(name, value) {
Object.defineProperty(exports, name, {
value: value,
enumerable: true
});
}
define("DOMAIN", "http://www.actual_domain.com");
// define("DOMAIN", "http://localhost:3000");
Anyone have a simple solution for this?
Thanks!!
there is many solutions for this, but usually this is done by environment variables, depends on your platform, but, in Linux systems, you do the following in your shell
export ENV_URL="http://www.example.com"
and to make sure its exported successfully
echo $ENV_URL
and in your code you do
const base_url = process.env.ENV_URL || "http://www.default.com";
in your local machine you set the ENV_URL to localhost or whatever you prefer, and in your server you set it to your actual URL.
or you could simply have many configuration files and you can determine the appropriate one by the environemnt variable like
export ENV=PROD
and in your code you can load the prod configuration file that contains your environment configurations.
The de facto way to do this sort of thing is through environment variables. Have a look at 12factor.net for a load of best practices, but in general you want to put differences in the environment into environment variables, then read those variables at runtime.
I would like to use the swagger-ui dist 'as-is'...well almost as-is.
Pulled down the latest release from github (2.0.24) and stuck it in a folder in my app. I then server it out statically with express:
app.use('/swagger', express.static('./node_modules/swagger-ui/dist'));
That works as expected when I go to:
https://mydomain.com/swagger
However I want to populate the url field to my swagger json dynamically. IE I may deploy to different domains:
https://mydomain.com/api-docs
https://otherdomain.com/api-docs
And when I visit:
https://mydomain.com/swagger
https://otherdomain.com/swagger
I would like to dynamically set the url.
Is that possible?
Assuming the /api-docs (or swagger.json) are always on the same path, and only the domain changes, you can set the url parameter of the SwaggerUi object to "/path/to/api-docs" or "/path/to/swagger.json"instead of a full URL. That would make the UI load that path as relative to the domain the UI is hosted on.
For reference, I'm leaving the original answer as well, as it may prove useful in some cases.
You can use the url parameter to set the URL the UI should load.
That is, if you're hosting it under https://mydomain.com/swagger you can use https://mydomain.com/swagger?url=https://mydomain.com/api-docs and https://mydomain.com/swagger?https://otherdomain.com/api-docs to point at the different locations.
However, as far as I know, this functionality is only available at the current alpha version (which should be stable enough) and not with 2.0.24 that you use (though it's worth testing).
Another method would be to use the swagger-ui middleware located in the swagger-tool.
let swaggerUi = require('../node_modules/swagger-tools/middleware/swagger-ui');
app.use(swaggerUi(config.swagger));
The variable config.swagger contains the swagger.yaml or swagger.json. I have in my setting
let config = {
appRoot: __dirname,
swagger: require('./api/swagger/swagger.js')
};
Note: I am using the require('swagger-express-mw') module
You could try with this on index.html file of the swagger-ui... It works for me.
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = window.location.origin + "/path/to/swagger.json";
}