Is it possible to specify "main" file when launching node-webkit - node-webkit

I'm not sure if this is possible or not. I am wondering if there is a way to specify the index file that is opened up when node-webkit is launched. i.e., I am trying to override the "main" key in the manifest file.
Here is a basic example of a setup and what I want to do:
package.json:
{
"main": "index.html",
"name": "nw-demo",
...
}
The package looks something like this:
app.nw
| -- package.json
` -- index.html
` -- anotherIndex.html
...
Desired command:
nw app.nw --main="anotherIndex.html"
I am aware of the --url="FILE.html" command line switch specified here, but when I pass this param node-webkit fails to open at all.

Node Webkit can support opening the file, as you want it to. This code is not bullet-proof, but it should get you started.
Follow these steps:
Place the following JavaScript in the head of your default index.html page:
window.gui = require('nw.gui');
checkFile = function()
{
var arg = window.gui.App.argv[1];
if (arg)
{
window.location = arg;
}
}
Now add this to the body tag : onLoad="checkFile();"
You should now be able to call Node WebKit from the command line as follows:
nw app.nw startwiththisfile.html
If startwiththisfile.html is in your app.nw package, it should launch.

Related

Vite build gets path inside css file wrong if i set base to './'

i've set up a plain vanilla js Vite installation and changed the folder structure to include all my "working" files inside a "src" folder.
With the following rollup Option inside my vite.config.js file, the build process mimic my folder structure inside the dist folder as well.
rollupOptions: {
output: {
assetFileNames: (assetInfo) => {
let extType = assetInfo.name.split('.')[1];
if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
extType = 'img';
}
if (/woff|woff2|ttf/i.test(extType)) {
extType = 'fonts';
}
return `assets/${extType}/[name]-[hash][extname]`;
},
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
},
},
Build process works as intended: all files are inside their specified folders and all links inside html & css files are rewritten correctly.
But as soon as i set 'base' to './' or '' inside my vite.config.js file and build the project the url links inside css files are corrupted. They are missing the path. Only base + filename are written. All urls inside html files are build correctly.
If i set the base to something like '/somename/' all urls (html&css) are build correctly.
How can i fix this? :)
Here is a stackblitz example, where the body background image shows this behaviour. https://stackblitz.com/edit/vitejs-vite-j6xd8y?file=dist/assets/css/index-1e183c12.css
This seems to be a bug in Vite 2 (as of 2.9.12). I recommend reporting the issue.
As a workaround, switch to Vite 3 (currently 3.0.0-beta.2), which has refactored the base configuration code and avoids the problem you observed:
npm i -D vite#beta
demo

Change properties in manifest.json file on build

I have a website with 2 domains like Page1.com and Page2.com. In my manifest.json file i have set the name to Page 1, but when the website is build and published to Page1.com and to Page2.com i want to change the name to be the same as the domain name. But how can i do this in my build step? Today i se Page 1 when i visit Page2.com.
I have tried to change the meta, application-name in my code to get the correct name, but this don't work.
My vue.config
const manifestJSON = require('./public/manifest.json')
module.exports = {
pluginOptions: {
i18n: {
locale: 'en',
fallbackLocale: 'en',
localeDir: 'locales',
enableInSFC: true
}
},
runtimeCompiler: true,
pwa: {
themeColor: manifestJSON.theme_color,
name: manifestJSON.short_name,
msTileColor: manifestJSON.background_color,
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'service-worker.js',
exclude: [
/_redirects$/
]
}
}
}
This site is build with VueJs and use Netlify as host.
So the manifest file is generated by vue-cli every time you build your app. So you shouldn't be using it to seed the vue-config file.
The one file that you could use the way you have shown here would be your package.json file - but it won't hold the values you are looking for.
Your Vue.config file is where you would enter, manually, the pwa info like theme and background color, etc.
To get back to your initial question, you could create two separate build scripts in your package.json, one for page1 and one for page2, and use environment variables to specify the name you ant to use:
"scripts": {
"page1": "env SITE_NAME='Page 1' npm run prod",
"page2": "env SITE_NAME='Page 2' npm run prod",
...
}
Then in your vue.config file, you can use the variable to build your pwa object:
pwa: {
name: process.env.SITE_NAME,
...
}
Finally, you can build your apps by calling
npm run page1
Be careful though: every build will overwrite your public folder! Depending on your context, how/when you build each app, you may have to take additional steps to generate two separate output folders.
The easiest way is to use process.argv to get a command line argument.
For example if you command to run the file is:
node file.js
Then using:
node file.js env_variable_str
Will have process.argv[process.argv.length - 1] === "env_variable_str"
In my case the manifest had to change not just the value but also add/remove a key depending on the argument. So I made a template (manifest_template.json) and used a "build helper" to create the correct manifest based on my argument in the public/ folder. Then I chained this command with npm run build and had another chaining command which made the zip folder.
My workflow: create manifest.json in public -> npm run build -> make zip with correct name
Let me know if you want to see the code!

Vue Dev Tools - does not working "Open in Editor" button. How to fix this?

I am trying to setup this feature from tutorial:
https://github.com/vuejs/vue-devtools/blob/master/docs/open-in-editor.md
but got an error
"C:\Users\User\AppData\Local\Programs\Microsoft" не является внутренней или внешней, исполняемой программой или пакетным файлом.
Could not open LeadsEdit.vue in the editor.
The editor process exited with an error: (code 1).
To specify an editor, sepcify the EDITOR env variable or add "editor" field to your Vue project config.
in my vue.config.js (project based on vue cli 3.0)
const openInEditor = require('launch-editor-middleware');
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
devServer: {
before(app) {
app.use('/__open-in-editor', openInEditor('code'))
}
}
}
UPD. Without this code the problem still remain.
UPD2.
I am trying to set EDITOR variable in .env file
VUE_APP_EDITOR=/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe
Or with vue.config.js
const openInEditor = require('launch-editor-middleware');
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
devServer: {
before(app) {
app.use('/__open-in-editor', openInEditor('/c/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
}
}
}
But the problem still remains
What may cause this problem?
How can I fix this error?
It seems like dev tools is trying to open the editor executable C:\Users\User\AppData\Local\Programs\Microsoft, which is most likely wrong. The default install location on Windows 10 is (to the best of my knowledge) C:\Users\User\AppData\Local\Programs\Microsoft VS Code\Code.exe.
launch-editor tries to find the editor from the currently running processes and falls back to the environment variables EDITOR and VISUAL (see https://github.com/yyx990803/launch-editor#why), so you can probably set the EDITOR env var to the correct path.
Probably, there are quotes missing around the editor config so it gets cut off at the first space. I don't really know where the path comes from, either you configured it via environment variables or in your vue project config.
Based on the information in your updated question, you could try this:
I don't know where the variable name VUE_APP_EDITOR comes from, but I guess it should be EDITOR. Change it to EDITOR and see what happens
The path you are using looks wrong (i.e. not like a windows path). Try c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe instead.
E.g.:
app.use('/__open-in-editor', openInEditor('c:/Users/User/AppData/Local/Programs/Microsoft VS Code/Code.exe'))
You can test whether the path is correct by starting a cmd shell and entering the path. If it is correct, VS Code should open. If not, it will tell you the path was not found.
Also have a look at this, there is some more on how to integrate vue devtools & VS Code: https://gist.github.com/moreta/d3989686b6a1f2416b5802cac8df16b4

Running a durandal app with the main-built file results does not work

I am having some problems with the optimized code that weyland generates. Here is what I did so far:
This is my project structure:
This is my weyland-config file:
exports.config = function(weyland) {
weyland.build('main')
.task.uglifyjs({
include:['www/**/*.js', 'www/js/durandal/**/*.js']
})
.task.rjs({
include:['www/**/*.{js,html}', 'www/js/durandal/**/*.js'],
loaderPluginExtensionMaps:{
'.html':'text'
},
rjs:{
name:'libs/require/require', //to deploy with require.js, use the build's name here instead
baseUrl : '../www/js',
paths : {
'text': 'libs/require/text',
'durandal': 'durandal',
'plugins': 'durandal/plugins',
'transitions': 'durandal/transitions',
'knockout': 'empty:',
'bootstrap': 'empty:',
'jquery': 'empty:'
},
inlineText: true,
optimize : 'none',
pragmas: {
build: true
},
stubModules : ['text'],
keepBuildDir: true,
out:'../www/js/main-built.js'
}
});
}
This is what I added in my index.html file to run the generated file instead of the one created by me:
<script src="js/main-built.js"></script>
I have also tryed using:
<script data-main="js/main-built" src="js/libs/require/require.js"></script>
This is what I had before:
<script data-main="js/main" src="js/libs/require/require.js"></script>
After I run weyland build on the command line the main-built file get's generated without any errors.
If I try to run the app the applycation freezez at the start screen as if the the app.start() method never get's called and no errors are being displayed.
I have checked chrome debugging tools the main-built file is recieved by the client it just seems it does nothing.
What am I doing wrong?
EDIT
I have also tryed building using almond-custom and ading this aditional configuration:
insertRequire:['main']
wrap:true
When I try to run the app I get this error:
Uncaught Error: main missing durandal/app
In my main fail I am loading the 'durandal/app' threw require js and for some reason it can not find it anymore

Running DOH on the command line with node.js

My first attempt to run tests using Dojo 1.8.3 on the command line with
node was thwarted by this error message:
../dojo/dojo.js:15
ode:function(){return _25;},guardCheckComplete:_37};};if(1){var _38=location.p
^
ReferenceError: location is not defined
The workaround is to use the uncompressed source instead of the release,
since the optimized version only seems to work in a browser. Next I tried a configuration script
// bootstrap.js
dojoConfig = {
baseUrl: ".",
packages:[{name: 'dojo', location: '../dojo_src'}],
deps: ['./ui_test.js']
};
require('../dojo_src/dojo.js');
And a simple test
// ui_test.js
dojo.require("doh.runner");
doh.register("test_1", [
function four_eq_4() {
var x = 4;
doh.is(x.toString(), "4");
}
]);
doh.run();
console.log("done.");
When I run the tests doh.run() does not seem to have an effect
$ node bootstrap.js
done.
My directory structure:
/app
bootstrap.js
ui_test.js
/util/doh
/dojo_src
What is the correct way to use DOH on the command line?
The answer is simple, but not obvious. Run with load=doh to invoke the test runner.
$ node bootstrap.js load=odh