React App using SAP Business Application Studio

Introduction

In this era of cloud computing, everything has moved to the cloud varying from storage, platform, infrastructure, and whatnot. IDE on cloud (like Codepen, Codesandbox, JSFiddle to name a few) has become a reliable tool for front end developers like me to use for on-the-go-code or to share code with people across forums like StackOverflow. Think of a future where you do not have to hassle with setting up a development environment on your system. I am talking about the possibility of something like the Visual Studio Code on the Web. You will get all the extensions and the GIT integrations and whatnot just by accessing an address on the browser. Actually, it is something that is already in the works as Codespaces — the instant dev environment as they call it. Well, the sad part is it is not yet live and it is still in beta as of the date of publication of this blog.

I have been developing my applications on cloud IDE for the past 3 years on the most popular IDE for SAP application development — SAP Web IDE. Well, it has a new elder brother in town- SAP Business Application Studio or SAP BAS in short. While exploring the capabilities of this tool for my own developments (SAP UI5 and Fiori apps), I gave a try to create a React project, and voila, it worked.

SAP Business Application Studio

You will need to register your free trial account here and then log in to your trial account and go to SAP Business Application Studio. This blog by SAP can be helpful if you face any difficulties.

SAP Cloud Platform Trial Homepage
SAP Cloud Platform Trial Homepage

You will need to create a dev space. Select the Basic section.

Dev Space Creation Page
Dev Space Creation Page
Dev Space Creation Page
Dev Space Settings Page
Dev Space Selection Page
Dev Space Selection Page
Dev Space Selection Page

Once you are in, I mean just look at this IDE. Surprised! Yes, even I was when I first saw it. I found it conveniently easy to use due to the striking resemblance.

SAP BAS Welcome Screen
SAP BAS Welcome Screen
SAP BAS Welcome Screen

React Development using SAP BAS

  1. Open the Workspace.

2. Open terminal and use command >> npx create-react-app demoapp

npx command to create react app
npx command to create react app
npx command to create react app

3. Navigate to the folder and run command >> yarn start. Press Y to open in a new port and a new window will open up with the basic template app.

Note — Ports can also be accessed by using ctrl+shift+P and then searching for Ports.

Running the demo React app
Viewing the app in Port
Demo app — Home Screen

4. Let me tweak the code and see if the changes are reflected and it works perfectly as in VSCode.

Editing App.js
Hello World Indeed :)

Further Capabilities include GIT integration. I was able to successfully clone my projects from GIT and seamlessly push to GIT after the initial GIT configuration. VS Code Extensions, Themes, and many similar features are well-integrated providing similar ease of use.

Conclusion

SAP BAS is not specifically designed keeping React development in mind but yes, it is a good tool to add to the arsenal. I am eagerly waiting to find out what GitHub Codespaces will be capable of once it is out of beta. Until next time!

Front End Developer/React JS/ SAP UI5/ Fiori