I have some static data which will never change, like the data behind menu items
{
"menuItems": [{
"name": "Shows",
"route": "shows"
}, {
"name": "Podcasts",
"route": "podcasts"
}]
}
i created a json file in /dist folder and in the application route i'm creating a model from the file like
export default Route.extend({
model() {
return $.getJSON('/static/model.json')
}
});
is there a better practice to initialize model with static data?
As already was said in other answer, you are not supposed to edit files in dist/ folder.
You can do the following:
Create a new folder under app/. Let's say app/constants/
In that folder create new file menu.js:
export default {
"menuItems": [{
"name": "Shows",
"route": "shows"
}, {
"name": "Podcasts",
"route": "podcasts"
}]
};
In any other file import it as import menu from 'project-name/constants/menu';. And I don't think you need a model for this, you can just use what you export.
You really shouldn't be editing the dist/ folder - that's where Ember sticks compiled code.
If your static data is only used in a single place, it would be more direct to put it where it's used as a const. In this specific case, that's UI code, and probably belongs in the controller.
The model hook is best for loading data that potentially changes each time you hit that route - probably from a back end.
You can install ember-cli-json-module and then, any JSON files in either app or tests will be converted to ES6 modules that you can import like so:
import myFixture from 'my-app/tests/fixtures/my-fixture';
Related
I set up a very basic Vue.js app essentially using these steps. When I added the router to this project, it asked whether I wanted to use History Mode and I said yes.
Now I am trying to implement the corresponding server configuration changes aka "add[ing] a simple catch-all fallback route to [the] server" but I'm not sure how to do this since I'm using Vercel for my deployments and from my understanding it's managing the server for me.
It seems like I'm able to do some configuration in Vercel, and I'm thinking maybe I need to configure a redirect like in their firebase.json example? If so, would my vercel.json just look like this?
{
"redirects": [
{ "source": "**", "destination": "/index.html" }
]
}
As per Vercel's vercel.json routes upgrade guide, SPA Fallback section, use this on your vercel.json file:
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
In my case I'm also using Vercel Serverless functions, so I also need rewrites for the /api routes, and here the order is important, it must be done this way:
{
"rewrites": [
{ "source": "/api/(.*)", "destination": "/api" },
{ "source": "/(.*)", "destination": "/index.html" }
]
}
Generally, Vercel automatically detects your configuration and sets it up so that all traffic points at your index.html file. That's kind of their big selling point.
If you want more explicit control, you could use the configuration shown in the Caveat section of the Vue docs you first linked to. Just create a simple component that redirects to the homepage and point * to it.
import NotFound from '../components/NotFound.vue'
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFound }
]
})
export default {
name: 'NotFound',
template: `<div></div>`,
mounted() {
this.$router.push({ path: '/' })
}
}
You are right, Vercel manages the server for you and you can configure vercel through a vercel.json file. In that vercel.json file you can define rewrite rules as you already assumed. The correct format for this is shown here in the docs of vercel.
Since you want to add a match all rule which directs to the base of your path, adding the following to your vercel.json should work:
{
"rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}
Explanatory extras:
The :path basically symbolizes a placeholder and the * makes sure it doesn't just match one subpath deep but everything that follows after the initial slash.
For example without the * after /:path you would match domain.xyz/foo but not domain.xyz/foo/bar.
Furthermore since it's a named placeholder you can reuse the matched path for the destination like so "destination": "/index.html/:path".
Which shouldn't be necessary for a frontend application like vue which uses the route inside the browser, but could be helpful for serverless functions.
I’m working on an Angular 8.
We have a config file that contains the configuration and we have the app-specific config file. i.e. app.setting.json.
Each project will have its app.config.json file.
config.json look like
{
"settings": {
"xyz": false
},
"url": {}
}
app.setting.json
{
"settings": {
"xyz": true
}
}
We have implemented a service i.e. readConfigService that reads config.json file and returns its content to the app.
currently what I'm doing here is, in readConfigService, reading both the .json files using HTTP request and merging it in a single object and returning the same to the app.
Instead of merging it at runtime, finding a better approach to do the same during build time. i.e. ( ng build app name).
so after building the project, config.json should look like
{
"settings": {
"xyz": true
},
"url": {}
}
is there any way to merge the two .json files during build time?
In VSCode, I'm trying to add a sjson schema to a project I have. My .vscode/settings.json file is this:
{
"json.schemas": [
{
"fileMatch": [
"/*.json"
],
"url": "https://path/to/url.json"
}
]
}
```
This works, but it's currently applying to all .json files in all folders in the project, which I don't want. I want it to only apply to all .json files in the root directory. What do I have to put in the fileMatch property to enable this?
Update
Have tried the following. These work, but apply to every .json file:
"/*.json"
"*.json"
These don't work at all (no .json file gets the schema):
"${workspaceFolder}/*.json"
"${workspaceFolder}*.json"
"${workspaceFolder}\\*.json"
The above 3 without the {}
The above 4 with workspaceRoot
I ran into something similar, but instead of wanting to add everything in the root, I wanted to add all JSON files that are in a subfolder of the workspace (root) folder.
The solution I used was to add all JSON and then exclude the ones I didn't want (including the settings file itself):
{
"json.schemas": [
{
"fileMatch": [
"*.json",
"!/.vscode/settings.json",
"!/Some.json",
"!/SomeOther.json"
],
"url": "/Schema.json"
}
]
}
The ones that needed to be excluded were just a few, so I could just name them all.
A similar approach mightwork in the original problem, with something like this:
{
"fileMatch": [
"*.json",
"!/Folder1/*.json",
"!/Folder2/*.json"
],
}
In only problem here is that VS Code doesn't seem to allow wild cards for folder names. So using Glob like matching to exclude /*/*.json or /**/*.json doesn't help, unfortunately.
In the Visual Stuido Code demo minute 28:57-29:20 and 30:20-31:10, some cool JSON code completion is shown.
Where and how do I add a schema for my JSON files to a project?
How does VS Code know which schema to use for a given .json file?
The association of JSON schemas to files is done in the settings (File, Preferences, User Settings or Workspace Settings), under the property 'json.schemas'.
This is an example how the JSON schema for bower is associated to the bower schema.
"json.schemas": [
{
"fileMatch": [
"/bower.json",
"/.bower.json"
],
"url": "http://json.schemastore.org/bower"
},
...
You can also use schemas located in your workspace or define a schema right in the settings itself. Check https://code.visualstudio.com/docs/languages/json for examples.
You can refer your JSON Schema in $schema node and get your intellisense in VS Code right away. No need to configure anywhere else.
For example,
{
"$schema": "http://json.schemastore.org/coffeelint",
"line_endings": "unix"
}
This is the intellisense I was talking about. JSON Schema has the list of possible JSON properties in your current cursor position and VS Code can pull out that list of intellisense.
Note that, every official JSON should have a concrete JSON Schema to prove the data integrity. This answer is still valid!
The three ways I've got VS Code to use a JSON schema are ...
So for something like the Azure Function schema from ... http://json.schemastore.org
"json.schemas": [
{
"fileMatch": [
"/function.json"
],
"url": "http://json.schemastore.org/function"
}
]
In User Settings", i.e. as an element in the users settings.json in 'C:\Users\\AppData\Roaming\Code\User'
In the "Workspace Settings", then in it's the "settings" section in the .code-workspace file ... assuming your're using a VS Code Workspace
In the "Folder Settings", it's "settings" section in the settings.json, which is in the .vscode directory ... assuming your're using a VS Code Workspace
The Folder takes precedence over Workspace, and Workspace over User
And the Workspace and Folder work with relative paths, e.g. in the .code-workspace file ...
"settings": {
"json.schemas": [
{
"fileMatch": [
"/task.json"
],
"url": "./schema/tasks.schema.json"
}
]
}
or in the Folder Settings settings.json in \.vscode\ ...
"json.schemas": [
{
"fileMatch": [
"/task.json"
],
"url": "./schema/tasks.schema.json"
}
]
Just add the following configuration item to the settings file to fix it:
"json.validate.enable": false
Or use the GUI way:
I'm having a problem using a namespace in Laravel4.
We have built an API using Laravel3, in which we created an entire namespaced directory called Components which the RESTful Laravel controllers accessed to perform the logic on each request. The Components namespace was created in this manner so as to allow us to re-use the logic across several applications to keep things DRY.
In Laravel3, in the application/start.php file it was a simple matter of adding:
Autoloader::namespaces(array(
'Components' => 'path\to\Components',
));
This allowed us to simply reference a static method then in any of our RESTful controllers simply by
$result = Components\Services\Common::method();
In Laravel4, it is obviously a different approach. I have added the following to the composer.json file
"autoload": {
"classmap": [
"app/commands",
"app/controllers",
"app/models",
"app/database/migrations",
"app/database/seeds",
"app/tests/TestCase.php"
],
"psr-0": {
"Components": "path/to/API/Components"
}
},
and ran the composer dump-autoload command to add the namespace to the autoload_namespaces.php file.
However, I cannot reference the namespace in any of my new controllers in Laravel4. I just get a "Class 'Components\Services\Common' not found" in HomeController.php.
I have checked in the autoload_real.php file and output the loader variable, where my new namespace is listed under the 'C' element of the array. But no joy in using it.
I know the namespace works as it is in constant use with our Laravel3 applciation. I would rather not replicate the directory into our new Laravel4 application, otherwise the reason we designed things this way will be negated and we'll end up maintaining two codebases. The namespace directory exists within our web root directory but outside of both our Laravel3 and Laravel4 applications.
Thanks for the help guys
If your namespace is
Components
And your application is in
/var/www/application
And your namespaced classes are inside the subfolder
app/API
And this is an example of class file name:
/var/www/application/app/API/Components/Services/Common.php
Then you have to add to your composer json:
"autoload": {
"psr-0": {
"Components": "app/API"
}
},
If you are loading from another base path and your namespaced classes are in /var/www/Components, you can:
"autoload": {
"psr-0": {
"Components": "/var/www"
}
},
But if they are in /var/www/components/Components, then you have to
"autoload": {
"psr-0": {
"Components": "/var/www/components"
}
},
Because "Components" is the base of your namespaces and will always be added to the path before Composer search files to autoload.