I originally had an app using a private/settings.json asset. When attempting to make a package out of this app, I put that asset in packages/x:package/config/settings.json, and in the package.js's .onUse added
api.addFiles('config/settings.json', 'server', { isAsset: true });
I was using it successfully in the package as
settings = JSON.parse(Assets.getText('config/settings.json'));
until I removed private/settings.json. I now get
TypeError: Cannot read property 'token' of undefined
If I only keep private/settings.json, instead removing packages/x:package/config/settings.json (also changing from config/ to private/ in package.js, the package, etc) I get
error: File not found: private/settings.json
(How) can I have assets that are only local to the package? Alternatively, how can I include/use global assets in private/ in the package?
I think it makes sense that packages wouldn't be able to access assets in the app's private directory. Otherwise, a package could accidentally expose your app's private settings or assets.
It sounds like what you want is to share your settings.json file between the app and the package. There are several ways you could do this:
Put the settings into a second package and use it in your app and in your first package.
Have a method exported by your package called setSettings that allows the app to load its settings and then pass them into your package.
Use Meteor.settings, and launch your app with meteor --settings private/settings.json instead of getting the settings from an asset.
Related
If you run
npx degit vercel/turbo/examples/with-react-native-web with-react-native-web
cd with-react-native-web
yarn install
To create a basic Turborepo that has a Nextjs application, a react-native mobile app with Expo and a ui package to share components between apps (there is a Button as an example already shared between the two apps), it works. But my ui package needs other dependencies, for example:
#fortawesome/fontawesome-svg-core,
#fortawesome/free-solid-svg-icons,
#fortawesome/react-native-fontawesome,
This is because the buttons that I want to render icons on my buttons. Once I install this dependency and try to use the button that has an icon, the Next.js app throws:
Unexpected token 'export'.
I understand this is because #fortawesome/react-native-fontawesome is using import/export syntax and needs to be transpiled to be used on the Next.js app, and I cannot make it work. I am trying to do this by adding this to my next.config.js:
transpilePackages: ['ui'],
I also tried using next-transpile-modules which i don't think is the right solution since next now supports what that package used to be for through transpilePackages
I also tried to specify that the ui package was "type": "module" but still, I am getting the same error.
How can you specify that those dependencies that belong to the ui package must be transpiled to be run by the browser?
I have checked the package #fortawesome/react-native-fontawesome
package.json of #fortawesome/react-native-fontawesome does not contain field "type": "module" but index.js contains:
export { default as FontAwesomeIcon } from './dist/components/FontAwesomeIcon'
therefore Next handles #fortawesome/react-native-fontawesome as non-ES module but this module contains export statement.
You mentioned transpilePackages field in next.config.js, so I think it may help with this issue (but pls check version of Next where transpilePackages appeared).
I'm trying to set an environment variable for an API key that I don't want in my code. My source javascript looks something like this :
.get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`)
I'm using webpack and the package dotenv-webpack https://www.npmjs.com/package/dotenv-webpack to set API_KEY in a gitignored .env file and it's all running fine on my local. I'd like to also be able to set that variable when deploying through Netlify, I've tried adding it through to GUI to the 'build environment variables', and also to set it directly in the build command, but without success.
Any idea what might be the issue ?
WARNING: If this is a secret key, you will not want to expose this environment variable value in any bundle that gets returned to the client. It should only be used by your build scripts to be used to create your content during build.
Issue
dotenv-webpack expects there to be a .env file to load in your variables during the webpack build of your bundle. When the repository is checked out by Netlify, the .env does not exist because for good reason it is in .gitignore.
Solution
Store your API_KEY in the Netlify build environment variables and build the .env using a script prior to running the build command.
scripts/create-env.js
const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}\n`)
Run the script as part of your build
node ./scripts/create-env.js && <your_existing_webpack_build_command>
Caveats & Recommendations
Do not use this method with a public facing repository [open] because any PR or branch deploy could create a simple script into your code to expose the API_KEY
The example script above is for simplicity so, make any script you use be able to error out with a code other than 0 so if the script fails the deploy will fail.
You can set Dotenv-webpack to load system environment variables as well as those you have declared in your .env file by doing the following:
plugins: [
new Dotenv({
systemvars: true
})
]
I.e Setting the systemvars attribute of your webpack dotenv plugin to true.
Note that system environment variables with the same name will overwrite those defined in your .env file.
Source: https://www.npmjs.com/package/dotenv-webpack#properties
if you go to corresponding site's settings in Netlify, under build&deploy you can find a section called environment variables you can easily add your environment variables from there. if you add MY_API_KEY variable to environment variables you will be able to access it inside your project via process.env.MY_API_KEY.
If you're using Nuxt JS there is a more "straight forward" approach.
Just edit the nuxt.config.js like so:
module.exports = {
env: {
GOOGLE_API_KEY: process.env.GOOGLE_API_KEY
},
// ...
Then add the GOOGLE_API_KEY to Netlify through the build environment variables as usual.
Credit goes to yann-linn and his answer on github.
What you can also do is also to define a global constant in Webpack. Netlify environment variables defined in UI will work with it. You don't need dotenv or dotenv-webpack.
webpack.config.js
const webpack = require("webpack");
module.exports = {
plugins: [
new webpack.DefinePlugin({
"process.env.API_KEY": JSON.stringify(process.env.API_KEY)
}),
]
}
However again, of course you shouldn't do it just inputting enviornmental variables in the frontend if your API key is confidential and project public. The API key will appear in the source code of the website and will be easily accessible for everyone visiting it. Lambda function would be a better option.
You can use the Netlify's config file also ...
You can find documentation here.
Also i wanted to have the same ENV variables with with different values per branch/environment.
This workaround worked for me:
Create a netlify.toml file like:
[build]
NUXT_ENV_BASE_API = "/api"
NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr"
[context.branch-deploy]
environment = { NUXT_ENV_BASE_API = "/dev-api", NUXT_ENV_HOST_DOMAIN = "https://dev.your-domain.gr" }
[context.production]
environment = { NUXT_ENV_BASE_API = "/api", NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr" }
And deploy in Netlify ...
What are the constraints that Meteor is trying to resolve when it loads the packages at startup? Is it all related to versioning or is it actually looking at the code that you load with ap.use() in packages.js?
I am getting this error when I try to start up my project. I have a super-simple package file that I created with the meter create --package command. I put all of my files that make up the package into the directory that it created and moved that directory to .meteor/packages. I'm just trying to create a local package for now. Here's the contents of package.js in that directory:
Package.describe({
name: 'ammap-meteor',
summary: 'mapping library packaged for meteor ',
version: '1.0.0',
});
Package.onUse(function(api) {
api.versionsFrom('METEOR#0.9.0');
api.addFiles('ammap.js');
api.addFiles('ammap_amcharts_extension.js');
});
Package.onTest(function(api) {
api.use('tinytest');
api.use('ammap-meteor');
api.addFiles('ammap-meteor-tests.js');
});
My ammap-meteor-tests.js file is blank for the moment but it exists. Would that make a difference? And I assume you just omit the git: property from Package.onUse() for a local package, is that right?
OK, I was able to get past that error with the publish command:
meteor publish --create
So I did not succeed in making a local package (still not clear on that) but at least I can get the package to load now.
As per this https://hackpad.com/Migrating-Packages-zN0we9sIjkH I created a new meteor package and currently facing a problem when trying to publish.
PackageName : 'UserId:packageName'
To add package : 'meteor add packageName' (mateor add UserId:packageName did not work).
Package runs locally without any issue.
When I tried to publish,
cd path/to/your:package
meteor publish
Message :
There is no package named 'packageName'. If you are creating a new package, use the --create flag.
Publish failed.
Then I tried "meteor publish --create"
Message :
To confirm that you wish to create a top-level package with no account
prefix, please run this command again with the --top-level option.
(Only administrators can create top-level packages without an account prefix)
I used "UserId: PackageName" when creating the package and already log in to meteor account. Any idea to fix this issue?
Thanks !
Make sure the name field is in package.js:
Package.describe({
name: "user:packagename",
// other fields
});
Then, there will be no need to make sure the package is in a directory with the same name.
See https://github.com/mizzao/meteor-user-status for an example.
I am building a package for meteor to be published on Atmosphere and I need to get the current directory that the package is installed. I have tried process.cwd() in a file that's included in the package, but that gets the current directory of my app. The package is installed and working correctly, it just seems that the package is running in the same process as the app, hence process.cwd() is getting the current app dir. Does anyone know of a trick to get the current directory of the package?
This is what I have in the package files:
package.js
Package.on_use(function (api) {
api.use('sync-methods', 'server');
api.add_files(["lib/api_server.js"], "server");
api.add_files(["lib/api_client.js"], "client");
});
api_server.js
var cwd = process.cwd();
console.log(cwd);
This displays /home/dknell/meteor-apps/testApp
Why would you need current directory? To access a file inside the package? Then add a file as n package asset:
api.add_files(['file.txt'], 'server', {isAsset: true});
And then you can read it with Assets.getText('file.txt') in your package.
If you don't want the content, but an absolute path for another tool, you can try
var path = Npm.require('path');
var base = path.resolve('.');
var assetsBase = path.join(base, '/assets/packages/<author_smart-package-name>');
For the <author_smart-package-name> enter your package name, but if it has your meteor user name included, change the colon (:) to underscore (_)
That seems okay on OS X and Linux, probably works in windows as well.
oops, this is for files within the app, not a package. anyway maybe helpful to someone
I need to access a directory path for loading a list of files
// files in /private get built to:
// .meteorlocal/build/programs/server/assets/app/
// base path resolves to:
// .meteor/local/build/programs/server
so you need to manually add "/assets/app" to your paths.
until meteor change this at some point.
just getting to the content of a file isn't helpful if you have a directory of changing content...