Importing Fiori Application into VSCode

[leobarbosa]

Hi Experts,

I finished VSCode configuration to develop Fiori apps, but I can't download an existent app and run using the VSCode.

After download all the application files using the report /UI5/UI5_REPOSITORY_LOAD, I moved them to the folder webapp. I opened the root folder using the VSCode and tried to preview the application but I got the following message: "Could not find any SAP Fiori projects in workspace"

Here is the application structure and the error message. What am I missing?

Thanks.

[leobarbosa]

Hi Jhodel,

I could import the application. I had to create the files ui5.yaml, ui5-test.yaml, package.json, flpSandbox.html, and flpSandboxMockServer.html and run the command "Fiori: Migrate WebIDE Project for use in Fiori tools".

Thank you so much for your reply. I'll create a guide and publish it.

[jhodel18]

Hi Leonardo,

It's not really good practice to get the UI5 source code from ABAP Repository, because what you have there are the build files -- the ones that are already minified files and accompanied by "-dbg" files. You should be using a Git Repo to store your UI5 files and then use VS Code to deploy to your ABAP System.

It's like this:

Git Repo <---> VS Code --> Deploy to ABAP Repo

Note that VS Code is only one-way direction.

Now, if you never have the setup before, then perhaps it's time to start using it. Start by fixing the issue you have in your current project.

1. Delete the minified files -- the one without the -dbg suffix.

2. Rename those with -dbg suffix (basically remove the -dbg suffix)

3. You can follow below blog post to get the correct project structure:

https://blogs.sap.com/2020/08/03/sap-fiori-tools-sapui5-freestyle-app/

Hope that helps!

[leobarbosa]

Hi Jhodel,

Thanks for your reply. My problem is that I don't have access to WebIDE and the original files. This is why I extract the files from ABAP Repository. Is there a way to import them properly to VSCode?

Thanks,

Leo