How to validate form and redirect to a specific path in Electron
Hello I am fairly new to electron but have been developing web apps using Express. I am building a desktop app and I have an index.html page with a simple login form. I understand in express I can do validation and redirect to the correct router depending on the result of the validation. How can I have the same functionality in Electron? Another thing is I don't want to create another browser window, I just want the paths to redirect and render html pages in the same browser window. Thanks
javascript node.js electron
add a comment |
Hello I am fairly new to electron but have been developing web apps using Express. I am building a desktop app and I have an index.html page with a simple login form. I understand in express I can do validation and redirect to the correct router depending on the result of the validation. How can I have the same functionality in Electron? Another thing is I don't want to create another browser window, I just want the paths to redirect and render html pages in the same browser window. Thanks
javascript node.js electron
add a comment |
Hello I am fairly new to electron but have been developing web apps using Express. I am building a desktop app and I have an index.html page with a simple login form. I understand in express I can do validation and redirect to the correct router depending on the result of the validation. How can I have the same functionality in Electron? Another thing is I don't want to create another browser window, I just want the paths to redirect and render html pages in the same browser window. Thanks
javascript node.js electron
Hello I am fairly new to electron but have been developing web apps using Express. I am building a desktop app and I have an index.html page with a simple login form. I understand in express I can do validation and redirect to the correct router depending on the result of the validation. How can I have the same functionality in Electron? Another thing is I don't want to create another browser window, I just want the paths to redirect and render html pages in the same browser window. Thanks
javascript node.js electron
javascript node.js electron
asked Nov 13 '18 at 10:16
ClearbryanClearbryan
134
134
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Electron is a very flexible combination of Node and Chromium, with some added secret sauce of its own API.
You have a lot of options available to you.
One of the biggest points to realize with Electron is that it's possible to develop offline apps that don't require an online back end like you're probably used to doing. This means you can choose to run Express inside of Electron, handling routing and doing its usual job. This would mean Express is running on the PC or Mac of your end user, instead of running on a hosted server somewhere on the Internet.
As an Express developer, this might be a good way for you to initially get things done quickly. You can install Express into your Electron app (npm install express --save).
This way you can run express within Electron, allowing you to continue to work in many of the same ways as what you're already used to. It won't be exactly the same. Like you already see, you'll need to learn to manage browser windows and other Electron concepts along the way. There are also some limitations and workarounds, since Express is normally running on the hosting provider back end server.
There are pointers for how to get started here: NodeJS Electron with express or you can Google for "building apps with Electron and Express".
You'll need to start wrapping your head around Electron specific concepts though so plan to do some reading or courses on Electron.
There's a really great list of Electron related learning and other resources here:
https://github.com/sindresorhus/awesome-electron#videos
Update: I realised I didn't address some of your question specifically so,
To validate the form, you can choose to do it the way you are used to (probably by posting the form to Express and having some logic run), or maybe using a script running on the actual page.
To redirect to a specific path in Electron, you have many options but Express routing could still work for you, or you can load a specific file using loadFile on the Electron BrowserWindow webContents API object (you'll probably need to do some reading on Main and Renderer to nicely understand this).
Enjoy developing with Electron and good luck!
The webContents loadFile documentation is here: github.com/electron/electron/blob/master/docs/api/…
– GrahamMc
Nov 13 '18 at 19:02
One of the limitations or "quirks" of running Express locally is that you can run into interesting cross site scripting issues if you still need to call a back end API running on the Internet - so you may also want to consider that when deciding how everything should plug together
– GrahamMc
Nov 13 '18 at 19:03
add a comment |
- It's more or less communication between ipcMain and ipcRenderer.
As you have understanding on web development, you can regard ipcMain as backend(express) and ipcRenderer as client(browser).
However, the difference is you communicate between ipcMain and ipcRenderer by emitting events instead of network things like AJAX calls as you do with backend/frontend.
To validate data on express side, emit event from ipcRenderer so that ipcMain listens it and do validation. After that emit event back to ipcRenderer and once the ipcRenderer receives the validation data, handle it.
- Easiest way to handle redirect/render html pages in same browser window is to develop single page app within your electron by using html5 routing. Here is good boilerplate to kick off if you are familiar with react and react-router. https://github.com/electron-react-boilerplate/electron-react-boilerplate
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278681%2fhow-to-validate-form-and-redirect-to-a-specific-path-in-electron%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Electron is a very flexible combination of Node and Chromium, with some added secret sauce of its own API.
You have a lot of options available to you.
One of the biggest points to realize with Electron is that it's possible to develop offline apps that don't require an online back end like you're probably used to doing. This means you can choose to run Express inside of Electron, handling routing and doing its usual job. This would mean Express is running on the PC or Mac of your end user, instead of running on a hosted server somewhere on the Internet.
As an Express developer, this might be a good way for you to initially get things done quickly. You can install Express into your Electron app (npm install express --save).
This way you can run express within Electron, allowing you to continue to work in many of the same ways as what you're already used to. It won't be exactly the same. Like you already see, you'll need to learn to manage browser windows and other Electron concepts along the way. There are also some limitations and workarounds, since Express is normally running on the hosting provider back end server.
There are pointers for how to get started here: NodeJS Electron with express or you can Google for "building apps with Electron and Express".
You'll need to start wrapping your head around Electron specific concepts though so plan to do some reading or courses on Electron.
There's a really great list of Electron related learning and other resources here:
https://github.com/sindresorhus/awesome-electron#videos
Update: I realised I didn't address some of your question specifically so,
To validate the form, you can choose to do it the way you are used to (probably by posting the form to Express and having some logic run), or maybe using a script running on the actual page.
To redirect to a specific path in Electron, you have many options but Express routing could still work for you, or you can load a specific file using loadFile on the Electron BrowserWindow webContents API object (you'll probably need to do some reading on Main and Renderer to nicely understand this).
Enjoy developing with Electron and good luck!
The webContents loadFile documentation is here: github.com/electron/electron/blob/master/docs/api/…
– GrahamMc
Nov 13 '18 at 19:02
One of the limitations or "quirks" of running Express locally is that you can run into interesting cross site scripting issues if you still need to call a back end API running on the Internet - so you may also want to consider that when deciding how everything should plug together
– GrahamMc
Nov 13 '18 at 19:03
add a comment |
Electron is a very flexible combination of Node and Chromium, with some added secret sauce of its own API.
You have a lot of options available to you.
One of the biggest points to realize with Electron is that it's possible to develop offline apps that don't require an online back end like you're probably used to doing. This means you can choose to run Express inside of Electron, handling routing and doing its usual job. This would mean Express is running on the PC or Mac of your end user, instead of running on a hosted server somewhere on the Internet.
As an Express developer, this might be a good way for you to initially get things done quickly. You can install Express into your Electron app (npm install express --save).
This way you can run express within Electron, allowing you to continue to work in many of the same ways as what you're already used to. It won't be exactly the same. Like you already see, you'll need to learn to manage browser windows and other Electron concepts along the way. There are also some limitations and workarounds, since Express is normally running on the hosting provider back end server.
There are pointers for how to get started here: NodeJS Electron with express or you can Google for "building apps with Electron and Express".
You'll need to start wrapping your head around Electron specific concepts though so plan to do some reading or courses on Electron.
There's a really great list of Electron related learning and other resources here:
https://github.com/sindresorhus/awesome-electron#videos
Update: I realised I didn't address some of your question specifically so,
To validate the form, you can choose to do it the way you are used to (probably by posting the form to Express and having some logic run), or maybe using a script running on the actual page.
To redirect to a specific path in Electron, you have many options but Express routing could still work for you, or you can load a specific file using loadFile on the Electron BrowserWindow webContents API object (you'll probably need to do some reading on Main and Renderer to nicely understand this).
Enjoy developing with Electron and good luck!
The webContents loadFile documentation is here: github.com/electron/electron/blob/master/docs/api/…
– GrahamMc
Nov 13 '18 at 19:02
One of the limitations or "quirks" of running Express locally is that you can run into interesting cross site scripting issues if you still need to call a back end API running on the Internet - so you may also want to consider that when deciding how everything should plug together
– GrahamMc
Nov 13 '18 at 19:03
add a comment |
Electron is a very flexible combination of Node and Chromium, with some added secret sauce of its own API.
You have a lot of options available to you.
One of the biggest points to realize with Electron is that it's possible to develop offline apps that don't require an online back end like you're probably used to doing. This means you can choose to run Express inside of Electron, handling routing and doing its usual job. This would mean Express is running on the PC or Mac of your end user, instead of running on a hosted server somewhere on the Internet.
As an Express developer, this might be a good way for you to initially get things done quickly. You can install Express into your Electron app (npm install express --save).
This way you can run express within Electron, allowing you to continue to work in many of the same ways as what you're already used to. It won't be exactly the same. Like you already see, you'll need to learn to manage browser windows and other Electron concepts along the way. There are also some limitations and workarounds, since Express is normally running on the hosting provider back end server.
There are pointers for how to get started here: NodeJS Electron with express or you can Google for "building apps with Electron and Express".
You'll need to start wrapping your head around Electron specific concepts though so plan to do some reading or courses on Electron.
There's a really great list of Electron related learning and other resources here:
https://github.com/sindresorhus/awesome-electron#videos
Update: I realised I didn't address some of your question specifically so,
To validate the form, you can choose to do it the way you are used to (probably by posting the form to Express and having some logic run), or maybe using a script running on the actual page.
To redirect to a specific path in Electron, you have many options but Express routing could still work for you, or you can load a specific file using loadFile on the Electron BrowserWindow webContents API object (you'll probably need to do some reading on Main and Renderer to nicely understand this).
Enjoy developing with Electron and good luck!
Electron is a very flexible combination of Node and Chromium, with some added secret sauce of its own API.
You have a lot of options available to you.
One of the biggest points to realize with Electron is that it's possible to develop offline apps that don't require an online back end like you're probably used to doing. This means you can choose to run Express inside of Electron, handling routing and doing its usual job. This would mean Express is running on the PC or Mac of your end user, instead of running on a hosted server somewhere on the Internet.
As an Express developer, this might be a good way for you to initially get things done quickly. You can install Express into your Electron app (npm install express --save).
This way you can run express within Electron, allowing you to continue to work in many of the same ways as what you're already used to. It won't be exactly the same. Like you already see, you'll need to learn to manage browser windows and other Electron concepts along the way. There are also some limitations and workarounds, since Express is normally running on the hosting provider back end server.
There are pointers for how to get started here: NodeJS Electron with express or you can Google for "building apps with Electron and Express".
You'll need to start wrapping your head around Electron specific concepts though so plan to do some reading or courses on Electron.
There's a really great list of Electron related learning and other resources here:
https://github.com/sindresorhus/awesome-electron#videos
Update: I realised I didn't address some of your question specifically so,
To validate the form, you can choose to do it the way you are used to (probably by posting the form to Express and having some logic run), or maybe using a script running on the actual page.
To redirect to a specific path in Electron, you have many options but Express routing could still work for you, or you can load a specific file using loadFile on the Electron BrowserWindow webContents API object (you'll probably need to do some reading on Main and Renderer to nicely understand this).
Enjoy developing with Electron and good luck!
edited Nov 13 '18 at 18:59
answered Nov 13 '18 at 18:54
GrahamMcGrahamMc
1,56411425
1,56411425
The webContents loadFile documentation is here: github.com/electron/electron/blob/master/docs/api/…
– GrahamMc
Nov 13 '18 at 19:02
One of the limitations or "quirks" of running Express locally is that you can run into interesting cross site scripting issues if you still need to call a back end API running on the Internet - so you may also want to consider that when deciding how everything should plug together
– GrahamMc
Nov 13 '18 at 19:03
add a comment |
The webContents loadFile documentation is here: github.com/electron/electron/blob/master/docs/api/…
– GrahamMc
Nov 13 '18 at 19:02
One of the limitations or "quirks" of running Express locally is that you can run into interesting cross site scripting issues if you still need to call a back end API running on the Internet - so you may also want to consider that when deciding how everything should plug together
– GrahamMc
Nov 13 '18 at 19:03
The webContents loadFile documentation is here: github.com/electron/electron/blob/master/docs/api/…
– GrahamMc
Nov 13 '18 at 19:02
The webContents loadFile documentation is here: github.com/electron/electron/blob/master/docs/api/…
– GrahamMc
Nov 13 '18 at 19:02
One of the limitations or "quirks" of running Express locally is that you can run into interesting cross site scripting issues if you still need to call a back end API running on the Internet - so you may also want to consider that when deciding how everything should plug together
– GrahamMc
Nov 13 '18 at 19:03
One of the limitations or "quirks" of running Express locally is that you can run into interesting cross site scripting issues if you still need to call a back end API running on the Internet - so you may also want to consider that when deciding how everything should plug together
– GrahamMc
Nov 13 '18 at 19:03
add a comment |
- It's more or less communication between ipcMain and ipcRenderer.
As you have understanding on web development, you can regard ipcMain as backend(express) and ipcRenderer as client(browser).
However, the difference is you communicate between ipcMain and ipcRenderer by emitting events instead of network things like AJAX calls as you do with backend/frontend.
To validate data on express side, emit event from ipcRenderer so that ipcMain listens it and do validation. After that emit event back to ipcRenderer and once the ipcRenderer receives the validation data, handle it.
- Easiest way to handle redirect/render html pages in same browser window is to develop single page app within your electron by using html5 routing. Here is good boilerplate to kick off if you are familiar with react and react-router. https://github.com/electron-react-boilerplate/electron-react-boilerplate
add a comment |
- It's more or less communication between ipcMain and ipcRenderer.
As you have understanding on web development, you can regard ipcMain as backend(express) and ipcRenderer as client(browser).
However, the difference is you communicate between ipcMain and ipcRenderer by emitting events instead of network things like AJAX calls as you do with backend/frontend.
To validate data on express side, emit event from ipcRenderer so that ipcMain listens it and do validation. After that emit event back to ipcRenderer and once the ipcRenderer receives the validation data, handle it.
- Easiest way to handle redirect/render html pages in same browser window is to develop single page app within your electron by using html5 routing. Here is good boilerplate to kick off if you are familiar with react and react-router. https://github.com/electron-react-boilerplate/electron-react-boilerplate
add a comment |
- It's more or less communication between ipcMain and ipcRenderer.
As you have understanding on web development, you can regard ipcMain as backend(express) and ipcRenderer as client(browser).
However, the difference is you communicate between ipcMain and ipcRenderer by emitting events instead of network things like AJAX calls as you do with backend/frontend.
To validate data on express side, emit event from ipcRenderer so that ipcMain listens it and do validation. After that emit event back to ipcRenderer and once the ipcRenderer receives the validation data, handle it.
- Easiest way to handle redirect/render html pages in same browser window is to develop single page app within your electron by using html5 routing. Here is good boilerplate to kick off if you are familiar with react and react-router. https://github.com/electron-react-boilerplate/electron-react-boilerplate
- It's more or less communication between ipcMain and ipcRenderer.
As you have understanding on web development, you can regard ipcMain as backend(express) and ipcRenderer as client(browser).
However, the difference is you communicate between ipcMain and ipcRenderer by emitting events instead of network things like AJAX calls as you do with backend/frontend.
To validate data on express side, emit event from ipcRenderer so that ipcMain listens it and do validation. After that emit event back to ipcRenderer and once the ipcRenderer receives the validation data, handle it.
- Easiest way to handle redirect/render html pages in same browser window is to develop single page app within your electron by using html5 routing. Here is good boilerplate to kick off if you are familiar with react and react-router. https://github.com/electron-react-boilerplate/electron-react-boilerplate
answered Nov 13 '18 at 10:30
emilemil
1,94331424
1,94331424
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53278681%2fhow-to-validate-form-and-redirect-to-a-specific-path-in-electron%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown