I have an addon which uses a different host for a service in development and at runtime. I believed the solution to this would be to define the hostname in the config/environment.js of the application and to have a the service pick it up as follows:
import ENV from '../config/environment';
export default AjaxService.extend({
host: ENV.APP.serviceHost,
...
This however doesn't work as it believes that the path to the environment.js file is within the scope of the addon instead of the main application.
What is the right way to do this when the name of the application in which this addon is included is not known?
I am using Ember 2.11.
I'm aware of 2 approaches for this:
Option 1
ember-config-service
This addon allows to access config via injected service. It solved the same issue for me.
Option 2
Manually pass config value via re-export.
// my-addon/app/services/my-ajax.js
// import config being in the app namespace
import ENV from '../config/environment';
import Service from 'my-addon/services/my-ajax';
export default Service.extend({
apiURL: ENV.APP.apiURL
});
/// my-addon/addon/services/my-ajax.js
export default AjaxService.extend({
init() {
console.log('api url in addon', this.apiUrl);
}
})
With recent versions of Ember, you can get the environment config from the container.
Ember.getOwner(this).resolveRegistration('config:environment')
I've used this package in my projects to good effect:
https://github.com/null-null-null/ember-get-config
Related
I'm trying to build my Next.js project but it keeps giving me this error in the terminal:
Error: Build optimization failed: found page without a React Component as default export in
pages/components/context/Context
That's the React context API file, there isn't supposed to be any default export there. Is this a bug or what?
You should move your components outside the pages folder. pages/ should only be used for page components as Next.js routing is based on its structure.
Next.js has a file-system based router built on the concept of pages.
When a file is added to the pages directory it's automatically available as a route.
By default, Next.js assumes anything under the pages folder is a page component and will try to build each file as a page.
Even though the above is the default behaviour, you can configure your Next.js app to include non-page files in the pages directory.
To do so, you can modify the pageExtensions entry in the next.config.js file as shown below. Then rename your page components to have a file extension that includes .page (_document.page.js, _app.page.js, index.page.js, etc).
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
With this configuration, Next.js will ignore any file that doesn't contain .page for the purpose of building pages/API routes and routing.
In my case, I had an empty file index.js in a folder. Using Nextjs Default Router
It seems to be not declared default export keyword in context component.
Try it as follow:
const Context = ()=>{
...
}
export default Context
I had the same error.
If you comment out all other code but leave this NextJS won't get mad at you:
export default function Home1() {
return <>{/* nothing */}</>;
}
I like to keep older index files and components locally and on github so this is a nice hack. I just copy all of the existing code add it to a new file and then add 1 to it for example:
index1.js
You can also leave a comment to kind of bring you and other devs up to speed as to why you did this for example:
//good for history of index implementation and associated syntax logic
I made a react component library that I would like to use in multiple projects.
I need to use different variables depending on the environments, for this reason I was thinking of using an initialization file (eg: my-library.init.js) in the host app that exports a config variable, but I don't know how to make the library read this variable from host app.
the file should look like this:
export const config = {
envs: {
S3_URL: 'https://my.dev.url.org'
ENV: 'dev'
}
}
Any help will be appreciated
Tahnk you
Im working on a Vue frontend that consumes a backend API that are both being deployed to the same kubernetes cluster. I would like to make the vue frontend application configurable so I can assign the address to the backend service on container startup instead of during build time.
I've been trying to do this by following Hendriks answer to this thread:
Pass environment variable into a Vue App at runtime
Due to my lack of Node and Javascript experience, I do not understand the following:
Where in the filestructure the files should be placed?
Why the config.js describes a function, and not just as export default { configObj: var } an object with the variables?
How I can access the variable in config.js through /config.js in the rest of my app? I can see the file in my browser at /config.js, but imports does not work.
I've currently placed the files like so:
/app
/public
index.html << I put the script tag in the head of this file.
...
/src
/config
config.js
main.js << setting axios.defaults.baseURL here. import config from '#/config/config.js' results in the str 'config.js'.
...
vue.config.js
Even though I know my backend service IPs/addresses are not supposed to change in production, setting these values before build seems like a very static and manual way to do it. During development running the app and backends locally on minikube, waiting for long builds quickly becomes very time consuming.
Very greatful for any insight in how I can achieve this, or any insight into why I can't seem to get Hendriks proposal to work.
It's important to note that what you are trying to do doesn't have anything to do with node. The execution environment of your Vue app is going to be the browser and not node (even if you are serving it with node). This is also why you can't do export default of your config, as some browsers won't understand that.
But here is a method you can use in order to get the config to your app using k8s.
Create a k8s config map, which will contain your config.js, something like:
apiVersion: v1
kind: ConfigMap
metadata:
name: vue-config
data:
config.js: |
function config () {
return { serverAddress: "https://example.com/api" };
}
Then in your pod/deployment embed the file:
apiVersion: v1
kind: Pod
spec:
containers:
- name: your-vue-app
image: your-vue-app:1.0.0
volumeMounts:
- name: config-volume
mountPath: /app/public/config.js
volumes:
- name: config-volume
configMap:
name: vue-config
Note that you are putting the config in the public directory. After that you can add the script tag in the index, which loads the config.js. Having the config as a function is useful, because you ensure some level of immutability, also I think it looks a bit better that a global config var.
When you want to use the configuration, you just call the config function anywhere in your configuration:
const conf = config();
I want to use oauth2-server in my meteor project which is an api provider implemented using restivus. In documentation for oauth2-server they specify to require the model in configuration which obviously need to export the model js file. How to use module.export in meteor so that I can export my model
I have an Ember CLI project, and one of my routes starts like:
import Ember from 'ember';
import Activity from '../models/activity';
var ACCESS_KEY = gOptions.access_key;
export default Ember.Route.extend({
...
I have a file vendor/local_config.js that contains machine-specific information, and is in the .gitignore to be omitted from the repository. It contains:
var gOptions = {
access_key: 'abcde'
};
In my ember-cli-build.js file, I have imported this file like so:
app.import('vendor/local_config.js');
Running this application, everything works perfectly. The gOptions is universally available.
However, JSHint complains:
routes/activities.js: line 4, col 25, 'gOptions' is not defined.
I'm very new to Ember - what is the preferred method for updating my route to ensure that the vendor-provided classes are properly resolved/detected when JSHint is examining my routes/models?
Or: Is there a superior/Ember-like way of providing locally-defined environment variables, that should not be shared to a team?
If you're importing a global library, you just need to add the library to your JSHint configuration. From the Ember-CLI documentation:
Note: Don’t forget to make JSHint happy by adding a /* global MY_GLOBAL */ to your module, or by defining it within the predefs section of your .jshintrc file.
So just open up your .jshintrc file and add gOptions to the predefs array.