Migrating a project to SAP Web IDE Full-Stack

[natalia_katunin]

In this recent blog post, we announced that SAP Web IDE Full-Stack is ready for SAP Fiori developers and suggested you to start migrating your projects from SAP Web IDE.

Migrating to the new SAP Web IDE Full-Stack version is simple if you follow these tips:

1. Understand the differences between the versions.


2. Enable SAP Web IDE Full-Stack in your account.


3. Choose a migration tool.


4. Learn to migrate a shared project.


5. Become familiar with Grunt.


6. Enable additional features.


7. Perform post-migration manual steps.


8. Organize your projects in different workspaces.

 

Tip #1.  Before starting the migration process, understand the differences between the SAP Web IDE versions.

In the new SAP Web IDE Full-Stack version, you can enjoy all the tools for developing SAPUI5/SAP Fiori applications you use in the current Web IDE. Also, project migration has no impact on your code.

Still, there are a few differences between the versions that you should be aware of.

 

Tip #2.  Enable SAP Web IDE Full-Stack in your account.

This step is relevant for enterprise accounts only. In trial accounts, SAP Web IDE Full-Stack is already enabled.

Follow this procedure to set up your SAP Cloud Platform account so developers in your organization can start developing applications with SAP Web IDE Full-Stack.

Other account configurations you made for SAP Web IDE (like destinations and cloud connectors) are reusable in SAP Web IDE Full-Stack as is.

 

Tip #3. Decide which migration tool is better for your project.

You can migrate a project to SAP Web IDE Full-Stack either by using the Migration Wizard or by a regular Git clone operation.  Consider the following to decide which method is most suitable for you:

• If you have several projects in your current Web IDE workspace and you would like to migrate them in batch, use the Migration Wizard.


• If your project is stored in a Git repository and you are not working on it right now (and therefore it does not appear in the Web IDE workspace), use the Git clone operation.


• If you have a project that you are working on together with your colleagues, read Tip #4 which explains how to migrate a shared project.

 

Tip #4. Learn to migrate a shared project.

If you are developing a project as a team and share the sources via a Git repository, we suggest you arrange the migration process as follows:

Step 1. In SAP Web IDE, all project contributors commit and push their changes to the Git repository.

Step 2. In SAP Web IDE Full-Stack, all team members adjust their user preferences including enabling required features.

Step 3. In SAP Web IDE Full-Stack, a representative of the team clones the project and, if needed, adjusts it as described in the Migration procedure. Then, the representative commits and pushes the generated and updated files to the Git repository.

Step 4.  In SAP Web IDE Full-Stack, all team members clone the migrated project to their workspaces and continue working as usual.

We recommend that all developers working on the same project use the same SAP Web IDE version. If you choose different cloud versions or use the personal edition together with the full-stack development version, all changes to the project settings must be copied manually.

 

Tip #5. If you use the SAPUI5 Client Build in SAP Web IDE, become familiar with Grunt.

To know if this tip is relevant for your project, in SAP Web IDE open Project Settings and select the Project Types option. If the SAPUI5 Client Build checkbox is selected, then this is for you.



 

In SAP Web IDE Full-Stack, proprietary SAPUI5 Client build functionality is not available anymore. Instead, you can use open source technology: Grunt.

 

“Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting.

“Tasks are the modules that perform a specified job. They are defined in the Gruntfile. Developers can load predefined tasks from existing Grunt plugins and/or write custom code to define their own tasks depending on their requirements.”

To use Grunt in a project, two specific files need to be created in the root directory, namely package.json and a Gruntfile.

• package.json- contains the metadata for the project including name, version, description, authors, licenses and its dependencies (Grunt plugins required by the project).


• Gruntfile- a valid JavaScript that contains code to configure tasks, load existing plugins and/or create custom tasks.”

-- from Wikipedia

 

If your project is configured to use SAPUI5 Client Build, the files required to run the Grunt build are generated automatically during migration by one of the methods described in Tip #2. This produces the same output as the SAPUI5 Client build. You can use this best-practice configuration or extend the build as needed.

If your project is connected to Git, submit and push the generated Grunt files to your repository.

For more details on Grunt in SAP Web IDE Full-Stack, see Building Applications.

 

Tip #6. Before migrating your project, enable the required additional features in SAP Web IDE Full-Stack.

Optional plugin capabilities are provided by features in the SAP Web IDE Full-Stack version. If you use optional plugins in the current Web IDE, you should enable the corresponding features manually. For more information, see Enable Additional Features.

If you developed a plugin in SAP Web IDE, you will have to convert it to a feature as described in the Creating Our First Feature tutorial in the SAP Web IDE SDK.

 

Tip #7. Don’t forget to perform the post-migration manual steps.

If your project is connected to Git, you must commit and push to your Git repository the following files and folders that are generated or updated during migration regardless of the method you choose (see Tip #3):

• .che folder:
  SAP Web IDE Full-Stack stores the project metadata and settings in a special system folder called .che. This folder is hidden by default. During migration, this folder is generated from the .project.json file that is no longer in use in SAP Web IDE Full-Stack.


• package.json, package-lock.json, Gruntfile.js, and .npmrc files:
  If you used the SAPUI5 Client build in SAP Web IDE to minify and bundle files before deployment, these files are created in your project to enable the Grunt build. For more details on Grunt in SAP Web IDE Full-Stack, see Building Applications.

• If your project contains an ESLint configuration file .eslintrc, the “customRulesPath” property will be removed from it. The custom rule definition path will be stored in the .che If the “customRulesPath” property points to your custom rules definition file, the corresponding field in the .che metadata will be updated accordingly.

Depending on the type of your project, you may need to do another 1 or 2 small post-migration steps. For the details, please refer to the Migration procedure.

 

Tip #8. Organize your projects in different workspaces.

If you have several projects in your workspace, you will enjoy our new functionality that allows you to manage multiple workspaces and have them open in different browser tabs at the same time. With multiple workspaces, you can better organize your space by splitting projects in any way that suits you, for example by topics or customer domains.

You can find more information in this blog on our multiple workspaces or in the SAP Web IDE documentation.

 

[and23_julius]

hi natalia.katunin

 

Thanks for the blog...I am facing an issue when importing a project prototyped from www.build.me then I have these errors in my controllers. can you please advise how to rectify?

Is Tip#5 relevant to this matter?

 

Best Regards

 

Andre Julius

[natalia_katunin]

Hi Andre,

Thank you for the feedback.

The tip #5 is relevant for the case when you migrate your project from the previous version of Web IDE and the project is configured to use Client side build.

The error you get does not seem related to Grunt at all.  I will forward your question to our experts in code validation area so they can advise.

 

Regars

Natalia

 

[Micha_Reisner]

Dear Natalia

 

The link in your first tip to "few differences "   leads to a not existing page.
???

Regards
Michaela

[natalia_katunin]

Hi  Michaela,

Unfortunately, there is a general issue with help/documentation pages.

Please try later.

Sorry for the inconvenience.

Natalia

 

[Hal64]

Hi Natalia,

I get an error when I use the migration wizard: Import of project failed with status 403



What could be the reason for this? How can I fix it?

Regards

Hannes

 

[natalia_katunin]

Hi Hannes,

I have forwarded the issue to my colleagues for investigations.

Regards

Natalia

[former_member292197]

 

Hi Hannes,

Could you please send the failed project in a zip file to my email: ahmad.haj.ali@sap.com for further investigation?

Could you please describe your step by step as well.

Regards,

Ahmad

[brauncto]

Hi,

Hannes, did you find a solution yet?

I get a similar error.

Steps:

1. create project in webIDE classic


2. go to webIDE fullstack and click migrate tool


3. select project from list, after a few seconds an error occurs:
   – Failed to migrate project migrateme
   Import of project migrateme=migrateme failed with status: 404.

I get the error for every project I have. So it is not project specific but more general. Are there any other prerequesites for the migration to work?

[former_member292197]

A hotfix is planned to be released till the end of this week.

Will keep you updated.

[former_member547880]

I had no problems migrating my projects with the wizard or via git clone. But it seems something went wrong anyway.

When i click on my old apps (from git or migrating wizard) there is no "Enable App To App Navigation" in the context menu.

Additionally i cant run my apps as "Sap Fiori Launchpad Sandbox" (no menu item in the context menu). When i create a new projekt from template (or sample application) i dont have these problems.

Is something missing in my old projects?

[natalia_katunin]

Hi Julius,

 

Please open Project settings of your project in Web IDE Full-Stack and set additional type Fiori in the Project Types tab. Save.

Then you will see the missing options.

Regards

Natalia

 

[former_member547880]

Thank you very much, it worked! I totally missed that.

 

Regards

Julius

[former_member194486]

Hi Julius,

Could you please send me a zip of your project in Web IDE (emali: zoya.pronyakova@sap.com )? I am trying to understand why the fiori type wasn't propagated automatically during the migration.

Thanks in advance,
Zoya

 

[former_member547880]

Hello,

I'm sorry, but since that project was a customer project, i can't send it to anyone.

[richard_birenheide]

I have also trouble to migrate projects. As well, (we are using a plain UI5 application), I cannot run the application from the WebIDE. Could you please provide a component to report bugs?

Thanks

Richard

 

[former_member260108]

I migrate to WebIde Full Stack and i regret it.

Since that, it's impossible to create a basic app, initialized from a template or similar. When i run app, page stay empty.

Basic code "Hello World" (found here : https://sapui5.hana.ondemand.com/#/topic/592f36fd077b45349a67dcb3efb46ab1)  executed on WebIde Full Stack not working (it's always ok on previous Web Ide)

Issue is similar on others browsers, others desktop, other colleagues.

[natalia_katunin]

Hi Guillaume,

Could you please share with me a zip of the Hello World application that works for you in the old Web IDE.  I've just checked the behavior of the app that I downloaded from the tutorial: in both IDEs running the imported project opens an empty page. So I would like to validate the issue with your version to analyze the differences.

Thank you

Natalia

 

 

[former_member260108]

Thanks for your answer.

See the code below ( a simple index.html)

 

<!DOCTYPE html>

<html>

<head>

	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta charset="utf-8">

	<title>Hello World App</title>

	<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

		id="sap-ui-bootstrap"

		data-sap-ui-theme="sap_belize"

		data-sap-ui-libs="sap.m">

	</script>

	<script type="text/javascript">

		sap.ui.getCore().attachInit(function () {

			// create a mobile app and display page1 initially

			var app = new sap.m.App("myApp", {

				initialPage: "page1"

			});

			// create the first page

			var page1 = new sap.m.Page("page1", {

				title : "Hello World",

				showNavButton : false,

				content : new sap.m.Button({

					text : "Go to Page 2",

					press : function () {

						// navigate to page2

						app.to("page2");

					}

				})

			});

			// create the second page with a back button

			var page2 = new sap.m.Page("page2", {

				title : "Hello Page 2",

				showNavButton : true,

				navButtonPress : function () {

					// go back to the previous page

					app.back();

				}

			});

			// add both pages to the app

			app.addPage(page1).addPage(page2);

			// place the app into the HTML document

			app.placeAt("content");

		});

	</script>

</head>

<body class="sapUiBody" id="content">

</body>

</html>

 

Ok on classic WebIde.

Nothing on WebIde Full Stack (and no error in Chrome console)

[natalia_katunin]

Hi Guillaume,

Unfortunately, index.html is not enough to investigate why preview does not work for you. Could you please upload the complete project as a zip here or send it to me by mail.

Regards

Natalia

[natalia_katunin]

HI Guillaume,

Could you please try a workaround described in this blog:

https://blogs.sap.com/2018/06/13/sap-web-ide-full-stack-only-shows-a-blank-screen-in-preview-mode/

Meanwhile, we are working on resolving the root cause of the issue.

Regards

Natalia

 

[former_member589262]

Hi,

 

I migrated my code using Git and everything came over smoothly. I can run/test my app from Web IDE Full Stack.

 

When I deploy my code to Cloud Platform it says it successfully deploys but I receive a 404 when opening the URL. I exported the code from Cloud Platform to see what the issue was and the .zip file is empty. Any direction on what might have gone wrong?

[markus_deuter]

Hi there,

may I lead you to another migration problem at

https://answers.sap.com/questions/704385/http-status-500-internal-server-error-on-web-ide-f.html

Perhaps a solution is not far away 🙂

Thank you very much.

Regards,

Markus

[Gert]

Hi Natalia,

thanks for your hints. The migration process works fine at least.

However, you should mention that only the first 100 projects can be migrated in one step; since the table in the migration wizzard, where you can select the projects for migration, holds only 100 entries.

Best regards, Gert

[former_member329450]

Hello,

we have to migrate an app to the Web IDE Full Stack. Last year we made a download of the app in a zip file.

Now I can import the app in the Full Stack version. But there is no lorry-button for the migration tool.

Was the app migrated during the import? Is there some configuration missing?

Best regards,

Stefan

[natalia_katunin]

Hi Stefan,

The migration tool is available only if your user had projects in the old Web IDE from the same subaccount.  Then, the tool allows to copy these projects to Web IDE Full-Stack. Is it your case?

If you have a project zip archive, you can export it into the new Web IDE from the right-click menu.

Regards

Natalia

 

[former_member329450]

Hello Natalia,

thank you for the quick response.

I've got the zip file from a collegue. He has created the app in his hana trial account with the old Web IDE. And he is not available anymore...

Now I wan't to implement the app in our productive hana account. There we never had an old Web IDE project.

So if I understand correctly, I should import the project from the zip and export it again into a zip. During this export it will get the new structure and I can import the second zip file to have a Web IDE Full Stack project?

Best regards,

Stefan

[natalia_katunin]

Hi Stefan,

My mistake: if you have a zip file that you got by exporting a project from the old Web IDE, you can now IMPORT it into your SAP Web IDE Full-Stack. You will get the same project structure. But you'll need to adjust your project manually in the following cases:

• If you used the SAPUI5 Client Build functionality in the old Web IDE


• If a project contains an ESLint configuration file .eslintrc

Please let me know if these cases are relevant to you and I will send you further instructions.

Regards

Natalia

[former_member329450]

Hello Natalia,

I'm pretty sure he didn't change the default values of a new project. So I assume it's without the SAPUI5 Client Build functionality.

There is no .eslintrc file in the project.

So there is nothing more to do?

Best regards,

Stefan

[natalia_katunin]

Hi Stefan,

Actually, there were templates that automatically enabled the SAPUI5 Client Build.

But the good news is that even if this is your case you do not need to do anything - I have just checked, Web IDE Full-Stack adjusts such projects automatically during import as well.

Regards

Natalia

[former_member329450]

Hello Natalia,

thank you very much for your great support!

It works perfect!

Best regards,

Stefan

[joseinnvaria84]

Hi Natalia,

I have the same case but I used SAPUI5 Client Build, please, Could you let me know which steps I need to follow to adjust my project?

Thanks you in advance for your help!

[natalia_katunin]

Hi,

I validated the scenario, Web IDE Full-Stack adjusts such projects (configured to use SAPUI5 Client Build in the old environment) automatically also when you import zip archives. It generates Grunt files (Gruntfile.js, package.jjson, etc) that are required to run Grunt build. Grunt technology replaced SAPUI5 Client Build in the new Web IDE. You can read more in the Tip #5 above.

 

Regards

Natalia

[former_member604659]

Hello Natalia,

We were not able to migrate our projects from old WEB IDE to the full stack in 2018. When I trying to do it now, I don't see the migrate icon on my Web IDE full stack.

I am using a trial account.

I have made sure that the DiDeveloper and DiAdministrator roles are assigned to my ID but still the project migration option is not appearing.

please help/suggest.

Thanks

Thilotham

 

[natalia_katunin]

Hi Thilotham,

The migration icon appears in Web IDE Full-Stack only if you still have projects created with the old Web IDE in the same account.

Please check if you used the old Web IDE from the same Trial account.

The project could have been deleted if you re-created account or disabled the old Web IDE service in the Cloud platform cockpit. If it happened there is no way to get the projects.

 

Regards

Natalia

[former_member604659]

Hello Natalia,

Thanks for writing.

The projects were created in the old Web IDE with the same trial account.

I just enabled the full stack from  cloud platform cockpit and did not disable any thing related to old WEB IDE.

The only change i did was to make this profile public instead of private and add the DIDeveloper and admin roles.

I hope that projects dont cease to exist in old Web IDE post Dec 31st 2018. Please confirm.

Is there any other troubleshooting which i can do.

Please suggest.

Thanks

Thilotham

[natalia_katunin]

Hi Thilotham,

We have not performed any clean up of users' workspaces after depreciation of the old Web IDE. We just closed access via the IDE itself.

Please try to follow this procedure to export projects:

https://help.sap.com/viewer/825270ffffe74d9f988a0f0066ad59f0/Cloud/en-US/37de0272a6be41a4b10ed4b3bff...

Regards

Natalia

[mattredfig]

You should be using oEvent.getParameter("data") or oEvent.getParameters() rather than accessing the parameter map directly. That's where the error is coming from