Not using a pre-existing boilerplate like electron-vue, I'd like to set up a Electron app with Vue.js. What is the procedure to do so, specifically for a beginner?
So far,I have installed vue cli globally with NPM, created my project with vue create, then installed electron into it with npm install electron.
From here is where everything falls apart. The article I was following specifies starting the app with dev, which runs: "NODE_ENV=DEV vue-cli-service serve & sleep 5 && NODE_ENV=DEV electron app.js". For whatever reason, this doesn't work. Comments on the article seem to suggest these commands are linux formatted, but no one has provided a windows formatted equivalent.
electron . starts the app, as expected, but vue components just dont work. Adding a basic <script src="> tag to the vue CDN at the top of the index.html works, and causes it to work, but ideally I'd like the electron app to work offline, which I believe was the point of using vue-cli as opposed to just importing it from the CDN.
Is there a simple way to do this? or would I be better off just downloading vue manually, throwing it into a folder in the electron app, and loading it with a script tag?
The easiest way to create an Electron app with vue.js as the frontend framework:
install vue-cli 3：
npm install -g #vue/cli
create a project (be patient because it may take a while):
vue create myproject
cd myproject
add and invoke the generator of vue-cli-plugin-electron-builder (it will automatically set up electron for you and let you check changed files):
vue add electron-builder
test your app:
npm run electron:serve
or build your app:
npm run electron:build
See more in this guide: https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#to-start-a-development-server
This works in Windows Powershell if all PATH variables to vue-cli-sevice and electron are correct:
set NODE_ENV=DEV ; vue serve ; timeout 5 ; electron app.js
Note that the new version of vue changed some commands:
https://cli.vuejs.org/guide/installation.html
Windows command help:
Setting and getting Windows environment variables from the command prompt?
How do I run two commands in one line in Windows CMD?
What solved the issue in the end was changing relative paths to absolute.
Also this was useful: https://nklayman.github.io/vue-cli-plugin-electron-builder/
Related
I am trying to implement automated process of converting html into react components. I am following below link to automatically convert html into react components.
https://www.npmjs.com/package/html-to-react-components
but i am getting failure of command html2react. I also installed the package by using below command.
"npm i -g html-to-react-components".
But still it is saying "'html2react' is not recognized as an internal or external command,operable program or batch file".
The problem was that I installed the package globally. As i installed globally so i have to place my html file in C:/Users/YourComputerName/AppData/Roaming/npm.
and then from CLI I have to open the above folder and directory in which my html2react package is installed.
And then from that directory I have to implement the html2react command.
For clear understanding i am also attaching snapshot as well. CLI command description
Have a good learning.
I'm working on an ejected React application that uses webpack.DefinePlugin to store globally an object defining the folder names in the application for a specific path (kind of an ls in shell but using node fs)
I'm researching how to go back to the original create-react-app without loosing this functionality as some parts of the app relies on this, but I can't find anything other than a script that writes these names into a variable in js file prior to the commands npm start or npm run build.
The project is currently using Webpack 3 and Babel 6, the idea behind going back to react-scripts is get rid of the manual maintenance and simplify the project dependencies while upgrading the project
// analysis.js
module.exports = {
key: values from fs node package
};
// WEBPACK
new webpack.DefinePlugin({
"ANALYSIS": JSON.stringify(require('./analysis')),
}),
I expect the same values to be available in the application without needing to eject react-scripts
Any suggestions? Thanks!
I finally chose to develop a script that runs before any webpack script and creates the file that I import later like any other file inside the React app
Regards
I have written small Electron application. For building and packaging purposes i have downloaded following node package npm install -g electron-forge
When i run following command electron-forge make following directory is created with contents in it:
Above directory contains file your-app.exe. When i run this file i get following screen:
When i check the appropriate directory, files are presented there:
In development mode, when i try to start application with command electron-forge start application runs wthout any problems.
I can not distribute my application and really need your help: What could be the reason of this issue?
I installed Express Generator for Node.js but when I created an example app, I noticed that Jade is deprecated to Pug. I installed Pug, but I still need to tell express generator to use it each time. I've been reading about the subject and it's telling developers to just change the file names manually, but is there a way for this to work out of the box? How do I do that?
Express defaults to Jade but if you wish to pug as a template engine instead of using Jade.
You must type
express --view=pug myapp
This will create a new application called "myapp" using pug by default.
For a more in dept explanation type
express -h
this will show you the available commands, one of the commands is -v
--view add view support
Reference: https://expressjs.com/en/starter/generator.html
I made two mistakes trying to follow the above docs. It's because I'm still getting used to installing packages locally and globally.
2 Mistakes:
I. npx express-generator
This installed it locally, making express unavailable in the command line terminal.
When I installed it globally, I had access.
II. starting in a folder on Atom, an IDE. Express-generator creates a folder for you, so you start in the terminal outside of a folder, such as your desktop.
9 Steps to solution:
Use the terminal in your desktop directory, not an IDE.
Do not create a folder or any file.
Install express-generator globally, not locally.
sudo npm express-generator
Verify you have access by: express -h
Type: express --view=pug my app
Change directories to myapp folder on desktop
npm install
DEBUG=myapp:* npm start
open your browser to http://127.0.0.1:3000/
I think this issue come when npx express-generator is used alone (for those who have node versions above Node.js 8.2.0).
for node versions 8.2.0 or above,
Navigate to the directory where you want to create the app
npx express-generator --view=pug myapp
This will create a myapp folder in the directory with required .pug
files instead of .jade files
for earlier node versions you can find the required steps here express
application generator documentation
npx express-generator --view=pug install.
this should do the trick
I am learning NativeScript. For example, I would like to include this Guid generator package in my NativeScript app. My question is, how? I look at the directory structure generated by the command-line tool and I see the following relevant pieces:
node_modules
app
tns_modules
package.json
package.json
Do I add node-uuid to the ./package.json or the ./app/package.json? How do I reference it in my app then? For example, if I want to use uuid from the app.js file, what does that look like? I'm a little confused because of the package structure of NativeScript and how things actually get loaded at runtime.
Thanks
Run npm install from the root of your {N} app.
npm install --save node-uuid
The dependency will be added to the outer package.json.
And then in your app.js file, just use it like usual.
var uuid = require('node-uuid');
When you run tns run <platform> or tns build <platform>, the modules inside node_modules/ will be copied to folder under platforms/, take Android for example, it will be at platforms/android/assets/app/tns_modules/node-uuid. The building process is completed under platforms/ directory.