Cordova + react with hot reload while development mode
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I found this question Cordova with Create-react-app.
Am I able to achieve live-reloading while I'm in development mode and app is running in android emulator? I'm scared that I have to build the app everytime I wanna to see changes.
Is cordova able to watch react-app which run in development mode and read source from index.js listening for changes?
Let's say that I want to achieve something like this:
- create cordova project.
- create react project inside of /www folder (or any other folder that will work with my use-case...).
- run
cordova run androidfrom root to run application in Android Simulator andnpm startfrom /www directory. - cordova should be able to listen for changes and live-reload react app inside Android emulator.
- I need to able to access cordova instance inside react code to use plugins, etc.
I've found some webpack-server-dev (using webpack v1...) related solutions but none of them seems to be working and I need to restart cordova run android command to see changes in the code. Otherwise these templates doesn't provide functionality to enable access to the cordova plugins instance during development mode
So is really
npm buildfollowed bycordova run androidonly way to develop cordova + react app??
Note 1: I would like to use SQLite cordova plguin so development in browser-only mode and then building the application for android/ios once its done is not my case I think. Do you have any suggestions please?
Note 2: I can't use react-native as I need to use openlayers maps lib.
Thanks you so much for your answers!
reactjs cordova webpack
asked Nov 22 '18 at 6:51
sebinqsebinq
328212
add a comment |
I found this question Cordova with Create-react-app.
Am I able to achieve live-reloading while I'm in development mode and app is running in android emulator? I'm scared that I have to build the app everytime I wanna to see changes.
Is cordova able to watch react-app which run in development mode and read source from index.js listening for changes?
Let's say that I want to achieve something like this:
- create cordova project.
- create react project inside of /www folder (or any other folder that will work with my use-case...).
- run
cordova run androidfrom root to run application in Android Simulator andnpm startfrom /www directory. - cordova should be able to listen for changes and live-reload react app inside Android emulator.
- I need to able to access cordova instance inside react code to use plugins, etc.
I've found some webpack-server-dev (using webpack v1...) related solutions but none of them seems to be working and I need to restart cordova run android command to see changes in the code. Otherwise these templates doesn't provide functionality to enable access to the cordova plugins instance during development mode
So is really
npm buildfollowed bycordova run androidonly way to develop cordova + react app??
Note 1: I would like to use SQLite cordova plguin so development in browser-only mode and then building the application for android/ios once its done is not my case I think. Do you have any suggestions please?
Note 2: I can't use react-native as I need to use openlayers maps lib.
Thanks you so much for your answers!
reactjs cordova webpack
asked Nov 22 '18 at 6:51
sebinqsebinq
328212
add a comment |
I found this question Cordova with Create-react-app.
Am I able to achieve live-reloading while I'm in development mode and app is running in android emulator? I'm scared that I have to build the app everytime I wanna to see changes.
Is cordova able to watch react-app which run in development mode and read source from index.js listening for changes?
Let's say that I want to achieve something like this:
- create cordova project.
- create react project inside of /www folder (or any other folder that will work with my use-case...).
- run
cordova run androidfrom root to run application in Android Simulator andnpm startfrom /www directory. - cordova should be able to listen for changes and live-reload react app inside Android emulator.
- I need to able to access cordova instance inside react code to use plugins, etc.
I've found some webpack-server-dev (using webpack v1...) related solutions but none of them seems to be working and I need to restart cordova run android command to see changes in the code. Otherwise these templates doesn't provide functionality to enable access to the cordova plugins instance during development mode
So is really
npm buildfollowed bycordova run androidonly way to develop cordova + react app??
Note 1: I would like to use SQLite cordova plguin so development in browser-only mode and then building the application for android/ios once its done is not my case I think. Do you have any suggestions please?
Note 2: I can't use react-native as I need to use openlayers maps lib.
Thanks you so much for your answers!
reactjs cordova webpack
asked Nov 22 '18 at 6:51
sebinqsebinq
328212
I found this question Cordova with Create-react-app.
Am I able to achieve live-reloading while I'm in development mode and app is running in android emulator? I'm scared that I have to build the app everytime I wanna to see changes.
Is cordova able to watch react-app which run in development mode and read source from index.js listening for changes?
Let's say that I want to achieve something like this:
- create cordova project.
- create react project inside of /www folder (or any other folder that will work with my use-case...).
- run
cordova run androidfrom root to run application in Android Simulator andnpm startfrom /www directory. - cordova should be able to listen for changes and live-reload react app inside Android emulator.
- I need to able to access cordova instance inside react code to use plugins, etc.
I've found some webpack-server-dev (using webpack v1...) related solutions but none of them seems to be working and I need to restart cordova run android command to see changes in the code. Otherwise these templates doesn't provide functionality to enable access to the cordova plugins instance during development mode
So is really
npm buildfollowed bycordova run androidonly way to develop cordova + react app??
Note 1: I would like to use SQLite cordova plguin so development in browser-only mode and then building the application for android/ios once its done is not my case I think. Do you have any suggestions please?
Note 2: I can't use react-native as I need to use openlayers maps lib.
Thanks you so much for your answers!
reactjs cordova webpack
reactjs cordova webpack
asked Nov 22 '18 at 6:51
sebinqsebinq
328212
asked Nov 22 '18 at 6:51
sebinqsebinq
328212
edited Nov 22 '18 at 13:53
sebinq
asked Nov 22 '18 at 6:51
sebinqsebinq
328212
asked Nov 22 '18 at 6:51
sebinqsebinq
328212
asked Nov 22 '18 at 6:51
sebinqsebinq
328212
328212
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
- Run webpack-dev-server with
--host 0.0.0.0to make it accessible from outside - Change your config.xml and make
<content src="..." />point to your local-IP address and your dev-port, e.g.<content src="http://192.168.0.2:3000/" />
- Add a whitelist entry (refer to cordova whitelist-plugin documentation for more details): e.g.
<allow-navigation href="http://192.168.0.2:3000/*" />
- If you need native functionalities via
cordova, you need to make all cordova and cordova-plugin javascript files available in your dev-server. Please check this answer as well (symlink part): https://stackoverflow.com/a/46545408/1930339
answered Dec 12 '18 at 16:41
SalimSalim
1,173179
Thank you! hope it will help to somebody :) I switched to react-native
– sebinq
Dec 13 '18 at 6:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425329%2fcordova-react-with-hot-reload-while-development-mode%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
- Run webpack-dev-server with
--host 0.0.0.0to make it accessible from outside - Change your config.xml and make
<content src="..." />point to your local-IP address and your dev-port, e.g.<content src="http://192.168.0.2:3000/" />
- Add a whitelist entry (refer to cordova whitelist-plugin documentation for more details): e.g.
<allow-navigation href="http://192.168.0.2:3000/*" />
- If you need native functionalities via
cordova, you need to make all cordova and cordova-plugin javascript files available in your dev-server. Please check this answer as well (symlink part): https://stackoverflow.com/a/46545408/1930339
answered Dec 12 '18 at 16:41
SalimSalim
1,173179
Thank you! hope it will help to somebody :) I switched to react-native
– sebinq
Dec 13 '18 at 6:34
add a comment |
- Run webpack-dev-server with
--host 0.0.0.0to make it accessible from outside - Change your config.xml and make
<content src="..." />point to your local-IP address and your dev-port, e.g.<content src="http://192.168.0.2:3000/" />
- Add a whitelist entry (refer to cordova whitelist-plugin documentation for more details): e.g.
<allow-navigation href="http://192.168.0.2:3000/*" />
- If you need native functionalities via
cordova, you need to make all cordova and cordova-plugin javascript files available in your dev-server. Please check this answer as well (symlink part): https://stackoverflow.com/a/46545408/1930339
answered Dec 12 '18 at 16:41
SalimSalim
1,173179
Thank you! hope it will help to somebody :) I switched to react-native
– sebinq
Dec 13 '18 at 6:34
add a comment |
- Run webpack-dev-server with
--host 0.0.0.0to make it accessible from outside - Change your config.xml and make
<content src="..." />point to your local-IP address and your dev-port, e.g.<content src="http://192.168.0.2:3000/" />
- Add a whitelist entry (refer to cordova whitelist-plugin documentation for more details): e.g.
<allow-navigation href="http://192.168.0.2:3000/*" />
- If you need native functionalities via
cordova, you need to make all cordova and cordova-plugin javascript files available in your dev-server. Please check this answer as well (symlink part): https://stackoverflow.com/a/46545408/1930339
answered Dec 12 '18 at 16:41
SalimSalim
1,173179
- Run webpack-dev-server with
--host 0.0.0.0to make it accessible from outside - Change your config.xml and make
<content src="..." />point to your local-IP address and your dev-port, e.g.<content src="http://192.168.0.2:3000/" />
- Add a whitelist entry (refer to cordova whitelist-plugin documentation for more details): e.g.
<allow-navigation href="http://192.168.0.2:3000/*" />
- If you need native functionalities via
cordova, you need to make all cordova and cordova-plugin javascript files available in your dev-server. Please check this answer as well (symlink part): https://stackoverflow.com/a/46545408/1930339
answered Dec 12 '18 at 16:41
SalimSalim
1,173179
answered Dec 12 '18 at 16:41
SalimSalim
1,173179
answered Dec 12 '18 at 16:41
SalimSalim
1,173179
answered Dec 12 '18 at 16:41
SalimSalim
1,173179
1,173179
Thank you! hope it will help to somebody :) I switched to react-native
– sebinq
Dec 13 '18 at 6:34
add a comment |
Thank you! hope it will help to somebody :) I switched to react-native
– sebinq
Dec 13 '18 at 6:34
Thank you! hope it will help to somebody :) I switched to react-native
– sebinq
Dec 13 '18 at 6:34
Thank you! hope it will help to somebody :) I switched to react-native
– sebinq
Dec 13 '18 at 6:34
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425329%2fcordova-react-with-hot-reload-while-development-mode%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
