Skip to Content

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 minificationcompilationunit 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 buildFor 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.

 

To report this post you need to login first.

20 Comments

You must be Logged on to comment or reply to a post.

  1. Natalia Katunin
    Post author

    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

     

    (0) 
    1. Natalia Katunin
      Post author

      Hi  Michaela,

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

      Please try later.

      Sorry for the inconvenience.

      Natalia

       

      (0) 
  2. Hannes Ladstätter

    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

     

    (0) 
  3. Christoph Braun

    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?

    (0) 
  4. Julius Wessels

    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?

    (0) 
    1. Natalia Katunin
      Post author

      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

       

      (0) 
  5. 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

     

    (0) 
  6. Guillaume CARDON

    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.

    (0) 
    1. Natalia Katunin
      Post author

      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

       

       

      (0) 
      1. Guillaume CARDON

        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)

        (0) 
        1. Natalia Katunin
          Post author

          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

          (0) 

Leave a Reply