I'm building an electron app using Next.js and electron-next package so Electron can handle the "ouput" folder from Next.js.
The app works great (simple html "hello world" test for all) for development; however, when I'm packaging the app with electron-builder, the page doesn't load and the DevTools is saying that it cannot load local files. I can see the files generated by electron-builder and nowhere I can find the static html files. Is there something I'm missing? Are the static files are included in the *.asar file?
This is for Electron under Windows 10.
Below I'm showing the package.json file setup for electron-builder, as well as the call to open the initial HTML file on the app entry file (index.js)
// ---------package.json----------
"scripts": {
"start": "electron .",
"build": "next build renderer && next export renderer",
"dist": "npm run build && electron-builder"
},
"build": {
"files": [
"**/*",
"renderer"
]
},
// --------index.js----------
// I can confirm that /renderer/out/start.html file is created
const devPath = "http://localhost:8000/start"
const prodPath = path.resolve('renderer/out/start.html')
const entry = isDev ? devPath : ('file://' + prodPath)
console.log(entry)
win.loadURL(entry)
This is the error I get:
Not allowed to load local resource: file:///C:/Users//Desktop/text_exc_app/dist/win-unpacked/resources/renderer/out/start.html
I found from another post that you can also do this (using app.getAppPath()):
const prodPath = path.join(app.getAppPath() ,'renderer/out/start.html')
This solved my problem!
I'm still not sure as to what is the difference between the two ways of accessing the files is, and why one works and the other one doesn't.
Related
I have upgraded my project to use workbox 6 and have modified my code accordingly.
After injecting manifest (generating serviceWorker.js) my browser reports error:
Service worker error TypeError: ServiceWorker script at
http://127.0.0.1:8080/serviceWorker.js for scope
http://127.0.0.1:8080/ threw an exception during script evaluation. app.js:218:23
I have removed code to determine what causes the error and am now left with:
serviceWorker.js (generated from serviceWroker-base.js)
importScripts('workbox-sw.js');
import { registerRoute } from 'workbox-routing';
import { StaleWhileRevalidate } from 'workbox-strategies';
const CACHE_DYNAMIC_NAME = 'dynamic-DEBUG-001'
webpack.config.js
const {InjectManifest} = require('workbox-webpack-plugin')
const workboxWebpackInjectPlugin = new InjectManifest({
swSrc: './serviceWorker.js'
})
// build WEBPACK CONFIG
const config = {}
//...
config.plugins = [
nodeEnvPlugin,
firebasePlugin,
cssExtractPlugin,
workboxWebpackInjectPlugin,
]
//...
return config
If I remove the imports of registerRoute and StaleWhileRevalidate in serviceWorker.js then the service worker registers successfully - but then I cannot register routes. ;) I have installed workbox-routing and workbox-strategies.
package.json
"scripts": {
"generate:sw": "workbox injectManifest"
},
"dependencies": {
...
"workbox-routing": "^6.0.2",
"workbox-strategies": "^6.0.2"
},
"devDependencies": {
...
"webpack": "^4.41.2"
}
generate:sw is the command I run to inject manifest and create serviceWorker.js.
My suspicion is that the imoprts are not handled correctly? How can I use registerRoute and StaleWhileRevalidate in my service worker?
Kind regards /K
The info at https://developers.google.com/web/tools/workbox/guides/using-bundlers might be helpful.
You don't need to include importScripts('workbox-sw.js');
If you plan on using precaching:
You can run InjectManifest via workbox-webpack-plugin and it will take care of both compiling your service worker (i.e. inlining the ES module imports into a final, runnable service worker file) as well as replacing a self.__WB_MANIFEST inside your service worker file with the actual precache manifest based on the assets in your webpack build.
If you don't plan on using precaching:
You can add your service worker file, including the ES module imports, as a entry point in your webpack config, and that should handle inlining the ES module imports into a final, runnable service worker file.
If you're already using webpack, then your workbox injectManifest step isn't needed. See the previous two points.
I'm trying to use dev-server in docker containers with devilbox.
Devilbox port: 80 and host: 127.0.0.1.
I did all configuration to use dev-server in virtual machine that i found: https://symfony.com/doc/current/frontend/encore/virtual-machine.html
But in chrome consol i have this error:
GET http://inmogence.loc/build/app.css net::ERR_ABORTED 404 (Not Found)
(index):98 GET http://inmogence.loc/build/app.js net::ERR_ABORTED 404 (Not Found)
And also i dont have autorefreshing window when i save.
I do the command $ yarn dev-server and tha answer is:
devilbox#php-7.4.9 in /shared/httpd/inmogence/symfony $ yarn dev-server
yarn run v1.22.4
$ encore dev-server --public http://inmogence.loc:80 --host 127.0.0.1
Running webpack-dev-server ...
ℹ ｢wds｣: Project is running at http://inmogence.loc:80/
ℹ ｢wds｣: webpack output is served from http://inmogence.loc:80/build/
ℹ ｢wds｣: Content not from webpack is served from /shared/httpd/inmogence/symfony/public
ℹ ｢wds｣: 404s will fallback to /index.html
DONE Compiled successfully in 866ms 9:14:39 PM
WAIT Compiling... 9:57:12 PM
DONE Compiled successfully in 73ms
So it look that its working.
My webpack.config.js:
var Encore = require('#symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables #babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();
And my package.json:
{
"devDependencies": {
"#symfony/webpack-encore": "^0.30.0",
"core-js": "^3.0.0",
"regenerator-runtime": "^0.13.2",
"webpack-notifier": "^1.6.0"
},
"license": "UNLICENSED",
"private": true,
"scripts": {
"dev-server": "encore dev-server --public http://inmogence.loc:80 --host 127.0.0.1",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
My build/manifest.json:
{
"build/app.css": "http://inmogence.loc:80/build/app.css",
"build/app.js": "http://inmogence.loc:80/build/app.js",
"build/runtime.js": "http://inmogence.loc:80/build/runtime.js",
"build/vendors~app.js": "http://inmogence.loc:80/build/vendors~app.js"
}
And my entrypoints.json:
{
"entrypoints": {
"app": {
"js": [
"http://inmogence.loc:80/build/runtime.js",
"http://inmogence.loc:80/build/vendors~app.js",
"http://inmogence.loc:80/build/app.js"
],
"css": [
"http://inmogence.loc:80/build/app.css"
]
}
}
}
So any solution ?
Given an application made in electron. The folder structure would look something like:
App
- assets
-models
- exe files
index.html
main.js
When executing the build following the recommendation of the site by entering the following command:
electron-packager . --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName="Electron Tutorial App"
The electron v.1.7.9 creates the build correctly, however it inside the release-builds / resources folder the app.asar file, so all the content that was inside my models folder becomes inaccessible. Inside this folder were .exe files that should be run on demand.
The system then looks for the files in the following url: parth_do_projeto / resources / app.asar / assets / models /, that is, it considers that the app.assar is a folder, but after the app.asar build is a file.
Since there were .exe files inside the original folder, the app.asar can not absorb executables.
What would be the way I keep these .exe files? If you build the build without the --asar parameter, the program works correctly, enter, all my project folder / source code is exposed.
My question is what is the best way to generate the build, keeping the code closed and making use of .exe files?
The short answer to your question is to use the unpackDir option for the asar option inside of electron-packager. Here is a sample of what this might look like:
'use strict';
... ...
var packager = require('electron-packager');
var electronPackage = require('electron/package.json');
var pkg = require('./package.json');
// pull the electron version from the package.json file
var electronVersion = electronPackage.version;
... ...
var opts = {
name: pkg.name,
platform: 'win32',
arch: 'ia32', // ia32, x64 or all
dir: './', // source location of app
out: './edist/', // destination location for app os/native binaries
ignore: config.electronignore, // don't include these directories in the electron app build
icon: config.icon,
asar: {unpackDir: config.excludeFromASAR}, // compress project/modules into an asar blob excluding some things.
overwrite: true,
prune: true,
electronVersion: electronVersion , // Tell the packager what version of electron to build with
appCopyright: pkg.copyright, // copyright info
appVersion: pkg.version, // The version of the application we are building
win32metadata: { // Windows Only config data
CompanyName: pkg.authors,
ProductName: pkg.name,
FileDescription: pkg.description,
OriginalFilename: pkg.name + '.exe'
}
};
// Build the electron app
gulp.task('build:electron', function (cb) {
console.log('Launching task to package binaries for ' + opts.name + ' v' + opts['appVersion']);
packager(opts, function (err, appPath) {
console.log(' <- packagerDone() ' + err + ' ' + appPath);
console.log(' all done!');
cb();
});
});
I have an electron application for which I use electron-packager to compile and grunt-electron-installer to generate the Windows installer package.
Upon installation I handle the squirrel events like so:
//...
switch (squirrelCommand) {
case '--squirrel-install':
case '--squirrel-updated':
createShortcuts(cleanUp);
break;
//...
and the createShortcuts function just spawns a child process to call the Update.exe (Squirrel.exe) with the --createShortcut=myapp.exe arguments
This works, however, when the shortcut it generated it is named Electron instead of myapp.
I don't see any other ways to specify the output name of the shortcut, so how would I change the generated shortcut to say myapp?
Here is the snippet of the squirrel logs:
2016-03-20 10:34:35> ApplyReleasesImpl: Creating shortcut for myapp.exe => C:\Users\zeus\Desktop\Electron.lnk
2016-03-20 10:34:35> ApplyReleasesImpl: About to save shortcut: C:\Users\zeus\Desktop\Electron.lnk (target C:\Users\zeus\AppData\Local\myapp\Update.exe, workingDir C:\Users\zeus\AppData\Local\myapp\app-0.0.3, args --processStart myapp.exe)
Upon further investigation into electron-packager I found a more detailed explanation about the resource editing here.
using the electron-packager command line I pass these arguments to update the embedded electron exe information:
electron-packager ... --version-string.CompanyName="Company Inc." --version-string.ProductName="Product" ...
The grunt-electron-installer will look for this embedded application information to generate the name for the shortcut.
If you use electron-forge, you may want to try a config that looks like this:
"electronPackagerConfig": {
"icon": "Icon",
"win32metadata":{
"ProductName": "My App",
"CompanyName": "My Company"
}
}
More info here:
https://github.com/electron-userland/electron-forge/issues/89
Try to use electron-builder if you get painful with Squirrel. You can use the command as below to make your installer for Windows:
electron-builder path/to/your-electron-packager-output --platform=win --out=path/to/your-installer-output --config=path/to/builder.json --target=win
Sample content for builder.json:
{
"win": {
"title": "My Production Name",
"icon": "path/to/your-icon.ico",
"version": "1.0.0",
"publisher": "Your Company Name"
}
}
P.s: You must install NSIS and add NSIS path into PATH environment before you run the above command.
What is the best strategy to deploy a Dart Web-ui app manually ?
pub deploy doesn't work for me and I have raised bug report. So am thinking what is the best way to manually deploy.
This is how I started:
1) From project root I compile the webui components (dwc.dart)
2) change directory to web/out then run dart2js
3) copy all .js files into that scripts/js public folder on server
4) copy appname.html to server changing css and script paths to option 3
5) Make sure dart.js is also in the same directory as item 3
this is as far as I got. So what else do I need to do ?
A few questions:
1) Do I manually change the file paths in the generated .js files to point to public folders on server for the files they are referencing and make sure those files are on server also ?
2) Do I need to copy all packages to server also ?
3) Any preferred file structure on server?
Any tips on this really appreciated.
Thanks.
I wrote a Grunt script for it (since I had no time to look up how to properly write code for Grunt, I did not share the code since it's a mess) but I basically do this:
compiling a list of files with dwc to a given out dir
compile it to javascript
clean up all non-deployable files
change some paths inside the HTML to match the server paths (for some reasons, this gets changed by the compilation process)
remove all packages except the ones I really need (JS interopt and browser)
Since I'm only using the JS version, I remove all dart packages. Since the paths inside the HTML files are up to you, you can already use a structure that suits you/your server.
I can provide you with a Grunt script to understand the order of tasks. Practically the order I use is this one:
Create the build directory. I usually use /build/web. I usually create these files (index.html, main.dart, /css and so on into the /web dir). I create the rest of components into /lib directory.
Compile the .dart file that contains the main() function ("main.dart" in my case for simpler projects) file to Javascript and put it into /build/web directory
Copy the other needed files and folders to the /build/web directory. Also, during this process you'll be copying the packages that your project needs. You'll see in the example provided below.
Remove all empty folders from the project
You can create a Grunt task to open the /index.html file in the browser once the building process has ended (I will not provide this example)
The structure of the dart test project:
testApp
- gruntfile.js
- package.js
/lib
/packages
/angular
/web
- index.html
- main.dart
/css
/img
So, the Grunt example script to cover steps from 1 - 4 looks like this (copy it to gruntfile.js):
module.exports = function (grunt) {
grunt.initConfig({
// 1.
// create build web directory
mkdir: {
build: {
options: {
create: ['build/web']
}
}
},
// 2.
// compile dart files
dart2js: {
options: {
// use this to fix a problem into dart2js node module. The module calls dart2js not dart2js.bat.
// this is needed for Windows. So use the path to your dart2js.bat file
"dart2js_bin": "C:/dart/dart-sdk/bin/dart2js.bat"
},
compile: {
files: {'build/web/main.dart.js': 'web/main.dart'}
}
},
// 3.
// copy all needed files, including all needed packages
// except the .dart files.
copy: {
build: {
files: [
{
expand: true,
src: [
'web/!(*.dart)',
'web/css/*.css',
'web/res/*.svg',
'web/packages/angular/**/!(*.dart)',
'web/packages/browser/**/!(*.dart)'
],
dest: 'build'
}
]
}
},
// 4.
// remove empty directories copied using the previous task
cleanempty: {
build: {
options: {
files: false
},
src: ['build/web/packages/**/*']
}
},
});
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
grunt.registerTask('default', [
'mkdir:build',
'dart2js',
'copy:build',
'cleanempty:build'
]);
};
So this is the Grunt script example.
Create a /gruntfile.js file into your project's root directory and copy/paste the script to it.
Create a /package.json file into your project's root directory and copy/paste the following script:
{
"name": "testApp",
"version": "0.0.1",
"description": "SomeDescriptionForTheTestApp",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "YourName",
"peerDependencies": {
"grunt-cli": "^0.1.13"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-cleanempty": "^1.0.3",
"grunt-contrib-copy": "^0.7.0",
"grunt-dart2js": "0.0.5",
"grunt-mkdir": "^0.1.2",
"matchdep": "^0.3.0"
}
}
Open Command Prompt in Windows, Terminal in Linux, navigate to your project's root directory and use this command:
npm install
Wait untill all Grunt modules needed will be downloaded to your local project. Once this is finished, issue this command in Command Prompt or Terminal:
node -e "require('grunt').cli()"
You can use this to initiate Grunt default task without having Grunt installed globally on your system.
Now, to know the exact build structure for your project (including the packages that the project needs), make a build using Pub Build. Then you will be able to instruct Grunt to create the same dir structure.
You can add other tasks (like minification) if you want.
Hope this will help you all to understand the process and get you started with a test app first. Add your comments to make this even better and simplify it even more.