How to import socket.io.client javascript in polymer 3 PWA starter kit app for server build
up vote
0
down vote
favorite
I am using a socket.io-client connection in my web component and need to import the socket.io-client java library (socket.io-client github).
Usage in web-component: var socket = io.connect(socket_url);
All ways to import the socket.io-client.js fail with using different import variants like the one below directly in my web component:
import io from 'socket.io-client'
I searched and found (solution) that socket.io-client provides no ES modules which polymer requires for import. The proposed solution taken from this answer suggests to include the socket.io javascript directly in the main index.html. So I am now importing the socket.io-client script in my index.html with
<script src="node_modules/socket.io-client/dist/socket.io.slim.js" crossorigin></script>
This solution works in development and testing with:
npm start
The build works and the application and socket implementation is working as expected at http://127.0.0.1:8081 in the browser.
But when I start the build process for production and serve with:
npm run build:prpl-server
npm run serve:prpl-server
...
prpl-server listening http://127.0.0.1:8080
The build is successful but the application fails to run in browser with the following error in the console:
Loading failed for the with source
“http://127.0.0.1:8080/es6-bundled/node_assets/socket.io-client/dist/socket.io.slim.js”.
So the socket.io...js file is not put/copied into the build folders during the build process. There is even no node_assets folder in the build directory. However the code and testing works - so the import and script seems to work correctly. I am doing something wrong for the final build but dont understand what.
So the question is how to correctly import the socket.io-client javascript in the index.html or web component to correctly output it into the final build?
sockets socket.io polymer web-component
asked Nov 9 at 15:55
datapool
254
add a comment |
up vote
0
down vote
favorite
I am using a socket.io-client connection in my web component and need to import the socket.io-client java library (socket.io-client github).
Usage in web-component: var socket = io.connect(socket_url);
All ways to import the socket.io-client.js fail with using different import variants like the one below directly in my web component:
import io from 'socket.io-client'
I searched and found (solution) that socket.io-client provides no ES modules which polymer requires for import. The proposed solution taken from this answer suggests to include the socket.io javascript directly in the main index.html. So I am now importing the socket.io-client script in my index.html with
<script src="node_modules/socket.io-client/dist/socket.io.slim.js" crossorigin></script>
This solution works in development and testing with:
npm start
The build works and the application and socket implementation is working as expected at http://127.0.0.1:8081 in the browser.
But when I start the build process for production and serve with:
npm run build:prpl-server
npm run serve:prpl-server
...
prpl-server listening http://127.0.0.1:8080
The build is successful but the application fails to run in browser with the following error in the console:
Loading failed for the with source
“http://127.0.0.1:8080/es6-bundled/node_assets/socket.io-client/dist/socket.io.slim.js”.
So the socket.io...js file is not put/copied into the build folders during the build process. There is even no node_assets folder in the build directory. However the code and testing works - so the import and script seems to work correctly. I am doing something wrong for the final build but dont understand what.
So the question is how to correctly import the socket.io-client javascript in the index.html or web component to correctly output it into the final build?
sockets socket.io polymer web-component
asked Nov 9 at 15:55
datapool
254
I think you need to add"node_modules/socket.io-client/dist/**"to theextraDependenciespart of the polymer.json in order for the build process to take the files in account
– Alan Dávalos
Nov 9 at 19:09
simple. That did it. Thanks for your help
– datapool
Nov 10 at 8:07
Great, I'll add it as an answer so you can accept it and close this question
– Alan Dávalos
Nov 10 at 8:11
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am using a socket.io-client connection in my web component and need to import the socket.io-client java library (socket.io-client github).
Usage in web-component: var socket = io.connect(socket_url);
All ways to import the socket.io-client.js fail with using different import variants like the one below directly in my web component:
import io from 'socket.io-client'
I searched and found (solution) that socket.io-client provides no ES modules which polymer requires for import. The proposed solution taken from this answer suggests to include the socket.io javascript directly in the main index.html. So I am now importing the socket.io-client script in my index.html with
<script src="node_modules/socket.io-client/dist/socket.io.slim.js" crossorigin></script>
This solution works in development and testing with:
npm start
The build works and the application and socket implementation is working as expected at http://127.0.0.1:8081 in the browser.
But when I start the build process for production and serve with:
npm run build:prpl-server
npm run serve:prpl-server
...
prpl-server listening http://127.0.0.1:8080
The build is successful but the application fails to run in browser with the following error in the console:
Loading failed for the with source
“http://127.0.0.1:8080/es6-bundled/node_assets/socket.io-client/dist/socket.io.slim.js”.
So the socket.io...js file is not put/copied into the build folders during the build process. There is even no node_assets folder in the build directory. However the code and testing works - so the import and script seems to work correctly. I am doing something wrong for the final build but dont understand what.
So the question is how to correctly import the socket.io-client javascript in the index.html or web component to correctly output it into the final build?
sockets socket.io polymer web-component
asked Nov 9 at 15:55
datapool
254
I am using a socket.io-client connection in my web component and need to import the socket.io-client java library (socket.io-client github).
Usage in web-component: var socket = io.connect(socket_url);
All ways to import the socket.io-client.js fail with using different import variants like the one below directly in my web component:
import io from 'socket.io-client'
I searched and found (solution) that socket.io-client provides no ES modules which polymer requires for import. The proposed solution taken from this answer suggests to include the socket.io javascript directly in the main index.html. So I am now importing the socket.io-client script in my index.html with
<script src="node_modules/socket.io-client/dist/socket.io.slim.js" crossorigin></script>
This solution works in development and testing with:
npm start
The build works and the application and socket implementation is working as expected at http://127.0.0.1:8081 in the browser.
But when I start the build process for production and serve with:
npm run build:prpl-server
npm run serve:prpl-server
...
prpl-server listening http://127.0.0.1:8080
The build is successful but the application fails to run in browser with the following error in the console:
Loading failed for the with source
“http://127.0.0.1:8080/es6-bundled/node_assets/socket.io-client/dist/socket.io.slim.js”.
So the socket.io...js file is not put/copied into the build folders during the build process. There is even no node_assets folder in the build directory. However the code and testing works - so the import and script seems to work correctly. I am doing something wrong for the final build but dont understand what.
So the question is how to correctly import the socket.io-client javascript in the index.html or web component to correctly output it into the final build?
sockets socket.io polymer web-component
sockets socket.io polymer web-component
asked Nov 9 at 15:55
datapool
254
asked Nov 9 at 15:55
datapool
254
asked Nov 9 at 15:55
datapool
254
asked Nov 9 at 15:55
datapool
254
asked Nov 9 at 15:55
datapool
254
254
I think you need to add"node_modules/socket.io-client/dist/**"to theextraDependenciespart of the polymer.json in order for the build process to take the files in account
– Alan Dávalos
Nov 9 at 19:09
simple. That did it. Thanks for your help
– datapool
Nov 10 at 8:07
Great, I'll add it as an answer so you can accept it and close this question
– Alan Dávalos
Nov 10 at 8:11
add a comment |
I think you need to add"node_modules/socket.io-client/dist/**"to theextraDependenciespart of the polymer.json in order for the build process to take the files in account
– Alan Dávalos
Nov 9 at 19:09
simple. That did it. Thanks for your help
– datapool
Nov 10 at 8:07
Great, I'll add it as an answer so you can accept it and close this question
– Alan Dávalos
Nov 10 at 8:11
I think you need to add
"node_modules/socket.io-client/dist/**" to the extraDependencies part of the polymer.json in order for the build process to take the files in account– Alan Dávalos
Nov 9 at 19:09
I think you need to add
"node_modules/socket.io-client/dist/**" to the extraDependencies part of the polymer.json in order for the build process to take the files in account– Alan Dávalos
Nov 9 at 19:09
simple. That did it. Thanks for your help
– datapool
Nov 10 at 8:07
simple. That did it. Thanks for your help
– datapool
Nov 10 at 8:07
Great, I'll add it as an answer so you can accept it and close this question
– Alan Dávalos
Nov 10 at 8:11
Great, I'll add it as an answer so you can accept it and close this question
– Alan Dávalos
Nov 10 at 8:11
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
I think you need to add "node_modules/socket.io-client/dist/**" to the extraDependencies part of the polymer.json in order for the build process to take the files in account
It would look something like this
{
"extraDependencies": [
"manifest.json",
"node_modules/@webcomponents/webcomponentsjs/**",
"push-manifest.json",
"node_modules/socket.io-client/dist/**"
]
}
answered Nov 10 at 8:13
Alan Dávalos
1,292516
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',
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%2f53229124%2fhow-to-import-socket-io-client-javascript-in-polymer-3-pwa-starter-kit-app-for-s%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
up vote
0
down vote
accepted
I think you need to add "node_modules/socket.io-client/dist/**" to the extraDependencies part of the polymer.json in order for the build process to take the files in account
It would look something like this
{
"extraDependencies": [
"manifest.json",
"node_modules/@webcomponents/webcomponentsjs/**",
"push-manifest.json",
"node_modules/socket.io-client/dist/**"
]
}
answered Nov 10 at 8:13
Alan Dávalos
1,292516
add a comment |
up vote
0
down vote
accepted
I think you need to add "node_modules/socket.io-client/dist/**" to the extraDependencies part of the polymer.json in order for the build process to take the files in account
It would look something like this
{
"extraDependencies": [
"manifest.json",
"node_modules/@webcomponents/webcomponentsjs/**",
"push-manifest.json",
"node_modules/socket.io-client/dist/**"
]
}
answered Nov 10 at 8:13
Alan Dávalos
1,292516
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
I think you need to add "node_modules/socket.io-client/dist/**" to the extraDependencies part of the polymer.json in order for the build process to take the files in account
It would look something like this
{
"extraDependencies": [
"manifest.json",
"node_modules/@webcomponents/webcomponentsjs/**",
"push-manifest.json",
"node_modules/socket.io-client/dist/**"
]
}
answered Nov 10 at 8:13
Alan Dávalos
1,292516
I think you need to add "node_modules/socket.io-client/dist/**" to the extraDependencies part of the polymer.json in order for the build process to take the files in account
It would look something like this
{
"extraDependencies": [
"manifest.json",
"node_modules/@webcomponents/webcomponentsjs/**",
"push-manifest.json",
"node_modules/socket.io-client/dist/**"
]
}
answered Nov 10 at 8:13
Alan Dávalos
1,292516
answered Nov 10 at 8:13
Alan Dávalos
1,292516
answered Nov 10 at 8:13
Alan Dávalos
1,292516
answered Nov 10 at 8:13
Alan Dávalos
1,292516
1,292516
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53229124%2fhow-to-import-socket-io-client-javascript-in-polymer-3-pwa-starter-kit-app-for-s%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
I think you need to add
"node_modules/socket.io-client/dist/**"to theextraDependenciespart of the polymer.json in order for the build process to take the files in account– Alan Dávalos
Nov 9 at 19:09
simple. That did it. Thanks for your help
– datapool
Nov 10 at 8:07
Great, I'll add it as an answer so you can accept it and close this question
– Alan Dávalos
Nov 10 at 8:11