Purpose: Upload images from quasar project to aws amplify storage.
Installations : aws-amplify library for quasar and vuejs.
=> aws-amplify uses #aws-sdk for built in.
Once this code is added :
import { Amplify, Storage } from 'aws-amplify';
Amplify.configure(config);
I try to build my project: quasar -m build pwa/android/ios throws this error :
'request' is not exported by __vite-browser-external, imported by node_modules/#aws-sdk/credential-provider-imds/dist/es/remoteProvider/httpRequest.js
I saw on github for #aws-sdk this is a common error with vite.
I'm using quasar 2.6.0, aws-amplify 4.3.35
Any suggestions or workaround ?
in quasar.config.js file, you can add below in build section :
extendViteConf(viteConf, { isClient, isServer }) {
Object.assign(viteConf.resolve.alias, {
'./runtimeConfig': './runtimeConfig.browser',
});
},
Related
I've already used this vue3-google-map plugin in some Vue projects but now I'm working on a Nuxt project and I want to use this here as well. Is there any way to add it to Nuxt?
Here is the documentation:
You should be able to use the vue3-google-map plugin in a Nuxt project.
Install the plugin with terminal:
npm install vue3-google-map
Create a new file called vue-google-maps.js in the plugins directory of your Nuxt project.
In the vue-google-maps.js file, import the vue3-google-map plugin and add it to the Nuxt plugins array:
import Vue from 'vue';
import VueGoogleMaps from 'vue3-google-maps';
Vue.use(VueGoogleMaps, {
load: {
key: 'YOUR_API_KEY',
libraries: 'places',
},
});
In your Nuxt configuration file (nuxt.config.js), add the vue-google-maps.js file to the plugins array:
export default {
// ...
plugins: [
// ...
'#/plugins/vue-google-maps',
],
// ...
}
In your Vue component, you can now use the <GmapMap> component provided by the vue3-google-map plugin to display a Google Map.
im using webpack loader to inyect my vue app into django, here is the code:
Settings :
WEBPACK_LOADER = {
'DEFAULT':{
'BUNDLE_DIR_NAME':'/',
'STATS_FILE':os.path.join(BASE_DIR,'aptim-frontend/dist','webpack-stats.json')
}}
vue config file :
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
// on Windows you might want to set publicPath: "http://127.0.0.1:8080/"
publicPath: "http://0.0.0.0:8080/",
outputDir: "./dist/",
chainWebpack: (config) => {
config.optimization.splitChunks(false);
config
.plugin("BundleTracker")
.use(BundleTracker, [{ filename: "../frontend/webpack-stats.json" }]);
config.resolve.alias.set("__STATIC__", "static");
config.devServer
.public("http://0.0.0.0:8080")
.host("0.0.0.0")
.port(8080)
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.headers({ "Access-Control-Allow-Origin": ["*"] });},};
And the html line where I get the error is at the index html
{% render_bundle 'app' %}
ERROR :Exception Value: string indices must be integers
I had the same issue in the great Udemy course The Complete Guide to Django REST Framework and Vue JS. You probably cannot read the answer from Michele Saba if you are not subscribed.
It probably has something to do with the package versions and them being alpha. Downgrading to
webpack-bundle-tracker#0.4.3
django-webpack-loader==0.7.0
worked for me. Downgrade using:
npm install --save-dev webpack-bundle-tracker#0.4.3
Downgrade Webpack-bundle-tracker as told by #Frans
npm install --save-dev webpack-bundle-tracker#0.4.3
In vue.config.js
config
.plugin('BundleTracker')
.use(BundleTracker, [{filename: './webpack-stats.json'}])
Then delete the dist folder with the old webpack-stats.json
In this version and with this config webpack-stats.json file is generated in frontend not in frontend/dist
So you must change STATS_FILE in settings.py
(for example if your Vue project is frontend)
'STATS_FILE': os.path.join(BASE_DIR, 'frontend','webpack-stats.json'),
Then restart Vue and Django web-servers.
Exception Value: string indices must be integers
i got this strange error too, confirmed downgrade to webpack-bundle-tracker#0.4.3 works.
In my Vue project, I have mocked some data for next step development. I already save the test data in a json file. And my vue project is typical one created with Vue-Cli, and the structure for my project goes as following:
My_project
build
config
data
service_general_info.json
node_modules
src
components
component-A
component-A.vue
as you can see, all the folders are created by the vue-cli originally. And I make a new folder data and place the test data json file inside.
And I want to read in the data by axios library in an event handling function inside the component of component-A as following:
methods: {
addData() {
console.log('add json data...');
axios.get('./../../data/service_general_info.json');
},
},
I use relative path to locate the target file.But get 404 error back. So how to set the path correctly? Currently I am running the dev mode in local host.
The error message is: GET http://localhost:8080/data/service_general_info.json 404 (Not Found)
In Vue-cli project, axios can't get data from custom folder.
You should use static folder to save test json file.
So you should change axios call like this:
axios.get('/static/service_general_info.json');
This will get data from json.
If you are doing just for sake of testing then you can save it in public folder and access it directly on http root.
e.g. I have the file results.json in public folder then I can access it using http://localhost:8080/results.json
For me it didn't work using static folder. I had to put it in public folder.
I put json folder in public & then accessed it like below.
getCountries() {
return axios.get('json/country-by-abbreviation.json', { baseURL: window.location.origin })
.then((response) => { return response.data; })
.catch((error) => {
throw error.response.data;
});
}
When the http call is made from the server, axios has no idea that you're on http://localhost:8080, you have to give the full url.
Like this:
methods: {
addData() {
console.log('add json data...');
axios.get('http://localhost:8080/data/service_general_info.json');
},
},
I had this same issue, only the above solutions wouldn't work as it is being uploaded to a subdirectory. I found I needed to put it in the public/assets folder and use:
axios.get(process.env.BASE_URL+'assets/file.json')
While in vue.config.js I have set the local and live paths
module.exports = {
publicPath: process.env.NODE_ENV === 'production'
? '/path/to/app/'
: '/'
}
You can simply read a static JSON file using import. Then assign in data.
import ServiceInfo from './../../data/service_general_info.json';
export default{
data(){
return {
ServiceInfo
}
}
}
I use fountainJS Angular2 generator with Typescript and Systems.js
for scaffolding the project.
https://github.com/FountainJS/generator-fountain-angular2
But I got the issue, I can't add the component to the project.
When I put import {GOOGLE_MAPS_DIRECTIVES}
I get this error
system.src.js:1057 GET http://localhost:3000/node_modules/angular2-google-maps/core/index.js 404 (Not Found)
I went through that
https://angular-maps.com/docs/getting-started.html
'getting started' section and added some code to jspm.config.js file but I don't have angular-cli-build.js file inside my project.
My jspm.config.js
SystemJS.config({
packageConfigPaths: [
'npm:#*/*.json',
'npm:*.json',
'github:*/*.json'
],
map: {
'angular2-google-maps': 'node_modules/angular2-google-maps',
'#angular/common': 'npm:#angular/common#2.0.0-rc.4',
'#angular/compiler': 'npm:#angular/compiler#2.0.0-rc.4',
'#angular/core': 'npm:#angular/core#2.0.0-rc.4',
'#angular/http': 'npm:#angular/http#2.0.0-rc.4',
'#angular/platform-browser': 'npm:#angular/platform-browser#2.0.0-rc.4',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic#2.0.0-rc.4',
'#angular/router': 'npm:#angular/router#3.0.0-beta.2',
'es6-shim': 'npm:es6-shim#0.35.1',
'os': 'github:jspm/nodelibs-os#0.2.0-alpha',
'process': 'github:jspm/nodelibs-process#0.2.0-alpha',
'reflect-metadata': 'npm:reflect-metadata#0.1.3',
'rxjs': 'npm:rxjs#5.0.0-beta.6',
'ts': 'github:frankwallis/plugin-typescript#4.0.16',
'zone.js': 'npm:zone.js#0.6.17'
},
packages: {
'angular2-google-maps/core': {
defaultExtension: 'js',
main: 'index.js' // you can also use core.umd.js here, if you want faster loads
},
'github:frankwallis/plugin-typescript#4.0.16': {
'map': {
'typescript': 'npm:typescript#1.8.10'
}
},
'github:jspm/nodelibs-os#0.2.0-alpha': {
'map': {
'os-browserify': 'npm:os-browserify#0.2.1'
}
}
}
});
You are getting node_modules/angular2-google-maps/core/index.js 404 (Not Found) because node_modules is not made available by web server used by npm run serve.
If you need node_modules to be accessible by client code, you have to add route for it in conf/browsersync.conf.js:
routes: {
'/node_modules': 'node_modules',
Alternatively, you could use jspm instead of npm to install angular2-google-maps:
jspm install angular2-google-maps
and jspm would modify jspm.config.js to add correct mapping for angular2-google-maps.
BUT, after 404 error is fixed, I'm getting now
system.src.js:123 Uncaught (in promise) Error: (SystemJS) core_1.NgModule is not a function
TypeError: core_1.NgModule is not a function
which probably means that the latest angular2-google-maps is incompatible with angular2-rc4 installed by generator-fountain-angular2.
I have created a WebAPI using .Net 4.5 and want to document this API using Swagger.
I have added swagger-ui in my .Net project. Now when i browse to ../swagger-ui/index.html it successfully opens pet store api-docs (json) in swagger UI format.
My question is how can I create such (swagger) json for my WebAPI controllers and models? As I have put in required XML summaries/comments to c# classes and attributes.
I saw that Swagger.Net and Swashbuckle are there doing similar things but I could not really understand how to generate swagger-json file using any of them. There might be very small mistake I am doing but unable to point out.
Please help.
As stated, /swagger takes you to the swagger UI.
If you're using Swashbuckle, then /swagger/docs/v1 should take you to the swagger.json file - I found this using Chrome Dev tools.
Edit: if you're using Swashbuckle.AspNetCore, then the url is slightly different - /swagger/v1/swagger.json
You need to integrate Swagger.NET into your project so that you end up with the following controller:
public class SwaggerController : ApiController { /* snip */ }
and you should also have the following route registered:
context.Routes.MapHttpRoute (
name : "Swagger",
routeTemplate: "api/swagger"
defaults: new
{
controller = "Swagger",
action = "Get",
});
assuming that is working you should be able to call /api/swagger and get something like the following:
{
apiVersion: "4.0.0.0",
swaggerVersion: "2.0",
basePath: "http://localhost:5555",
resourcePath: null,
apis: [
{
path: "/api/docs/Values",
description: "No Documentation Found.",
operations: [ ]
},
{
path: "/api/docs/Home",
description: "No Documentation Found.",
operations: [ ]
}
]
}
then in SwaggerUI/index.html you'll want to update the discoveryUrl:
<script type="text/javascript">
$(function () {
window.swaggerUi = new SwaggerUi({
discoveryUrl: "http://localhost:5555/api/swagger",
apiKey:"",
dom_id:"swagger-ui-container",
supportHeaderParams: false,
supportedSubmitMethods: ['get', 'post', 'put']
});
window.swaggerUi.load();
});
</script>
You can use "NSwagStudio" desktop application to load the json document without running the api project.
By providing the api assembly.
https://github.com/RSuter/NSwag/wiki/NSwagStudio
Download the (NSwagStudio) windows desktop application.