i have created a docker image of eclipse theia ide and i have import my react js code in ide and then running that react js project it running but i want to see the application preview of react inside my theia ide instead of different page. is there a way un theia or any plugin through which we can see out application webpage
Hey @Jay-Bhatt98,
You’re probably looking for the @theia/mini-browser package. It allows to handle Iframes in Theia widgets and should allow to easily embed a React application inside of Theia.
hey @msujew
this is my package.json
{
“private”: true,
“theia”: {
“frontend”: {
“config”: {
“warnOnPotentiallyInsecureHostPattern”: true,
“applicationName”: “My App”,
“preferences”: {
“files.enableTrash”: false
}
}
},
“welcome”: {
“enabled”: false
}
},
“dependencies”: {
“@theia/callhierarchy”: “latest”,
“@theia/file-search”: “latest”,
“@theia/git”: “latest”,
“@theia/markers”: “latest”,
“@theia/messages”: “latest”,
“@theia/navigator”: “latest”,
“@theia/outline-view”: “latest”,
“@theia/plugin”: “latest”,
“@theia/plugin-dev”: “latest”,
“@theia/plugin-ext”: “latest”,
“@theia/plugin-metrics”: “latest”,
“@theia/plugin-ext-vscode”: “latest”,
“@theia/preferences”: “latest”,
“@theia/preview”: “latest”,
“@theia/search-in-workspace”: “latest”,
“@theia/terminal”: “latest”,
“@theia/vsx-registry”: “latest”,
“@theia/mini-browser”: “latest”
},
“devDependencies”: {
“@theia/cli”: “latest”,
“https-proxy-agent”: “^7.0.1”
},
“scripts”: {
“prepare”: “yarn run clean && yarn build && yarn run download:plugins”,
“clean”: “theia clean”,
“build”: “theia build --mode production”,
“start”: “theia start --ssl --plugins=local-dir:plugins --host 0.0.0.0 --port 4200”,
“download:plugins”: “theia download:plugins”
},
“theiaPluginsDir”: “plugins”,
“workspaces”: [
“dev-packages/",
"examples/”,
“packages/",
"sample-plugins//*”
],
“theiaPlugins”: {
“eclipse-theia.builtin-extension-pack”: “https://open-vsx.org/api/eclipse-theia/builtin-extension-pack/1.79.0/file/eclipse-theia.builtin-extension-pack-1.79.0.vsix”,
“EditorConfig.EditorConfig”: “https://open-vsx.org/api/EditorConfig/EditorConfig/0.16.6/file/EditorConfig.EditorConfig-0.16.6.vsix”,
“dbaeumer.vscode-eslint”: “https://open-vsx.org/api/dbaeumer/vscode-eslint/2.4.2/file/dbaeumer.vscode-eslint-2.4.2.vsix”,
“ms-vscode.js-debug”: “https://open-vsx.org/api/ms-vscode/js-debug/1.78.0/file/ms-vscode.js-debug-1.78.0.vsix”,
“ms-vscode.js-debug-companion”: “https://open-vsx.org/api/ms-vscode/js-debug-companion/1.1.2/file/ms-vscode.js-debug-companion-1.1.2.vsix”
},
“theiaPluginsExcludeIds”: [
“ms-vscode.js-debug-companion”,
“vscode.extension-editing”,
“vscode.git”,
“vscode.git-base”,
“vscode.github”,
“vscode.github-authentication”,
“vscode.microsoft-authentication”,
“ms-vscode.references-view”
]
}
i want when i start my react project there should be a preview browser mode or mini browser to see it in theia ide
@Jay-Bhatt98 You’ll need to create an instance of a mini browser widget that points to the url of your react app on Theia startup. I don’t have an example at hand right now, but you should be able to get there by taking a closer look at the @theia/mini-browser package implementation linked above.