## 4.2.16.2.2  Develop an SAP Fiori Application and Deploy it to Cloud Foundry Using Visual Studio Code
Get an overview about how to create and deploy an SAP Fiori application to Cloud Foundry using Visual Studio Code (VS Code).
## Prerequisites
- You have installed and set up Visual Studio Code including the SAP Fiori tools extensions. See Visual Studio Code.
- You have access to a RAP business service that has been exposed as an OData service. See Using Service Binding Editor for OData V2 Service.
- To establish a connection with your ABAP environment system, you either have to be a space developer in the ABAP environment instance or have access to a service key in the ABAP environment instance. See Add Space Members Using the Cockpit and Creating Service Keys in the ABAP service instance.
## Generating and Deploying Your Application
<!-- image -->
1. Create an MTA project with approuter configuration. To do so, use the Fiori CF Application Router Generator . See Generate an MTA Deployment File. This generates an MTA project and the corresponding application router configuration.
2. With the Fiori Application Generator , create an SAP Fiori application in the subfolder of the MTA file location by selecting Fiori: Open Application Generator from the command palette. See Generate an Application and Add a Fiori Application to an MTA Deployment File with the Fiori Generator.
In the Data Source and Service Selection section of the Template Wizard, select the following values:
- Data source: Connect to a System .
- •
- •
- System: New System
- System type: ABAP Environment on SAP Business Technology Platform
- ABAP environment definition source:
- (Option 1) Discover a Cloud Foundry Service
##  Note
You have to log on to your Cloud Foundry space by executing command cf login . When you're prompted to enter the API endpoint and org name, you can navigate to your subaccount in the SAP BTP cockpit, where you can find this information.
- (Option 2) Upload a Service Key File
- Continue with choosing a system name and service.
In the Project Attributes section , add an SAP Fiori launchpad configuration for your UI project. See Add FLP Configuration.
If you want to create you FLP configuration later, see SAP Fiori Launchpad Configuration.
3. Continue with the development of the UI, for example, with the help of guided development. See Implement Features using Guided Development.
4. Now you can preview the generated SAP Fiori application. See Preview an Application.
5. Build the application by executing command npm run build in the terminal of your project. See Deployment to Cloud Foundry.
This generates an *.mtar file and mta\_archives folder.
6. npm run deploy . See Deployment to Cloud Foundry.
##  Tip
If you can't discover an available OData service in the generator, or preview your application, check if you user is assigned to business catalog Log on to Cloud Foundry and deploy the SAP Fiori UI to your development space by executing command SAP\_CORE\_BC\_EXT\_TST . If you aren't authorized to deploy the application, check if business catalog SAP\_A4C\_BC\_DEV\_UID\_PC is assigned to your user.
## Related Information
SAP Fiori Tools SAP Fiori Overview