DEV Community

Cover image for Create an Electron desktop app version of jwt.io
Mạnh Đạt
Mạnh Đạt

Posted on

Create an Electron desktop app version of jwt.io

So last night, for some reasons I couldn't access jwt.io to decode a token (the website was loading very slowly) so I thought why didn't I create a desktop app so I don't have to suffer from this wait in the future?

Well, after a few hours of work, I got exactly (nearly) what I wanted:
image

Let me show you how I did it.

Step 1: Search for electron vue

I didn't work with electron much but I knew that it's based on Javascript so it's a good chance that somebody has already created a project that have electron bundle with Vue. My guess was right, I found this awsome repo on github:

https://github.com/SimulatedGREG/electron-vue

All credit to the author.
I cloned the repo and opened it in VSCode.

Step 2: Find a jwt decoder

Again, with google, I got this repo from Auth0 that help me decode jwt to get header and body:

https://github.com/auth0/jwt-decode
Again, thanks the developers.

So in my project, I ran

npm install jwt-decode
Enter fullscreen mode Exit fullscreen mode

And I got the first working version.

Step3: Install codemirror for syntax highlighting

I used this repo:
https://www.npmjs.com/package/vue-codemirror

Thanks the developer :)

But only get basic function of a code editor functioning. I couldn't get syntax highlighting work yet (Have no idea why, hopefully you guys can give a pointer).

So, with the help of all the awesome developers of the repos I cloned, I got a working version of a jwt decode in just a few hours.

To be honest, the most time I spent was on trying different syntax highlighting libs and got no results :D

Conclusion

Building desktop app is fun and easy, especially for small projects like mine. You should give it a try.

Thanks for reading

Discussion (1)

Collapse
aheisleycook profile image
privatecloudev

That k y0u