I am building a web application using Vue3 and Vite which has different app modes (test, dummy, prod) and languages (de, en, fr) and based on that I want to have different manifest files.
Main parts of my vite.config.js files:
export default defineConfig({
base: '/ui/',
plugins: [
vue(),
VitePWA({
registerType: 'prompt',
workbox: {
globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
sourcemap: true
},
includeAssets: [
'favicon.svg',
'favicon.ico',
'robots.txt',
'apple-touch-icon.png'
],
manifest: {
name: 'Example UI',
lang: 'en-US',
short_name: 'UI',
description:
'Very cool App!',
orientation: 'landscape-primary',
start_url: './',
scope: './',
id: './ui/',
theme_color: '#cc0000',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png'
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png'
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
purpose: 'any maskable'
}
]
}
}
})
At the end I want to have multiple manifests in my dist folder.
For example:
manifest.webmanifest
manifest_de-DE.webmanifest
manifest_dummy.webmanifest
manifest_dummy_de-DE.webmanifest
manifest_test.webmanifest
Kind of lost on how to achieve this. Maybe the easiest way is to just manually create the different manifests?
Any help and tips are much appreciated.
Related
I have been trying to use Webpack for several days.
And I encountered a problem in configuring.
This is my configuration now!(webpack config)
// Look for .html files
let htmlFiles = [];
let directories = ["src"];
while (directories.length > 0) {
let directory = directories.pop();
let dirContents = fs
.readdirSync(directory)
.map((file) => path.join(directory, file));
htmlFiles.push(...dirContents.filter((file) => file.endsWith(".html")));
directories.push(
...dirContents.filter((file) => fs.statSync(file).isDirectory())
);
}
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "[name].[contenthash].js",
},
plugins: [
new CleanWebpackPlugin(),
new WebpackBar(),
new HtmlWebpackPlugin({
template: "./src/index.html",
hash: true,
filename: "index.html",
inject: "head",
scriptLoading: "defer",
xhtml: true,
}),
],
module: {
rules: [
//-------> CSS <-------//
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
generator: {
filename: "assets/styles/[name].[contenthash] [ext]",
},
},
//-------> HTML <-------//
{
test: /\.html$/i,
loader: "html-loader",
},
//-------> Images <-------//
{
test: /\.(png|jpe?g|gif)$/i,
type: "asset/resource",
generator: {
filename: "assets/images/[name].[hash][ext]",
},
},
//-------> Fonts <-------//
{
test: /\.(woff(2)?|ttf|eot)$/,
type: "asset/resource",
generator: {
filename: "./assets/fonts/[name].[contenthash][ext]",
But during construction, I see that two files are created from index.js...why??...how to disable it??
How fix it?
Thanks
Two created .js
I'm trying to use node.js as my server and vue.js as my client side.
I'm building a chat application with both, with integrated stuff like Axios, Express, Sequelize and vuetify.
The project has been silent for a week of 2 due to a few complications.
I tried to start it back up again and i got this error on my server side:
ERROR Failed to compile with 1 errors 4:25:16 PM
This relative module was not found:
./src/main.js in multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/main.js
I've tried to change paths, restart servers and recreate files.
I'm quite new to Vue, so i have no clue what to do and i couldn't find an appropriate answer anywhere.
Here is the webpack.base.conf file
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
const createLintingRule = () => ({
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: !config.dev.showEslintErrorsInOverlay
}
})
module.exports = {
context: path.resolve(__dirname, '../'),
entry: {
app: './src/main.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'#': resolve('src'),
}
},
module: {
rules: [
...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
},
node: {
// prevent webpack from injecting useless setImmediate polyfill because Vue
// source contains it (although only uses it if it's native).
setImmediate: false,
// prevent webpack from injecting mocks to Node native modules
// that does not make sense for the client
dgram: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',
child_process: 'empty'
}
}```
It should just start the build like a regular app, but sadly.
For some reason my webpack configuration is loading the images that comes from my SCSS files but not the ones that come from the HTML files. Also when I run the BUILD command in order to deliver my prod archives it does not create the "img" folder. To be honest I'm pretty new with webpack 4 and I guess there's a couple of steps that I'm not including on the WP config file.
This is my webpack.dev.js
This is the prod folder structure that I would want to create:
dist
|----img
|----css
|----js
a.html
b.html
c.html
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: {
main: "./src/js/scripts.js"
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "js/[name].[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.scss$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"sass-loader"
]
},
{
test: /\.(png|jpg|gif)$/,
use: ["url-loader"]
}
]
},
devServer: {
port: 8080
},
plugins: [
new CleanWebpackPlugin("dist", {}),
new MiniCssExtractPlugin({
filename: "css/style.[contenthash].css"
}),
new HtmlWebpackPlugin({
template: "./src/index.html",
inject: false,
hash: true,
filename: "index.html"
}),
new HtmlWebpackPlugin({
template: "./src/actualitat.html",
inject: false,
hash: true,
filename: "actualitat.html"
}),
new HtmlWebpackPlugin({
template: "./src/projectes.html",
inject: false,
hash: true,
filename: "projectes.html"
})
]
};
This is the way im loading both css and js on my html files:
<link
rel="stylesheet"
href="<%=htmlWebpackPlugin.files.chunks.main.css %>"
/>
<script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
I have a "scripts.js" js file where I import the files like this:
import "../scss/style.scss";
import "../img/searchBar-icon.png";
import "../img/townHall.png";
import "../img/icon-title.png";
UPDATE:
I have change the way im loading images using the "file-loader" loader:
{
test: /\.(png|jpg|gif)$/,
use: {
loader: "file-loader",
options: {
outputPath: "img/",
name: "[name][hash].[ext]"
}
}
}
Now all of my images are being copied to the "img" folder which is good, problem is that all the names of the files have hashes now (which make sense since I'm telling the loader to add them) and they're not loading on my html files.
Can you try the following for loading the images?
{
test: /\.(jpe?g|png|gif|ico)$/i,
use: ["file-loader?name=[name].[hash].[ext]"]
}
I am having trouble referencing child assemblies that are required for a parent assembly translation.
First I POST to https://developer.api.autodesk.com/references/v1/setreference with the following body
{ master: 'urn:adsk.objects:os.object:stemn/57b9f339c77fe2652f830206-ckwdob3791d6u359wz7eklnmi.iam',
dependencies:
[ { file: 'urn:adsk.objects:os.object:stemn/57b9f339c77fe2652f830206-e3l7hokp0qxqn227b7qcjo47vi.iam',
metadata:
{ childPath: 'fuselage.iam',
parentPath: '57b9f339c77fe2652f830206-ckwdob3791d6u359wz7eklnmi.iam' } },
{ file: 'urn:adsk.objects:os.object:stemn/57b9f339c77fe2652f830206-mhrb7um0of74iasv37nzh0k9.iam',
metadata:
{ childPath: 'motor_mount.iam',
parentPath: '57b9f339c77fe2652f830206-ckwdob3791d6u359wz7eklnmi.iam' } } ] }
After setting references, I request translation and get the following result of the translation:
{ Result: 'Success',
Scope: '25660970-8194-4de0-baa4-c8f1f132b2a7',
RegisterType: [ 'thumbnail', '2dviewing', '3dviewing' ] }
After that I get the manifest for the urn and it is as follows:
{ guid: 'dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c3RlbW4vNTdiOWYzMzljNzdmZTI2NTJmODMwMjA2LWNrd2RvYjM3OTFkNnUzNTl3ejdla2xubWkuaWFt',
owner: 'dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c3RlbW4vNTdiOWYzMzljNzdmZTI2NTJmODMwMjA2LWNrd2RvYjM3OTFkNnUzNTl3ejdla2xubWkuaWFt',
type: 'design',
hasThumbnail: 'false',
startedAt: 'Wed Jan 04 04:43:59 UTC 2017',
urn: 'dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c3RlbW4vNTdiOWYzMzljNzdmZTI2NTJmODMwMjA2LWNrd2RvYjM3OTFkNnUzNTl3ejdla2xubWkuaWFt',
region: 'US',
status: 'failed',
progress: 'complete',
success: '100%',
children:
[ { guid: 'aa85aad6-c480-4a35-9cbf-4cf5994a25ba',
messages:
[ { type: 'warning',
message: 'The drawing\'s thumbnails were not properly created.',
code: 'TranslationWorker-ThumbnailGenerationFailed' } ],
name: '57b9f339c77fe2652f830206-ckwdob3791d6u359wz7eklnmi.iam',
success: '100%',
hasThumbnail: 'false',
role: 'viewable',
version: '2.0',
urn: 'dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c3RlbW4vNTdiOWYzMzljNzdmZTI2NTJmODMwMjA2LWNrd2RvYjM3OTFkNnUzNTl3ejdla2xubWkuaWFt',
status: 'failed',
assetCount: 25,
type: 'folder',
progress: 'complete',
children:
[ { guid: '015896d9-e6d3-4be6-8f3d-96da5e64eed3',
type: 'folder',
name: 'Scenes',
status: 'success',
progress: 'complete',
success: '100%',
hasThumbnail: 'false',
children:
[ { guid: '451f7aab-1917-40dd-b117-5dd8f90ab6a7',
type: 'geometry',
role: '3d',
name: 'Scene',
status: 'success',
messages:
[ { type: 'warning',
code: 'ATF-1023',
message:
[ 'The file: {0} does not exist.',
'X:\\Google Drive\\SCAAD\\PRJ_HAARDCraft\\HAARDCraft_JFlight\\CAD\\Fuselage\\fuselage.iam' ] },
{ type: 'warning',
code: 'ATF-1023',
message:
[ 'The file: {0} does not exist.',
'X:\\Google Drive\\SCAAD\\PRJ_HAARDCraft\\HAARDCraft_JFlight\\CAD\\Engine mount\\motor_mount.iam' ] },
{ type: 'error',
code: 'ATF-1026',
message:
[ 'The file: {0} is empty.',
'C:/worker/viewing-inventor-lmv/tmp/job-1/68/output/1/57b9f339c77fe2652f830206-ckwdob3791d6u359wz7eklnmi.svf' ] } ],
size: 27864,
progress: 'complete',
success: '100%',
hasThumbnail: 'false',
children:
[ { guid: '6dc4b244-8a47-4a75-bcb3-811dc7b4f294',
type: 'resource',
urn: 'urn:adsk.viewing:fs.file:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c3RlbW4vNTdiOWYzMzljNzdmZTI2NTJmODMwMjA2LWNrd2RvYjM3OTFkNnUzNTl3ejdla2xubWkuaWFt/output/1/57b9f339c77fe2652f830206-ckwdob3791d6u359wz7eklnmi.svf',
role: 'graphics',
mime: 'application/autodesk-svf',
size: 27864 } ] },
{ guid: '9bb1adbe-d9d9-4482-ac03-1d60bb0aea36',
type: 'resource',
urn: 'urn:adsk.viewing:fs.file:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c3RlbW4vNTdiOWYzMzljNzdmZTI2NTJmODMwMjA2LWNrd2RvYjM3OTFkNnUzNTl3ejdla2xubWkuaWFt/output/1/properties.db',
role: 'Autodesk.CloudPlatform.PropertyDatabase',
mime: 'application/autodesk-db',
status: 'success',
size: 24576 } ] },
{ guid: '039c2bcf-beb7-426b-916c-4a5adb814593',
type: 'resource',
role: 'Autodesk.CloudPlatform.DesignDescription',
urn: 'urn:adsk.viewing:fs.file:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6c3RlbW4vNTdiOWYzMzljNzdmZTI2NTJmODMwMjA2LWNrd2RvYjM3OTFkNnUzNTl3ejdla2xubWkuaWFt/output/xref/designDescription.json',
mime: 'application/json' } ] } ] }
Using the same code path I can successfully render an assembly with non-assembly child parts that have been set using setreference, but when rendering an assembly with child assemblies, setreference doesn't seem to set the references to the child assembly files successfully. Is there something wrong in my sequence for setting references to child assemblies?
I discussed with #sabrehage and finally got the working codes.
firstly, it is recommended to use Forge Derivative API v2 (zip + specify root file only), by which, the API user does not need to specify the references explicitly.
If you still want to use Forge Derivative API v1, the following is the note:
In local Inventor, the file references are managed by Inventor Project. Inventor will look for the ref files firstly in the specific folders of the Project, then look for the relative paths. Obviously, when the files are uploaded to bucket of Forge, no project file, all files are in the same level in physical perspective. So in v1, it depends on the reference file that the sender specifies.
If the hierarchy is like:
Top Assembly.iam
part1.ipt
part2.ipt
The reference file can be simply composed like what is mentioned in the blog:
http://adndevblog.typepad.com/cloud_and_mobile/2015/09/how-to-set-references-with-inventor-files-for-view-and-data-api.html.
In the dataset of #sabrehagen, the hierarchy contains nested assemblies, even in sub folder:
topassemb.iam
part in top assemb.ipt
subassem folder
subassem.iam
part1 in sub assem1.ipt
part2 in sub assem1.ipt
The correct way is to specify in one call (for top assembly only), and specify the subfolder in the reference map. In addition, we should define path name with original name, instead of that has been URL encoded. i.e.
{
"master" : "urn:adsk.objects:os.object:adsk2017-8/topassemb.iam",
"dependencies" : [
{
"file" : "urn:adsk.objects:os.object:adsk2017-8/subassem.iam",
"metadata" : {
"childPath" : "subassem/subassem.iam",
"parentPath" : "topassemb.iam"
}
},
{
"file" : "urn:adsk.objects:os.object:adsk2017-8/part1%20in%20sub%20assem1.ipt",
"metadata" : {
"childPath" : "part1 in sub assem1.ipt",
"parentPath" : "subassem/subassem.iam"
}
},
{
"file" : "urn:adsk.objects:os.object:adsk2017-8/part2%20in%20sub%20assem1.ipt",
"metadata" : {
"childPath" : "part2 in sub assem1.ipt",
"parentPath" : "subassem/subassem.iam"
}
},
{
"file" : "urn:adsk.objects:os.object:adsk2017-8/part%20in%20top%20assemb.ipt",
"metadata" : {
"childPath" : "part in top assemb.ipt",
"parentPath" : "topassemb.iam"
}
}
]
}
If without specifying subfolder, Forge thinks all files are within the same level, but it conflicts to the hierarchy of the last saving (absolute path). So it failed to find the corresponding files in the bucket.
After Forge gets the files and correct reference, it will look at the reference file and create the subfolders if they are specified, then put those files to the subfolder from bucket, finally translate.
as I remember, you would also need to configure the parts in the web service of set reference. This is a blog: http://adndevblog.typepad.com/cloud_and_mobile/2015/09/how-to-set-references-with-inventor-files-for-view-and-data-api.html. probably it could help you to diagnose the issue.
But, I strongly suggest you migrate to v2, by which you do not need to set reference manually. you can just upload all dataset as a zip file and set which file is the top (root) file, Forge will analyze the hierarchy automatically. This is another blog: http://adndevblog.typepad.com/cloud_and_mobile/2016/07/translate-referenced-files-by-derivative-api.html
I am trying to use Ext JS 4 and was playing with one of the grid examples and wanted to use JSON rather than XML. No mater how I code the JSON data, I get no records to load.
Here is my code:
Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [{
name: 'common',
type: 'string'
}, {
name: 'botanical',
type: 'string'
}, {
name: 'light'
}, ]
});
// Create the Data Store.
var store = Ext.create('Ext.data.Store', {
// Destroy the store if the grid is destroyed.
autoDestroy: true,
model: 'Plant',
proxy: {
type: 'ajax',
url: 'plants.json',
reader: {
type: 'json',
root: 'records'
}
},
sorters: [{
property: 'common',
direction: 'ASC'
}]
});
Here is my data:
{
"records": [
{
"common": "Bloodroot",
"botanical": "Sanguinaria canadensis",
"light": "Mostly Shady"
}, {
"common": "test",
"botanical": "I do not know",
"light": "Mostly Shady"
}
]
}
The XML reader works great, but we want to use JSON.
Thanks in advance
Have a look at this thread! You need to check your url path to plants.json, path starts from 'index.html' or some other similar starting point , and not the .js file where store is located. I tested your code and it works fine, also use autoLoad:true in your Ext.data.Store, i dont see your grid code so.. Cheers!