Dear SAPLearners, in this blog post you will learn how to deploy Vue.js applications in SAP BTP.
Prerequisites
Before you start, make sure you have
- Node.js installed locally on your machine.
- Basic understanding of Vue.js
For the demo purpose, i have created a sample Vue.js application using Vue CLI 3. Please find the steps below.
Install Vue CLI 3
1 Open the terminal and run the below command to install Vue CLI
npm install i -g @vue/cli
2. It will take some time to install the Vue CLI. After successfully complete you will see below screen with all packages installed.
![Vue JS Installation Step1](https://saplearners.com/wp-content/uploads/2019/09/Vue-JS-Installation-Step1.jpg)
3. To confirm the installation, run following command in the terminal:
vue -V
4. It should display the Vue.js version installed.
5. You can also confirm the installation, by typing “vue” in the terminal, it will display all options like below
![Vue JS Installation Step2](https://saplearners.com/wp-content/uploads/2019/09/Vue-JS-Installation-Step2.jpg)
Creating a Vue.js project
6. To create a new project, run the following command in the terminal.
vue create hello-world
“hello-world” is the name of the application
7. Choose default preset and hit enter key.
![Vue JS Installation Step3 1](https://saplearners.com/wp-content/uploads/2019/09/Vue-JS-Installation-Step3-1.jpg)
8. It may take some time to create the project. After successfully creation you will see below screen.
![Create Vue JS Application Step1 1](https://saplearners.com/wp-content/uploads/2019/09/Create-Vue-JS-Application-Step1-1.jpg)
9. Run following commands in the terminal, to start the server
cd hello-world
npm run serve
![Create Vue JS Application Step2](https://saplearners.com/wp-content/uploads/2019/09/Create-Vue-JS-Application-Step2.jpg)
10. Now the Vue.js application is running at http://localhost:8080/.
![Create Vue JS Application Step3](https://saplearners.com/wp-content/uploads/2019/09/Create-Vue-JS-Application-Step3-1024x593.jpg)
11. Navigate back to the terminal and stop the server by hitting “Cntrl+C“.
12. To build the deployment ready files, run the following command in the project folder.
npm run build
![Create Vue JS Application Step4](https://saplearners.com/wp-content/uploads/2019/09/Create-Vue-JS-Application-Step4.jpg)
13. After build complete, all necessary files for deployment on SAP Cloud Platform are available under dist directory.
![Create Vue JS Application Step5](https://saplearners.com/wp-content/uploads/2019/09/Create-Vue-JS-Application-Step5.jpg)
14. Now zip the dist directory.
Deploying to SAP Cloud Platform
15. Open SAP Web IDE Full Stack and create a new project by choosing SAPUI5 Application as a template.
16. Now remove all the files under your project, as these will not be needed for Vue.js application.
![Deploy VueJS application in SAP Cloud Platform Step1](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step1.jpg)
17. Right click on the project and choose Import.
![Deploy VueJS application in SAP Cloud Platform Step2](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step2.jpg)
18. Choose the zip file created above in Step-14 which is deployment ready Vue.js application.
![Deploy VueJS application in SAP Cloud Platform Step3](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step3-1024x575.jpg)
19. After import, your project structure will look like below.
![Deploy VueJS application in SAP Cloud Platform Step4](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step4.jpg)
20. Right click on the project and deploy the project to SAP Cloud Platform.
![Deploy VueJS application in SAP Cloud Platform Step5](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step5.jpg)
21. Choose Deploy.
![Deploy VueJS application in SAP Cloud Platform Step6](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step6.jpg)
22. The Vue.js application is successfully deployed to SAP Cloud Platform.
![Deploy VueJS application in SAP Cloud Platform Step7](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step7-1024x493.jpg)
23. Click on the project name, and get the Application URL.
![Deploy VueJS application in SAP Cloud Platform Step8](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step8-1024x493.jpg)
24. Run the application URL in the browser. Hurrah!! we have Vue.js application running in SAP Cloud Platform.
![Deploy VueJS application in SAP Cloud Platform Step9](https://saplearners.com/wp-content/uploads/2019/09/Deploy-VueJS-application-in-SAP-Cloud-Platform-Step9-1024x596.jpg)
Congrats!! you have successfully learned to deploy Vue.js applications on SAP Cloud Platform.
Please feel free to comment and let us know your feedback. Subscribe for more updates.
if you liked it, please share it! Thanks!