Skip to Content
Author's profile photo Fatih Pense

Easy BSP JavaScript development with zMIMESync (Open Source)


My colleagues leverage new front-end technologies like JS frameworks. However each time they edit a JavaScript file they have to open the MIME file, edit it and close it to see the change in the web page. This workflow makes me cringe and I feel sorry for my fellow developers. I developed a solution for them and decided to share it with you.

 

Problem

-Too many actions required changing a single JavaScript file.
-Version control becomes harder since you always change MIME on the server first. You have to get local copies periodically if you want to use SVN or Git.
-Every IDE has its way of organizing projects, and extra features. You can not use all of the features because you open one file at a time from temp.
-You want to upload many files at once like images.
-Often JS frameworks create a single minimized .js file and you have to import the file every time.

 

Solution

-Start zMIMESync program. Edit your files in your PC with your favorite IDE/editor. Whenever you save a file zMIMESync instantly sends the file to the MIME repository. You can directly go to the browser and refresh to see the changes! Since files are already on your PC you can use any version control.

Features

  • instantly syncs your js file when you save.
  • checks if the file is really changed after the last sync.
  • works well with requests.
  • works with folders.
  • overwrites files.
  • doesn’t delete files.
  • uploads any file type like .js .png …

Installation

zMIMESync consists of two parts.
1- Web Service in SAP system that updates MIMEs.
2- Command line client tool that watches files to upload.

1- Service creation is documented here with the source code:

Creating a Class Handler for SICF Service (with code example)

2- Installing client is very easy. If you are developing with Node.js you are already familiar with npm tool. If you don’t have it installed, you can install Node.js from the official website: link .This brings command line tool “npm”. Then you can run:

npm install zmimesync -g

That’s all it takes to install client!

 

Usage

Create a BSP application

Now it opens the file as script.js.txt with Notepad. You have to save&close the file to see the changes. Every time! You can change the default program for *.txt files to the beloved Notepad++ but that doesn’t solve open/close, open/close issue… There is a better way 🙂

Open command line and go to your root folder for MIMEs. Execute “zmimesync” it will create a settings file on the first run.

mimesync-settings.txt

This is the created settings file with explanations in it:

#Settings file for ZMimeSync - Automatic Mime Sync for easier development

#SICF Service for ZMimeSync you can find more info at the documentation
#Example: "http://erpdev.company:8000/sap/bc/zmimesync_s001?sap-client=100"
mimesync_service = "" 

#Username on SAP system.
username = ""

#Password on SAP system. This is optional since you may not want to store it in plaintext.
#If there is no password field the tool asks you for password each time you run it.
password = ""

#Root Mime Path for BSP, etc. This is found at the bottom in BSP properties screen.
#Example: "/sap/bc/bsp/sap/zbsp_mimesync_ex/"
#Please note that you can also sync current folder to an subfolder in MIMEs.
#Example: "/sap/bc/bsp/sap/zbsp_mimesync_ex/my_folder/"
mime_url  = ""

#Request Number for SAP development.
#Example = "ERPK900141"
request_number = ""

Enter the required fields.
You should enter “mimesync_service” URL from the SICF service. You can find URL by testing it.

“mime_url” field is /sap/bc/bsp/sap/$YOUR_BSP_APP_NAME/ . You can also sync the folder on your computer to a sub-folder in BSP.

“request_number” is the transport request number. It should be same with the BSP application.

Now if you run the client program it will immediately sync your files and continue syncing! You can use Ctrl+c to close the program.


1- I changed script.js and saved it automatically synced.
2- I added a line and deleted it again, then saved. Since content didn’t change the tool didn’t sync.

Thanks for reading. If you have any question regarding this tool, I would be happy to help.

 

 

Assigned Tags

      7 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sandra Rossi
      Sandra Rossi

      Hi, I don't see the zmimesync program, do you provide it?

      Author's profile photo Fatih Pense
      Fatih Pense
      Blog Post Author

      Hi Sandra, it is a command line tool written in JS. It uses Node.js(JS outside browser) and in the JavaScript community almost every library and tool written with Node.js is stored in NPM repository. (There is more info here: https://docs.npmjs.com/getting-started/what-is-npm )

       

      Basically, you should (1) install Node.js https://nodejs.org/en/download/ . It comes with “npm” program. Then you can (2) run “npm install -g zmimesync” on the command promt it handles installation of the package and program becomes available in the PATH of operation system. That is all to use the zmimesync program.

       

      npm repo for the zmimesync client is here:
      https://www.npmjs.com/package/zmimesync

       

      Also source code for the zmimesync client is here:
      https://github.com/fatihpense/zmimesync

       

      Best Regards,
      Fatih

       

      Author's profile photo Sandra Rossi
      Sandra Rossi

      Thanks, I’ve got the whole picture now.

      By the way, you indicate “You can not use your IDE of choice”, it’s not 100% right, because you may select an external editor via the options in the ABAP workbench. The file is downloaded locally to the SAP GUI temporary directory, and the editor is started with the path to the local file as only argument, and the file is uploaded back to the MIME repository when the editor is closed.

      Of course, the "external editor" option won’t work if the source master is external to SAP (SVN, etc.) so I understand your tool is very useful!

      Author's profile photo Fatih Pense
      Fatih Pense
      Blog Post Author

      Hi Sandra,

      Thanks for pointing the mistake out. I will change the phrasing to be correct.

       

      What I meant to say was, every IDE has its way of organizing projects, and you can’t leverage every IDE feature if you open one file at a time from temp.

       

      Another problem this tool solves is that some new JS frameworks need compilation/minimization step and produce single distribution .js file that is only meant to be read by a computer. So every time you change your JavaScript, you have to copy contents or import “distribution.js”

       

      Even if you don’t need to write code, you may need to upload many images.

       

      I think I should add these cases 🙂 

       

      Thanks for your valuable comments!

       

      Best Regards,
      Fatih

      Author's profile photo Alexander Tsybulsky
      Alexander Tsybulsky

      Nice tool ! ?

      Recently I had the same issue and implement one for me, for W3MI object though ?

      It is calle abap W3MI poller - https://github.com/sbcgua/abap_w3mi_poller

      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Fatih,

      thank you for this great contribution. I would suggest you update your ABAP development part to abapGit and include the SICF Endpoint. This will make the installation even easier.

      Best regards
      Gregor

      Author's profile photo Fatih Pense
      Fatih Pense
      Blog Post Author

      Hi Gregor,

      Great advice! I'm a fan of Lars' work. Migrating to abapGit will be the next thing on my open source to-do list 🙂

      Thank you for your comments.

      Best regards,
      Fatih