Preface
ThingsBoard is currently the most popular open source IoT platform on Github (12.8k Star), which can realize the rapid development, management and expansion of IoT projects. It is the best choice for IoT platforms for small, medium and micro enterprises.
This article introduces the installation and deployment of ThingsBoard front-end project in Windows environment and how to configure the background service startup.
Installation and deployment
First we need to prepare the required projects and environment.
Open source projects
I am using the newer version 3.4.1 of the open source project ThingsBoard: https://github.com/thingsboard/thingsboard, directly download the code and Down ZIP.
local environment
Node.js, yarn, and Git environments need to be installed locally. Git direct official website: https://gitforwindows.org/, just download and install it, mainly because the versions of Node.js and yarn have requirements that you need to pay attention to.
Looking at the TB project file thingsboard\ui-ngx\pom.xmlwe can see that a specific version has been specified.
<configuration>
<nodeVersion>v16.15.1</nodeVersion>
<yarnVersion>v1.22.17</yarnVersion>
</configuration>
So we install the specified Node.js and yarn versions:
For Node.js installation access https://nodejs.org/dist/v16.15.1/, it is recommended to download the one-click installation node-v16.15.1-x64.msifile for installation.
After installing Node.js, open the cmd window and globally install the specified version of yarn command: npm install -g [email protected].
Passed node -v, yarn -vconfirming that the installation is successful and the version is correct.
Install dependencies
Unzip the ThingsBoard project, find the front-end project directory ui-ngx, and execute the installation dependency command in this directory: yarn installor enter it directly yarn.
Report an error if prompted OpenSSL SSL_read: Connection was reset, errno 10054.
Then you need to modify the Git authentication configuration and execute the installation dependency command again.
git config --global http.sslVerify "false"
git config --global https.sslVerify "false"
If the installation fails, it is most likely due to network problems. You know the reason. It requires multiple attempts. Yes, I was stuck here for a long time. It was due to the evil network... it took me a long time to succeed.
Why not use cnpmthe command to install? In fact, I have tried it, and other errors will be reported. Moreover, the official document mentions the use of yarn, so we can just use the yarn method.
Compile and build
After installing the dependencies, we continue to execute the compilation command: yarn start.
We will find that although the compilation is successful, an error will be reported. This is because our background service has not been started. We need to proxy.conf.jsconfigure our background service path in the file. Generally, it will be built by the background staff. Just use the built path directly and execute the compilation command again.
const forwardUrl = "http://localhost:8080";
const wsForwardUrl = "ws://localhost:8080";
Of course, you can build it yourself, but if it doesn’t make much sense as a front-end person, you may not be able to do it well after a day of work.
After compilation, the browser will automatically open the login page http://localhost:4200/.
After logging in, we can see the true face of Lushan on the TB homepage.
Follow-up
Why do I suddenly write articles related to ThingsBoard? Haha, it’s a bit sudden.
Because of a job change, I am now working on the Internet of Things, so I came into contact with the open source project ThingsBoard. The front end uses the Angular12 version. This is an excellent open source project and you can learn a lot, so I want to learn from it. The process is recorded and shared bit by bit as a series. Well, that's it.
Okay, the above is all the installation and startup of ThingsBoard front-end project. I hope it will be helpful to you. If you have any questions, please contact me through my blog https://echeverra.cn or WeChat public account echeverra .
Have you learned to "waste"?
(over)
The article was first published on my blog https://echeverra.cn/tb1 . It is an original article. Please indicate the source when reprinting.
Welcome to follow my WeChat public account echeverra and learn and progress together! Resources and benefits will be given away from time to time!