Own VPN client on JavaScript. Part 1 - introductory
Greetings, Habr.
Finally, the time has come to write another article that I conceived quite a long time ago, and the need for writing of which I have been particularly keen to since since October 26 of this year I decided to take up again one undeservedly forgotten project.
')
Since I myself do not particularly like to read articles where there are no demos and other visual pieces that you can immediately see, I made sure that in my article all this was available. So right now you can try or just read the code without spending time reading the article: project repository
In this article I want to tell and show how the development of the application on Electron and OpenVPN took place only at the end of 2018.
In the first part, I will make the most complete insight into the topic, so that in the subsequent parts there will be no big blocks of text, but only practical information relating to the development itself.
A little about why and how this project appeared.
Coincidentally, I became acquainted with such a wonderful technology as Electron right before the start ofrepression and Telegram locks in Russia. The senseless and merciless Roskomnadzor and the Bloody Gebnya - who are all these people? Here, on Habré, I saw numerous articles about raising my own VPN and proxy servers against the background of this whole battle for the network. It gave me no peace: the Internet is part of my life , and when the Internet came, I could not stay idle. I had to take part in resistance for free internet .
I could not come to terms with the fact that the messenger beloved by me, whose developers I am deeply grateful to - literally everyone who is involved in the development of this amazing IT product, will not be available.
Therefore, the project appeared JS.VPN-Client . 04.05.2018
Last time, the story of Electron ended up developing one application, so I remained familiar with this technology only a little closer than writing articles. I did not understand and go into the development of desktop applications, and the problem in the hardware aggravated the development, making it unbearable. However, maybe I just didn’t have an adequate look at Electron at that moment. In short, it was not particularly interesting.
In general, I no longer had a deal with Electron and was not even going to have anything to do. However, on October 26, 2018, I remembered one of my long-standing projects, which I periodically launch, recalling with obvious sadness how the program code was randomly organized.
Realizing that the year is coming to an end, and so many good things have not yet been done, I decided to write about the development of this project. However, the problem that periodically led me to obvious sadness simply did not allow me to publish a single line of the current code. It was necessary to rewrite everything or burn it .
After a week or two, I completely rewrote the application, and even came to a very interesting way of internal code organization. Technologies such as Electron andPuppetter have a very specific architecture: in my opinion, having touched Electron for the first time is not easy to present the development of even a small application, despite (not) a lot of training materials. But I’m ready to provide instructions on how to develop Electron applications, albeit inadequately rolled back, but already allowing to create such an application as JS.VPN-Client .
Of course, I’m not going (or going, but very rarely) to systematically develop my projects as described in this article, but since I want to bring the reader up to date, I’ll additionally explain all the points at issue in my opinion. What I leave without explanation should be obvious to a JavaScript developeror should not be completely clear .
For a long time I couldn’t decide for myself how I want to see my application this time in terms of organizing code, and soon even the little that I knew about Electron was completely forgotten.
Starting anew, I decided that the program should be developed by components completely independent of each other , which should have their own, although not a large API , through which they will interact, and in the end everyone will be connected into one big application.
Later I came to one very beautiful and concise way of organizing the code, which I wrote about above. In the course of development, I will tell and show what I mean. This approach seemed to me so convenient that I declare: it can lay claim to a standard in the development of Electron applications.
My VPN client needs configs, but since I am not the server holder in my application, I use only public VPN servers with OpenVPN support. I get them from the API of this site VPN Gate - Public Free VPN
To assert that this is the best way, I will not, because it is not competent in the issue of security. In any case, the structure of the application is flexible enough to remake "by itself" and use the best way to get secure servers.
Part 2 - Development
Finally, the time has come to write another article that I conceived quite a long time ago, and the need for writing of which I have been particularly keen to since since October 26 of this year I decided to take up again one undeservedly forgotten project.
')
Since I myself do not particularly like to read articles where there are no demos and other visual pieces that you can immediately see, I made sure that in my article all this was available. So right now you can try or just read the code without spending time reading the article: project repository
In this article I want to tell and show how the development of the application on Electron and OpenVPN took place only at the end of 2018.
In the first part, I will make the most complete insight into the topic, so that in the subsequent parts there will be no big blocks of text, but only practical information relating to the development itself.
Prehistory
A little about why and how this project appeared.
Coincidentally, I became acquainted with such a wonderful technology as Electron right before the start of
I could not come to terms with the fact that the messenger beloved by me, whose developers I am deeply grateful to - literally everyone who is involved in the development of this amazing IT product, will not be available.
Therefore, the project appeared JS.VPN-Client . 04.05.2018
Last time, the story of Electron ended up developing one application, so I remained familiar with this technology only a little closer than writing articles. I did not understand and go into the development of desktop applications, and the problem in the hardware aggravated the development, making it unbearable. However, maybe I just didn’t have an adequate look at Electron at that moment. In short, it was not particularly interesting.
Post history
In general, I no longer had a deal with Electron and was not even going to have anything to do. However, on October 26, 2018, I remembered one of my long-standing projects, which I periodically launch, recalling with obvious sadness how the program code was randomly organized.
Realizing that the year is coming to an end, and so many good things have not yet been done, I decided to write about the development of this project. However, the problem that periodically led me to obvious sadness simply did not allow me to publish a single line of the current code. It was necessary to rewrite everything or burn it .
After a week or two, I completely rewrote the application, and even came to a very interesting way of internal code organization. Technologies such as Electron and
Development
Of course, I’m not going (or going, but very rarely) to systematically develop my projects as described in this article, but since I want to bring the reader up to date, I’ll additionally explain all the points at issue in my opinion. What I leave without explanation should be obvious to a JavaScript developer
For a long time I couldn’t decide for myself how I want to see my application this time in terms of organizing code, and soon even the little that I knew about Electron was completely forgotten.
Starting anew, I decided that the program should be developed by components completely independent of each other , which should have their own, although not a large API , through which they will interact, and in the end everyone will be connected into one big application.
Later I came to one very beautiful and concise way of organizing the code, which I wrote about above. In the course of development, I will tell and show what I mean. This approach seemed to me so convenient that I declare: it can lay claim to a standard in the development of Electron applications.
VPN and Security
My VPN client needs configs, but since I am not the server holder in my application, I use only public VPN servers with OpenVPN support. I get them from the API of this site VPN Gate - Public Free VPN
To assert that this is the best way, I will not, because it is not competent in the issue of security. In any case, the structure of the application is flexible enough to remake "by itself" and use the best way to get secure servers.
Part 2 - Development
Navigation
Source: https://habr.com/ru/post/427777/
All Articles