Electron Tutorial: Building Modern Desktop Apps with Vue.js

Blog Discussions
1

Learn how to leverage Vue.js and Electron to build and secure modern desktop applications.

Read on :gem:

Brought to you by #GuestAuth0r Fikayo Adepoju :man_technologist:t6:

Electron Tutorial: Building Modern Desktop Apps with Vue.js
Electron Tutorial: Building Modern Desktop Apps with Vue.js1176×1056 125 KB

4 Likes
2

Let us know if you have any questions and we’ll make sure to answer them or relay them to the article author!

3

Do I need .env? How do I release the application? Will .env be visible?`

4

Hey there @patarapolw!

I just pinged the article author so he should look at your question once he’s online!

5

Thanks for calling my attention to this @konrad.sopala

6

Hi @patarapolw. If you’re are distributing your app freely on Github, you will need you ignore your .env file in .gitignore and add iinstructions to your Readme for others to setup the .env file.
However, if you’re distributing it to end users to use on their OS platforms, your .env file will not be visible as your app will be distributed as installables on their respective platforms (Windows, OSX, etc). To learn more about distributing Electron apps you can visit Application Packaging | Electron

1 Like
7

Thanks for sharing that knowledge here @coderonfleek!

1 Like
8

I can’t find the Todos database backend code.

9

Let me ping the article author about that!

10

The ToDos component code is incomplete as it doesn’t map the todo.title.

Instead of:

<li v-for="todo in todos" :key="todo.id"></li>

It should be:

<li v-for="todo in todos" :key="todo.id">{{ todo.title }}</li>
12

Hi…I’ new in this community, I have a question, I have followed exactly as the tutorial Electron Tutorial: Building Modern Desktop Apps with Vue.js But I get a never ending error in the electron console,
Not allowed to load local resource: file:///callback?code=UHPe1fzBHXU07VCS

I have set Allowed CallbackURLs as file:///callback but I still get that error. I’m not sure if the error related to this. Do I need to put file:///callback to the Allowed Web Origins and Allowed Origins (CORS) too?

13

Hey there!

I’m sure @kapehe will cover that once she’s online!

14

Hi,
I have the following folder structure:

to-do-desktop:
|
|-.electron-vue
|-build
|-dist
|-node_modules
|-src → Here is the sourcecode and the index.ejs
|-static → Here are the images and index.css
|-.babelrc
|-.env
|-.eslintignore
|-.gitignore
|-.travis.yml
|-appveyor.yml
|-package
|-package-lock
|-README.md
|-vue.config

My question is now, where do I have to put the images, the index.css and the fonts.
When I run the following command, everything works fine.
npm run dev
But when I build it with this command, these files couldnt be found.
npm run build

What path should I use in my .vue-Files. The path in index.ejs is as follows:
“static/index.css”

Should I change something in the config-files?

Thank you for your help.
Philipp Ziegler

15

I know my mistake. I installed the Vue i18n-Package and the images
werent shown when I build the application. My question is now,
what Language package is supported to use with this framework?
These are the websites which I tried:

and

1 Like
16

Just pinged the article author to have a look at it for you!

1 Like
17

I solved it.
I have set the router mode to history. This causes the application not to load the static images.

2 Likes
18

Thanks a lot for sharing with the rest of community!

19

Hi @konrad.sopala,

I just tried all the steps in this tutorial with electron 8.2.3. After I login to auth0, I just see a blank page. There are no errors or messages in the console. Could you please check if I should be doing any additional steps for electron 8.2.3?

Thanks,
Siva

1 Like
20

@joanne hey, did you get an answer to your problem? I’m getting the same issue.

Not allowed to load local resource: file:///callback?code=XXXX

1 Like
21

Hello, Siva. Welcome to our Auth0 Community :slight_smile: Thank you for reading the blog post. As of now, this guidance only works with Electron 6. There were some changes made to Electron 7+ that prevent Auth0 from integrating correctly when following our current guidance. We are in the process of revising our guidance for Electron to support 7+ but also to be more resilient to change.

Please stay tuned. As soon as new guidance is up, I’ll be updating our different Electron-related channels with links to the new resources. I appreciate your time and understanding on this :pray:

1 Like