I started coding recently in JavaScript and started to make a little WebPage that's am gonna present it to a Client.The thing is that you need a server to run the webPage, I can't make the client open one each time ... (I could have gone for another language to make it Offline and easier, but I wanted to try JS for the GUI and performance).
So I thought about making some sort of a .bat file to open the server,Open the html file,when html is closed, the servers shuts down.(I know NOTHING about .bat files...)
after a little research I found that I can do it using Python and it's easy,but even then , I have to install Py. on the clients computer and I want to avoid that.
And more over, I found that my App doesn't work on Python's server or for the LiveServer extention from VS Code. (Yes I am new to React, I used npm to download a WebPackage, Used 'npm start' for the server and it works fine, it must be a probleme in the html when when importing js or when using ReactDOM.render).
This might be a little complicated but please if anyone have a suggestion then I will be grateful.
If you are using create-react-app, You can run yarn build and it will create the production build in your build folder. just run index.html in a browser and it will run the website without any server.
I think you should use Electron it helps you to build cross-platform desktop apps with JavaScript, HTML, and CSS.
I've used phpDesktop for building a desktop application using PHP, but this is better in every aspect.
ElectronJS Homepage
This is a great Electron Crash Course
Related
I would like to know how to make my Next.js file work on every computer without having to reinstall all my modules.
Basically, I have my folder, nextjs-node, containing the following folders:
components
lib
public
node_modules
page style
package.json
I'd like to know if there is something I could do to create an icon on which I can just click to launch my website without have to go to the folder in my terminal and type npm run dev .
As a heads up, stack overflow is more for asking specific questions rather than general project approaches, as a result this will most likely be flagged eventually.
However to answer your question:
So next just creates a framework for websites which means that what you want to do isn't quite possible however there are a couple of options here:
You want to have an executable that launches your platform as an electron app. An example could be done with: https://github.com/saltyshiomix/nextron
You can always just host this as a website, and users can use shortcuts to just link over to the site in a web browser.
You can make your site a progressive web app where the user can save your site locally (however you will still need to do option 2).
Is it possible to run a js file locally that downloads a secondary file and then run the latter?
I know the best thing would be to download the file from the server and save it locally, I would just like to understand if there is still the possibility to do the above.
Example:
Open terminal
1- node index js
2 - download scripts js in the same directory as index.js
3 - download is complete, start script js automatically.
Even if it is possible to solve it with Node.js workarounds (like requireing your puppeteer script from an url etc.) I strongly suggest to use Git with your team to share the latest version of your script. Version control is a must in modern software development, especially if you are working in a team. By learning the 6-7 most basic git commands you can solve almost everything you need for the current use case.
There are many good tutorials how to get started with git, I recommend GitHub's https://try.github.io.
Of course: you need to convince your team to embrace the change, or in better case they are already using it for version control, so it will be familiar to them.
You will need to:
Install Git locally;
Create a new repository on a server where you can store the latest stable versions of all your scripts (if it is not an open source project make sure it is private! GitLab, GitHub and Bitbucket provides/hosts free private repositories that will suit your needs);
Share the HTTPS (or SSH) URL of the repository with your team (e.g.: https://github.com/.../puppeteer-scripts.git) which they can clone;
Make sure your changes are pushed to the remote git repository;
Your team can pull the latest changes to their local computer (it will be their responsiblity to check if there were changes in the scripts, but you can notify them as well - there are automatic notifications if one starts to "watch" a git repository);
Lastly
Git can be frightening at first sight, but it can be learned in a few days and it makes code sharing smooth within your team.
One of Git's tagline describes very well why it will solve your problem:
--everything-is-local
Let's say I have a HTML/JS application, which is on a website and runs without any server-side component (except the web server, of course). So it's basically just a bunch of .html, .css and .js files (and some others, like images or SQLite databases)
Someday, an user comes to me to ask me if I can make an offline version, so they can access the app when they are offline.
My first reaction would be to provide them all the files of the app in a .zip file or something, but this is not really good: it's not "clear" to an average user, and the files and code are apparent (which could be "dangerous" if the user edits or deletes them by accident).
So I was wondering: is there a kind of format that would makes me able to store the files of the app in a packaged file?
The file would be something like a .zip file, but when you click to the file, instead of opening up the archive, it opens the /index.html (or similar) which is inside.
So for the user, it would be similar to open an .exe or a single .html file, but still that's not a native app, as that's still a browser app.
Given that I know about:
Apache Cordova; but most of the time, I just use the browser functions, and I don't have a need to use advanced native functionalities;
UWP and PWA, but I don't know if it's exactly what I want (I imagine it as a mix of website and mobile app, but I'm surely wrong);
Open Web App (a standard from Mozilla), but based on what I've read about it, it seems deprecated and not used anymore. Plus, I don't really look forward to "certify" my app... I just want to package some files.
PWA I don't think is a solution to your problem as you wont be able to redistribute the code as an executable package.
UWP would be too Windows specific and might make you lose the platform independence that you already have since you are using plain HTML and JS, plus from what I understand you would need to distribute the app on Windows Store.
I believe packaging as an Electron app would be the best solution as you can provide executable files that can be executed in almost all platforms.
Electron would be the best solution for you. I had a client that first wanted to run app on php server and eventually they figured out they need it as a desktop app. It was easy to rewrite php stuff to node and package as Electron app. You have access to everything files, system etc. so you can do more if needed.
Another solution would be to just inline everything into a single html file.
Having an AngularJS app of basic structure - components, providers, services.. many separated .js files.. I use a grunt taks to compile them into single .js file eg: application.js?v${build}
To save time, I use IDEA plugin "Live Edit", it reflects all changes in .html real-time to browser.
All connected by JavaScript Debug config via "JetBrains IDE Support" plugin with Chromium web browser. All those work fine.
Now the problem: I cannot live reload changes in angular/JS. After every change I have to manually run grunt task to compile angular to single js and hit F5 in browser. (I know it is not a big deal, but image doing that 1000 in a day :) Any help appreciated!
PS: I can debug the JS, debugger stop correctly on breakpoints set in IDEA IDE.
How about grunt plugins for watching changes and using browser sync for reload? There are also other approaches like using yeoman for creating structures and serving them with grunt automatically.
I created a small web application in c# and wanted to create a installer for the web app and started so, using wix and i come up with the .msi file(installer) with a .wixpdb file.
Now, when i click on the .msi setup file ,installation is getting started and ending up with noting.
steps i followed is,
create web application.
build and publish.
harvest the publish folder and thats creates me a .wxs file.
create a setup project in the same solution of my web app.
add .wxs from step3 to the setup project.
build the setup project it create a .msi(installer) and .wixpdb file.
My Doubt here is that, how can i run the installer that will create a service/web application and installed locally.
Unfortunately WIX harvesting will not create a web application/web site for you automagically, when you harvest a "published" application. It will just produce the code to copy files. In WIX, you have to add this functionality yourself. In comparison with VS installer for example, you've got much more to do, and the rabbit's hole appears to be much deeper.. Take a look here for example:
http://www.codeproject.com/Articles/115036/Creating-WIX-Installer-for-ASP-NET-Web-Application
http://blog.bartdemeyer.be/2013/10/create-an-installer-for-website-with-wix-part-1/
The answer is quite simple, of course we just need to double click the installer, but before that we need to add
<UIRef Id="MyWebUI" /> in FileName.wxs file and define some UI dialogs in the .wxs file, that is more cleary explained here
http://www.codeproject.com/Articles/115036/Creating-WIX-Installer-for-ASP-NET-Web-Application.