I want to create an offline "Desktop Application/Website" with Electron. The UI/backend is essentially a "React Application".
What I'm trying to achieve:
Have a React application, which I run npm start would launch a server that can be accessed with a browser on my system (and within the local network)
Create a downloadable cross platform "single file" (.app in dmg for Mac, .exe for Windows) that users can download, and run on their system (to achieve the above); for this I thought Electron would do
The above file should work without the user being required to install dependencies locally (e.g. Node)
What I have done
After creating the react app, and installing electron, I edited the electronjs entry file to become the below:
win.loadURL(url.format({
pathname: 'localhost:3000', //path.join(__dirname, 'index.html'),
protocol: 'http:', //'file:',
slashes: true
}))
Then, I used "concurrently" and "wait on" modules to ensure that when I run npm start, the react server starts first before electron launches. It works (for development)!
But when I package the app (for production, producing a Mac executable - MyProject.app), and run it, the server never starts, so electron shows a blank page for localhost:3000
How do I achieve this?
Try this instead -
win.loadURL("http://localhost:3000");
Related
I have a basic electron app (wrapping a Reactjs app) - everything works fine both in dev and when packaged.
Now I want to introduce a dependency, another basic nodejs express file server. I have written this file server and it works.
This file server is a nodejs module (so that it can be managed seperately). It is then required and spawn within the electron app as a seperate "child process".
Problem:
When I run "yarn start:dev", everything works perfectly but once I package this app(yarn pack:dev), everything works EXCEPT the file server(child process).
I believe this has something to do with the path and the fact that electron will bundle the entire app as "asar". I have tried different approach and exhausted of ideas.
I think the "asar" file path is not accessible or something. I have also disabled the asar in electron-builder.yml but still having same issue.
Please I will really appreciate any help. Thanks.
I'm new to vue and kind of confuse here.
I'm using vue-cli to build a vue app, I understand I can run a development server with npm run serve which is referenced as a script in my package.json for vue-cli-service serve
But my app need some data coming from a local node.js server. I cannot request this server from development mode because it's running on a different server.
To make my app work I'm obligated to build for production with
npm run build
Then to ask my node server to render by default the produced index.html file.
How could I combine development mode and my node server?
What would be the best way to make this work?
Thanks a lot
I stumbled across this, and found the answer buried at the bottom of the comments list, so I thought I'd highlight it.
This answer is taken from #Frank Provost comment, which really should be the accepted answer. As mentioned in his link https://cli.vuejs.org/config/#devserver-proxy all you need to do is create/edit vue.config.js file in your (client) project root to include this:
module.exports = {
devServer: {
proxy: 'http://localhost:3000' // enter dev server url here
}
}
Then start your dev server as usual from your server project:
[server-root]$ npm run dev
And run your client project from vue-cli project
[client-root]$ npm run serve
Then when you visit the client url (usually localhost:8080) all api requests will be forwarded to your dev server. All hot module replacement still works on both client and server.
I'm using .net core and ServiceStack Angular SPA project template, and I want to enable hot reloading.
From what I saw on site here I only need to add:
Plugins.Add(new TemplatePagesFeature());
<i hidden>{{ '/js/hot-loader.js' | ifDebugIncludeScript }}</i>
And:
SetConfig(new HostConfig
{
DebugMode = true
});
And this works for HTML files, however, nothing happens when I modify TS files (in console or browser), do I need to configure something else in order to allow that?
EDIT
I thought that this will also start something like npm run dev (to run --aot) but does not look like that, so my temporary solution until I find more elegant way is to use something like this and shell extension:
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.Shell("npm run dev");
}
The Development workflow for each template can be found on the project page for each template. E.g. the Angular SPA Project Template requires that you run either npm run dev or npm run serve which starts a watched client build:
Development workflow
Our recommendation during development is to run the dev npm script or Gulp task and leave it running in the background:
$ npm run dev
This initially generates a full development build of your Web App then stays running in the background to process files as they’re changed. This enables the normal dev workflow of running your ASP.NET Web App, saving changes locally which are then reloaded using ServiceStack’s built-in hot reloading. Alternatively hitting F5 will refresh the page and view the latest changes.
Each change updates the output dev resources so even if you stop the dev task your Web App remains in a working state that’s viewable when running the ASP.NET Web App.
Live reload with built-in Dev Server
The alternative dev workflow is to run the serve npm or gulp script to run Create React App's built-in Webpack dev server:
$ npm run serve
This launches the Webpack dev server listening at http://localhost:4200/ and configured to proxy all non-Webpack HTTP requests to the ASP.NET Web App where it handles all Server API requests. The benefit of viewing your App through the Webpack dev server is its built-in Live Reload feature where it will automatically reload the page as resources are updated.
Watched .NET Core builds
.NET Core projects can also benefit from Live Coding using dotnet watch which performs a “watched build” where it automatically stops, recompiles and restarts your .NET Core App when it detects source file changes. You can start a watched build from the command-line with:
$ dotnet watch run
***Updated for further clarification:
Thanks much for taking the time to reply. Running 'npm run build' (I'm using the Vuetify/Webpack template) created an index.html and a directory named 'static' with the respective html, css, and js (in 'dist' directory). The question is - how can I run this in production using node or pm2 (for example, 'pm2 start myapp.js')?
Doing some further research and testing, the 'npm run build' built as static. It was my lack of understanding how vue-cli was to build for production (via WebPack) (vue-cli builds static meant to be served via web server). Doing further testing, I can load and bring up my app on a couple local Linux servers (the static content running on one servers, while MongoDB and API running on another server (API running with pm2)). Also, I was able to bring it up on AWS S3 (as static). I think I have my answer now. Thanks much for your time.
***From Original Post:
How to run the following node app in production? Webpack build produced an index.html (I assume as it's using html-webpack-plugin). I can view the site if I run under a web server (e.g., nginx), but I want to run my final app using pm2, or running node process.
I am using the Vuetify WebPack template (I'm using Vue.js), when I run the npm run build for production (in package.json: “build”: “node build/build.js”) the output is as follows:
$ ls
index.html static/
and
$ ls static/js/
app.f7301c212bc5fefd6563.js manifest.2ae2e69a05c33dfc65f8.js vendor.1aae36aa0dc798d4d36d.js
app.f7301c212bc5fefd6563.js.map manifest.2ae2e69a05c33dfc65f8.js.map vendor.1aae36aa0dc798d4d36d.js.map
So, how do I run this via node (npm start) or pm2 (pm2 start) (can't use index.html or static/js files).
When I run the webpack build I was expecting a .js output (for example ‘build.js’) to run via node or pm2 (npm start that runs ‘node build.js’ or pm2 start build.js). I suppose this will work for serverless, but was looking to run via pm2 (with nginx as proxy) as the app will have other factors (e.g., MongoDB) that won’t allow running in serverless (e.g., AWS Lambda).
Would this be a matter of just re-configuring WebPack to output to a .js file (for example, build.js), or will the static files (served via a webserver, nginx/Apache/http-server) allow for the same functionality? That is, will there be any factors that would limit my app by running as static verses via ‘node build.js’ or ‘pm2 start build.js’, (for example, will my API connects to the back-end still work (back-end being node/JS))?
I am trying to assist in setting up AppDynamics with an Angular 2 app that is hosted in IIS. The app is already up and running. There is a part I am having trouble on, the instructions for that part say say:
1) From the root directory of your Node.js application, run this command:
npm install appdynamics#4.3.5
For every Node.js application you are instrumenting, insert the following call in the application source code at the first line of the main module (such as the server.js file), before any other require statements:
require("appdynamics").profile({
controllerHostName: '<controller host name>',
controllerPort: <controller port number>,
controllerSslEnabled: false, // Set to true if controllerPort is SSL
accountName: '<AppDynamics_account_name>',
accountAccessKey: '<AppDynamics_account_key>',
applicationName: 'your_app_name',
tierName: 'choose_a_tier_name',
nodeName: 'choose_a_node_name'
});
2) Restart you application
I did step 1 locally in the console, but I don't know what to do for step 2. If I add that script to the page I get "The Reference error: require is not defined".
I learned that that function is not meant to run on the browser. It's meant to be run server-side, but I do not see node js or any server.js files on our dev web server.
Does anyone have any suggestions on where to put that snippet. Will it even work with the current setup?
It turns out the code I was given was completely wrong for angular 2 implementation. The code they gave me is for running on the web server's side with node js. Since angular 2 is an SPA that runs on the browser, it would never work.
I did some research and found this example application that I added a few tweaks to: https://github.com/derrekyoung/appd-sampleapp-angular2