Electron-builder with webpack - javascript

tl,dr:
Here's what I got:
Electron
React
Webpack
electron-builder
electron-edge
node-fibers
some static assets (.png, .svg etc.)
Here's what I want:
A crossplatform autoupdating installer for the software
The long version and the problems:
I can get Electron, React, Electron Edge, node-fibers, webpack and the static assets to run perfectly when I start the webpackserver in dev mode.
However, how can I integrate this into electron-builder?
I'm new to this whole build process and I just took this boilerplate to get started:
Github of the boilerplate
To me, the dev debug process seems to go like this:
Have webpack create a bundle.js and an index.html out of my src folder
Start a webpackserver with hot mode that serves these files
However, how should I tell electron-builder where to get the different files from? There is no package.json nor node_modules/ inside dist/ and node-fibers isn't getting bundled as well (because webpack seems to fck with __dirname or smth, so I excluded it).
Whenever I launch the generated .exe file (that's not the installer, just an exe file that's supposed to launch the program), a message appears that main.js can't be found in the app.asar file. I tried extracting it, but it fails before it gets to extract the whole package. Main.js is never needed anyway though, because that was the whole point of having webpack transpile it or am I missing something here?
I have searched all over the internet for hours now, but I don't get all the concepts ..
Could anyone here explain what's wrong with my setup and what I can do to fix that?

I recommend you to use https://github.com/chentsulin/electron-react-boilerplate
If you don't want to use boilerplate for react app, consider to use https://github.com/electron-userland/electron-webpack (but boilerplate is strongly recommended).

I ended up with this boilerplate:
https://github.com/szwacz/electron-boilerplate
I couldn't get HMR to work and had to fix some es6 stuff, but at least it's doing its job.

Related

Snowpack dev server is not recompiling files in node_modules when changed

I have a snowpack project that I started from the blank template. My index.js file calls a function from another module I'm developing that I have installed using npm link.
When I change a file in the other module, it doesn't get updated in snowpack. Even when I restart the dev server, it doesn't update. I have to restart snowpack with the --reload argument to clear the cache.
How do I make sure changes to files in node_modules get recognized by snowpack so that they are rebuilt?
Unfortunately the way Snowpack works is it caches the node_modules dependencies and rarely rebuilds them.
In the documentation section Using NPM Dependencies
Because your dependencies rarely change, Snowpack rarely needs to rebuild them.
Each build tool has its pros and cons, and Snowpack is not going to work for you, in this instance where you still need to update the linked dependency.
You might want to look at other build tools like Webpack. Here is stack overflow answer on correctly configure Webpack to watch only for the linked dependency.
It seems that even the Parcel 2 doesn't detect changes in linked dependencies.
You can delete .cache/snowpack inside node_modules folder for rebuilding. More concise you can delete specific folder which you want to make it rebuild, This is only hack I found that works.

Cannot use import statement outside a module error after export ZIP from CodeSandbox

I've downloaded this Phaser/MatterJS example from Codesandbox (->File ->Export to ZIP).
Running it locally returns this error:
Uncaught SyntaxError: Cannot use import statement outside a module - index.js:1
How to fix this?
What I tried so far:
I've installed all dependencies
Updated to latest NodeJS
Running it with a local server
Just as you have seen yourself the javascript that is written in the files is not something that the browsers understand out of the box, and so errors were thrown your way.
To send js that browsers understand, you need to use a tool like webpack, parcel. already in the project you shared parcel is used.
You have to do the following:
install the dependecies of the probject
in the root dir of the project run npm run start
parcel will bundle the files and then open an html page with the results
unfortunately when i tried this parcel did not work for me, there were errors related to JSON loading, however i have managed to get the game to work, by running npm run build, this will output for you the build files in a folder called dist.
Go to the dist folder, and start a local server there and visit the file it should work, however again for me it did not work. but i noticed that its due to parcel not getting the correct relative path of the bundled js file.
To solve that, open the index.html file in the dist folder, you will find that there is one script there
<script src="/js.d8530414.js"></script>
I had to change that to
<script src="./js.d8530414.js"></script> // because this was the correct file in my file system
After that visit the html file in the dist folder, and the game works fine.
Obviously this way of working is not conveninent, since for each change you want to see you have to build the project again using npm run build. You need to solve the problem of npm run start not working, it could be that this problem never occurs to you if you are on different os than mine. If it happens then i suggest updating parcel and trying again, if problem still persists, then you can look here since issue seems related to phaser wanting the json file as json, while parcel compiling it to javascript object.
index.html:
<script type = "module" src = "./js/index.js">
You have to tell the browser that this js file is a module, then it will change some things on the backside for you to use this. This article is very helpful for getting started with modules.

Version control strategy for webpack-encore project

I'm learning to use webpack-encore and noticed it is installed only as a dev dependency. Does that mean I should compile my js and css files on development and push them to the repository, and then to production?
That seems to me what the docs are implying, but wouldn't that mean a merge-conflict hell? Compiled files would be impossible to merge.
Also wouldn't that be contrary to version control philosophy? As far as I know, you don't publish binaries in compiled languages (i.e. C/C++), you push the code and expect the server to compile them. I know this isn't the same type of "compilation" in javascript, but what is the expected behavior of the production server in this case? To receive the files ready to serve them, or to compile them at the time of release?
Thanks in advance
Does that mean I should compile my js and css files on development and push them to the repository, and then to production?
Not exactly - it depends on how you deploy.
When you deploy, you need to run ./node_modules/.bin/encore production to build your assets. Once you've done this, only your built assets (e.g. web/build) need to be transferred to production.
You could run this command locally (or on some "build" server) and the transfer all the files to production. Or, you could use a git pull on production, and then run this command on production (the downside being that you would need Node.js installed on production).
You shouldn't / don't need to commit your built files to your repository. But... if it simplifies your deploy (i.e. you want to do a git pull and be done), there's no real problem with that.
I just added a PR to answer these in the FAQ (http://symfony.com/doc/current/frontend/encore/faq.html) - here's the PR until it's deployed: https://github.com/symfony/symfony-docs/pull/8109
Cheers!
Solution 1:
Run yarn run encore production locally
Check out which files have been created / modified
Add them to VCS
Commit
Push / deploy
Solution 2:
Push / deploy
Run yarn run encore production remotely during deployment
To my eyes the 2nd solution is way better, because you don't need an extra human-checking before deployment, everything is automated.
But this has a strong drawback: building assets can be a slow process, and when I deploy, my production is down during 5 to 20 seconds until assets are built.
Here's the HTTP 500 error:
An exception has been thrown during the rendering of a template ("Asset manifest file "[...]/web/build/manifest.json" does not exist.").
It looks like the manifest.json file is deleted at the beginning of the process, and created from scratch later on.
Something that should be improved?

Meteor build packages not included

I am currently trying to generate native versions of a small meteor app I built. When I run them on iOS or Android via the meteor run command it works and meteor build with --debug also generates an ipa/apk that works as expected. But when I run meteor build without --debug the web view only shows a white screen. Using remote debugging I noticed an injector error. I was wondering why and checked the apk/ipa content. There I recognized that in the debug version under assets/www/application/packages there is a bunch of .js and .js.map files which simply is not there in the non-debug ipa/apk.
In the index.html of the non-debug ipa/apk the imports of these files are also missing.
How can I tell meteor to just copy these obviously required files for non-debug?
When you build, Meteor concatenates and minifies all the JS files into a single bundle, same as Browserify and webpack are doing. That is why you do not see all the script imports.
It does not do it in debug to facilitate live reload / hot code push while you are developing, besides facilitating debugging​ obviously.
See the Meteor guide on building for production.
If you believe this difference causes some issue, you can simulate it in development using the --production flag after meteor run.
This addresses your titled and last question, but may not fix in itself your initial issue.

Deploying Aurelia Apps with gulp

I'm having some issues deploying my first Aurelia app using the 'gulp' process outlined in the Aurelia documentation here. I started developing it using the Aurelia provided ES 2016 Kit. After installing aurelia-bundler and gulp through npm and creating the bundle.js file, gulp states that no gulpfile was found when running the 'gulp bundle' command.
I tried renaming bundle.js to gulpfile.js. It then threw errors about unable to find an injectionConfigPath (which is talked about further down under Bundling a JSPM v0.17 App).
Do I need to follow the 0.17 process and instead name bundle.js => gulpfile.js against the documentation? Or do I have something setup wrong?
The bundling documentation assumes you are working from the skeleton as your base. Specifically skeleton-esnext or skeleton-typescript. If you download the latest release of the skeletons you can use one of those two skeletons as the starting point for your app, or you can try using one of the webpack skeletons (and thus learning Webpack).
You should be able to transition quite quickly, just delete the src folder in the skeleton you're going to use, and replace it with the src folder from your app. You'll also need to copy any dependencies, whether npm or (more likely) jspm from your existing app to the skeleton. You can then run npm install and jspm install then gulp bundle.
The kit you download on the Getting Started page is positioned to serve simply as a tool to help you work your way through the Getting Started guide without having to futz around with the crazy, mixed-up world that is Modern JavaScript tooling. It doesn't provide the full suite of tooling that our skeletons offer, or that our CLI will (very soon).
Quick edit: Downloading the skeletons and working from them is mentioned in "A Production Setup."

Categories