DevExtreme has a nice (web) simulator that lets you preview your application on a target device (tablet, phone, iOS, Android).
That’s really nice. However, out of the box, it works only when you have a special type of Visual Studio project that comes with DevExtreme (when you create a new DevExtreme project through one of its templates). Which might be a problem if you have other project type (i.e. MVC) instead – DevExtreme project is meant for distribution as a packaged “native” application. In that case no simulator for you, at least not out of the box.
Luckily here is a simple solution how to enable simulator for any web project. The mandatory step is to
- find WebServer folder that is part of DevExtreme extension for Visual Studio. Mine is located in C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\Extensions\mblaqgom.mw5.
- from WebServer folder found in step above copy simulator.html and Images and Simulator folders to root of your MVC project.
- Do not copy web.config – it will wreck your application
That’s it. You can run your application by going to URL/simulator.html?appPage=index.html (assuming your starting page is index.html). Note that you can pass other parameters to simulator as well, like device=iPhone and orientation=p..
If you want to omit the appPage=index.html parameter you can rename index.html to app.html and simulator will pick app.html by default.