Visual Studio Code is an editor you can use to open and edit the front-end files in a local MDriven Turnkey application while your MDriven model and back end remain available through the configured server connection.
What you use Visual Studio Code for
Use Visual Studio Code when you want to work with the HTML, JavaScript, and CSS files of a locally extracted Turnkey web application.
For example, you can open the local Turnkey application folder, change a CSS rule or front-end markup, start the local application, and inspect the result in your browser.
Visual Studio Code is not the MDriven model editor and does not provide the MDriven Visual Studio integration for model editing or code generation. For that workflow, use Documentation:Visual Studio.
Before you start
You need:
- Visual Studio Code installed on your development computer.
- A downloaded and extracted copy of the MDriven Turnkey web application.
- A model available in MDriven Designer and a back-end configuration that points the local application to the correct server URL.
The video walkthrough opens the extracted Turnkey application in Visual Studio Code, saves the model, configures the back end to locate the correct URL, and then starts the application. Watch the Visual Studio Code walkthrough for the demonstrated flow.
Open a local Turnkey application
- Download the MDriven Turnkey web application archive.
- Extract the archive to a local folder.
- Start Visual Studio Code.
- Open the extracted Turnkey application folder in Visual Studio Code.
- Locate the front-end files you want to change, such as HTML, JavaScript, or CSS files.
Keep the extracted application as your local working copy. The model remains the definition of the application's classes, ViewModels, views, and actions; the files you edit in Visual Studio Code are the front-end implementation in the local Turnkey application.
Connect the local application to the back end
The local application must be configured so that it can find the correct back-end URL.
- In MDriven Designer, save the model before testing the local application.
- Open the local Turnkey application's configuration in Visual Studio Code.
- Set the back-end connection so the local application uses the intended server URL.
- Start the local application.
- Open the running application in a browser and verify that it loads the expected model-driven user interface.
If the application starts but does not show the expected model or data, check the configured back-end URL first. The local front end must point to the same intended MDriven server environment.
A practical editing cycle
Use this short cycle while changing the front end:
- Make a focused change in Visual Studio Code. For example, change a CSS style that affects a rendered page.
- Save the file.
- Start or restart the local application when required by your local setup.
- Refresh the application in the browser.
- Confirm that the changed page still renders the expected ViewModel data and actions.
Make one change at a time while you are learning the structure of the Turnkey application. This makes it easier to identify whether an issue comes from the front-end change, the local application configuration, or the model.
Visual Studio Code and Visual Studio are different workflows
| Tool | Use it for | Example |
|---|---|---|
| Visual Studio Code | Editing local Turnkey front-end files | Change HTML, JavaScript, or CSS in an extracted Turnkey application, then run it locally. |
| Visual Studio | MDriven Framework integration, model editing support, and code generation | Open an .ecomdl model as a model surface and use the installed MDriven integration.
|
| Visual Studio local development | Running and debugging Turnkey locally in Visual Studio, including view overrides | Create a .cshtml override named after the ViewModel it replaces.
|
Do not use this Visual Studio Code workflow as a substitute for the MDriven Framework installation or Visual Studio code-generation setup. Follow Documentation:MDriven Framework Visual Studio installation when you need the Visual Studio integration.
Troubleshooting
The application does not load the expected model or data
Verify that the local application's back-end configuration uses the correct server URL. Save the model in MDriven Designer, then restart the local application and test again.
You need to edit the model or generate code
Open the model through Visual Studio with the MDriven Framework integration installed. If an .ecomdl file opens as XML instead of a model surface, follow the troubleshooting guidance on that page.
You need server-side debugging or a view override
Use the dedicated Development in Visual Studio procedure. It covers running Turnkey locally in Visual Studio and creating a .cshtml file in Views/EXT_OverridePages whose filename exactly matches the ViewModel name.