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.
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
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.
8. It may take some time to create the project. After successfully creation you will see below screen.
9. Run following commands in the terminal, to start the server
cd hello-world
npm run serve
10. Now the Vue.js application is running at http://localhost:8080/.
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
13. After build complete, all necessary files for deployment on SAP Cloud Platform are available under dist directory.
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.
17. Right click on the project and choose Import.
18. Choose the zip file created above in Step-14 which is deployment ready Vue.js application.
19. After import, your project structure will look like below.
20. Right click on the project and deploy the project to SAP Cloud Platform.
21. Choose Deploy.
22. The Vue.js application is successfully deployed to SAP Cloud Platform.
23. Click on the project name, and get the Application URL.
24. Run the application URL in the browser. Hurrah!! we have Vue.js application running in SAP Cloud Platform.
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!
