If you’re just getting started with SAP Business Application Studio (BAS) and trying to preview a simple index.html or custom named index file. Ex: maya.html, you might notice that there’s no direct “Live Preview” like in some other editors. Here’s how to properly open and preview your HTML file in BAS.
Here is the Scenario
You have an HTML file like this:
myfirstproject/
└── maya.html
When you try to open it, BAS shows an option to select the editor (as seen in the screenshot), but not how to actually render it in a browser.
Screenshot 1.1
Method 1: Check for Built-in Preview
Sometimes, right-clicking on the file might give you an option like:
“Preview Application”“Open with Live Preview”
If available, this is the fastest way. Simply select it and BAS will open the rendered HTML in a preview browser tab.
Method 2: Serve with Local HTTP Server (Recommended)
Since BAS is cloud-based and lacks local preview by default, the best approach is to run a simple HTTP server:
Steps to Run Preview:
Open your terminal in BAS: Terminal > New Terminal
Screenshot 1.2
Then run the following command as a lightweight HTTP server using npx: npx http-server .After running the above command, this is the following screen:
Screenshot 1.3
Then click on y. Then, BAS will show a local server link: http://127.0.0.1:8080
Screenshot 1.4
Click on the link provided in the terminal or preview it manually using the “Preview” icon in BAS.
Why Is this Needed?
BAS is optimized for SAP development (Fiori, UI5, CAP) and not focused on static site previews. Running a local server is a great way to simulate real-world behavior for your HTML, CSS, and JS.
Pro Tip (Not an recommendation – Only for Knowledge Purpose)
If you work frequently with HTML/CSS/JS:
Consider installing Live Server (if supported).Or switch to using VS Code locally for quick testing alongside BAS for full-scale SAP app development.
Thank you for taking the time to read this blog!
If you found this helpful, feel free to share your thoughts, feedback, or questions in the comments! Let’s keep learning and growing together. Happy coding!
Hello experts, please feel free to correct me if any information is inaccurate.
#SAPUI5 #Fiori #BAS #Index #HTML #Beginner#Coding #Learning
If you’re just getting started with SAP Business Application Studio (BAS) and trying to preview a simple index.html or custom named index file. Ex: maya.html, you might notice that there’s no direct “Live Preview” like in some other editors. Here’s how to properly open and preview your HTML file in BAS. Here is the ScenarioYou have an HTML file like this:myfirstproject/ └── maya.htmlWhen you try to open it, BAS shows an option to select the editor (as seen in the screenshot), but not how to actually render it in a browser. Screenshot 1.1 Method 1: Check for Built-in PreviewSometimes, right-clicking on the file might give you an option like:”Preview Application””Open with Live Preview”If available, this is the fastest way. Simply select it and BAS will open the rendered HTML in a preview browser tab. Method 2: Serve with Local HTTP Server (Recommended)Since BAS is cloud-based and lacks local preview by default, the best approach is to run a simple HTTP server:Steps to Run Preview:Open your terminal in BAS: Terminal > New TerminalScreenshot 1.2Then run the following command as a lightweight HTTP server using npx: npx http-server .After running the above command, this is the following screen:Screenshot 1.3Then click on y. Then, BAS will show a local server link: http://127.0.0.1:8080 Screenshot 1.4Click on the link provided in the terminal or preview it manually using the “Preview” icon in BAS. Why Is this Needed?BAS is optimized for SAP development (Fiori, UI5, CAP) and not focused on static site previews. Running a local server is a great way to simulate real-world behavior for your HTML, CSS, and JS. Pro Tip (Not an recommendation – Only for Knowledge Purpose)If you work frequently with HTML/CSS/JS:Consider installing Live Server (if supported).Or switch to using VS Code locally for quick testing alongside BAS for full-scale SAP app development. Thank you for taking the time to read this blog!If you found this helpful, feel free to share your thoughts, feedback, or questions in the comments! Let’s keep learning and growing together. Happy coding! Hello experts, please feel free to correct me if any information is inaccurate.#SAPUI5 #Fiori #BAS #Index #HTML #Beginner#Coding #Learning Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
