Can't find static folder in express bundled by webpack (SSR)
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I intend to do server side rendering in react with event handlers and I'm stuck on a problem on getting the index.js file be served in the localhost express server. Tried looking for several other answers here but I can't seem to wrap my head around this.
Here's the code.
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "./app/home/app";
import path from "path";
import fs from "fs";
let server = port => {
const app = express();
app.use('/js', express.static(path.resolve('/static')));
console.log(path.resolve('/static'));
console.log(path.join(__dirname, '/static'));
console.log(fs.existsSync(path.resolve('/static')));
app.get("/", (req, res) => {
res.status(200).send(renderMarkup(renderToString(<App />)));
});
app.get("/ping", (req, res) => {
res.status(200).send("HELLO!");
});
app.listen(port, () => console.log("Server Ready!"));
}
let renderMarkup = html => {
return `
<!DOCTYPE html>
<html>
<head>
<title>Webpack SSR Demo</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">${html}</div>
<script src="/js/index.js"></script>
</body>
</html>
`;
}
server(process.env.PORT || 8080);
I tried logging if my static directory exists. It returns a false although when I check my build folder (the output directory of the webpack bundle. It does exist).
My build folder directory is described below (rest assured all js bundles are built successfully):
build
|- static
|-- index.js
|- server.js
TLDR: The view is successfully rendered. The events are not working because the client side javascript is not being loaded.
javascript node.js express ssr
asked Jan 4 at 0:06
Franrey SayconFranrey Saycon
1099
|
show 3 more comments
I intend to do server side rendering in react with event handlers and I'm stuck on a problem on getting the index.js file be served in the localhost express server. Tried looking for several other answers here but I can't seem to wrap my head around this.
Here's the code.
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "./app/home/app";
import path from "path";
import fs from "fs";
let server = port => {
const app = express();
app.use('/js', express.static(path.resolve('/static')));
console.log(path.resolve('/static'));
console.log(path.join(__dirname, '/static'));
console.log(fs.existsSync(path.resolve('/static')));
app.get("/", (req, res) => {
res.status(200).send(renderMarkup(renderToString(<App />)));
});
app.get("/ping", (req, res) => {
res.status(200).send("HELLO!");
});
app.listen(port, () => console.log("Server Ready!"));
}
let renderMarkup = html => {
return `
<!DOCTYPE html>
<html>
<head>
<title>Webpack SSR Demo</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">${html}</div>
<script src="/js/index.js"></script>
</body>
</html>
`;
}
server(process.env.PORT || 8080);
I tried logging if my static directory exists. It returns a false although when I check my build folder (the output directory of the webpack bundle. It does exist).
My build folder directory is described below (rest assured all js bundles are built successfully):
build
|- static
|-- index.js
|- server.js
TLDR: The view is successfully rendered. The events are not working because the client side javascript is not being loaded.
javascript node.js express ssr
asked Jan 4 at 0:06
Franrey SayconFranrey Saycon
1099
So if the app is being rendered successfully, what does your network in chrome dev tools say? Where is it trying to fetch the JS bundles?
– joelgullander
Jan 4 at 0:16
localhost:8080/js/index.js it gives 404
– Franrey Saycon
Jan 4 at 0:24
.use(express.static(path.resolve(__dirname, '..', 'build'), { index: false, maxAge: 0 }))
– joelgullander
Jan 4 at 0:29
it's still a 404 @joelgullander what was the idea behind '..'
– Franrey Saycon
Jan 4 at 0:34
Didn't see you had server.js inside your ./build folder
– joelgullander
Jan 4 at 0:36
|
show 3 more comments
I intend to do server side rendering in react with event handlers and I'm stuck on a problem on getting the index.js file be served in the localhost express server. Tried looking for several other answers here but I can't seem to wrap my head around this.
Here's the code.
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "./app/home/app";
import path from "path";
import fs from "fs";
let server = port => {
const app = express();
app.use('/js', express.static(path.resolve('/static')));
console.log(path.resolve('/static'));
console.log(path.join(__dirname, '/static'));
console.log(fs.existsSync(path.resolve('/static')));
app.get("/", (req, res) => {
res.status(200).send(renderMarkup(renderToString(<App />)));
});
app.get("/ping", (req, res) => {
res.status(200).send("HELLO!");
});
app.listen(port, () => console.log("Server Ready!"));
}
let renderMarkup = html => {
return `
<!DOCTYPE html>
<html>
<head>
<title>Webpack SSR Demo</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">${html}</div>
<script src="/js/index.js"></script>
</body>
</html>
`;
}
server(process.env.PORT || 8080);
I tried logging if my static directory exists. It returns a false although when I check my build folder (the output directory of the webpack bundle. It does exist).
My build folder directory is described below (rest assured all js bundles are built successfully):
build
|- static
|-- index.js
|- server.js
TLDR: The view is successfully rendered. The events are not working because the client side javascript is not being loaded.
javascript node.js express ssr
asked Jan 4 at 0:06
Franrey SayconFranrey Saycon
1099
I intend to do server side rendering in react with event handlers and I'm stuck on a problem on getting the index.js file be served in the localhost express server. Tried looking for several other answers here but I can't seem to wrap my head around this.
Here's the code.
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "./app/home/app";
import path from "path";
import fs from "fs";
let server = port => {
const app = express();
app.use('/js', express.static(path.resolve('/static')));
console.log(path.resolve('/static'));
console.log(path.join(__dirname, '/static'));
console.log(fs.existsSync(path.resolve('/static')));
app.get("/", (req, res) => {
res.status(200).send(renderMarkup(renderToString(<App />)));
});
app.get("/ping", (req, res) => {
res.status(200).send("HELLO!");
});
app.listen(port, () => console.log("Server Ready!"));
}
let renderMarkup = html => {
return `
<!DOCTYPE html>
<html>
<head>
<title>Webpack SSR Demo</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">${html}</div>
<script src="/js/index.js"></script>
</body>
</html>
`;
}
server(process.env.PORT || 8080);
I tried logging if my static directory exists. It returns a false although when I check my build folder (the output directory of the webpack bundle. It does exist).
My build folder directory is described below (rest assured all js bundles are built successfully):
build
|- static
|-- index.js
|- server.js
TLDR: The view is successfully rendered. The events are not working because the client side javascript is not being loaded.
javascript node.js express ssr
javascript node.js express ssr
asked Jan 4 at 0:06
Franrey SayconFranrey Saycon
1099
asked Jan 4 at 0:06
Franrey SayconFranrey Saycon
1099
asked Jan 4 at 0:06
Franrey SayconFranrey Saycon
1099
asked Jan 4 at 0:06
Franrey SayconFranrey Saycon
1099
asked Jan 4 at 0:06
Franrey SayconFranrey Saycon
1099
1099
So if the app is being rendered successfully, what does your network in chrome dev tools say? Where is it trying to fetch the JS bundles?
– joelgullander
Jan 4 at 0:16
localhost:8080/js/index.js it gives 404
– Franrey Saycon
Jan 4 at 0:24
.use(express.static(path.resolve(__dirname, '..', 'build'), { index: false, maxAge: 0 }))
– joelgullander
Jan 4 at 0:29
it's still a 404 @joelgullander what was the idea behind '..'
– Franrey Saycon
Jan 4 at 0:34
Didn't see you had server.js inside your ./build folder
– joelgullander
Jan 4 at 0:36
|
show 3 more comments
So if the app is being rendered successfully, what does your network in chrome dev tools say? Where is it trying to fetch the JS bundles?
– joelgullander
Jan 4 at 0:16
localhost:8080/js/index.js it gives 404
– Franrey Saycon
Jan 4 at 0:24
.use(express.static(path.resolve(__dirname, '..', 'build'), { index: false, maxAge: 0 }))
– joelgullander
Jan 4 at 0:29
it's still a 404 @joelgullander what was the idea behind '..'
– Franrey Saycon
Jan 4 at 0:34
Didn't see you had server.js inside your ./build folder
– joelgullander
Jan 4 at 0:36
So if the app is being rendered successfully, what does your network in chrome dev tools say? Where is it trying to fetch the JS bundles?
– joelgullander
Jan 4 at 0:16
So if the app is being rendered successfully, what does your network in chrome dev tools say? Where is it trying to fetch the JS bundles?
– joelgullander
Jan 4 at 0:16
localhost:8080/js/index.js it gives 404
– Franrey Saycon
Jan 4 at 0:24
localhost:8080/js/index.js it gives 404
– Franrey Saycon
Jan 4 at 0:24
.use(express.static(path.resolve(__dirname, '..', 'build'), { index: false, maxAge: 0 }))
– joelgullander
Jan 4 at 0:29
.use(express.static(path.resolve(__dirname, '..', 'build'), { index: false, maxAge: 0 }))
– joelgullander
Jan 4 at 0:29
it's still a 404 @joelgullander what was the idea behind '..'
– Franrey Saycon
Jan 4 at 0:34
it's still a 404 @joelgullander what was the idea behind '..'
– Franrey Saycon
Jan 4 at 0:34
Didn't see you had server.js inside your ./build folder
– joelgullander
Jan 4 at 0:36
Didn't see you had server.js inside your ./build folder
– joelgullander
Jan 4 at 0:36
|
show 3 more comments
1 Answer
1
active
oldest
votes
After scouring a lot of questions, github issues and reading the bundled js.
It wasn't a problem with the server code.
See: https://github.com/webpack/webpack/issues/1599
I needed to add this to my webpack.server.js:
node: {
__dirname: false,
},
answered Jan 4 at 0:49
Franrey SayconFranrey Saycon
1099
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%2f54031513%2fcant-find-static-folder-in-express-bundled-by-webpack-ssr%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
After scouring a lot of questions, github issues and reading the bundled js.
It wasn't a problem with the server code.
See: https://github.com/webpack/webpack/issues/1599
I needed to add this to my webpack.server.js:
node: {
__dirname: false,
},
answered Jan 4 at 0:49
Franrey SayconFranrey Saycon
1099
add a comment |
After scouring a lot of questions, github issues and reading the bundled js.
It wasn't a problem with the server code.
See: https://github.com/webpack/webpack/issues/1599
I needed to add this to my webpack.server.js:
node: {
__dirname: false,
},
answered Jan 4 at 0:49
Franrey SayconFranrey Saycon
1099
add a comment |
After scouring a lot of questions, github issues and reading the bundled js.
It wasn't a problem with the server code.
See: https://github.com/webpack/webpack/issues/1599
I needed to add this to my webpack.server.js:
node: {
__dirname: false,
},
answered Jan 4 at 0:49
Franrey SayconFranrey Saycon
1099
After scouring a lot of questions, github issues and reading the bundled js.
It wasn't a problem with the server code.
See: https://github.com/webpack/webpack/issues/1599
I needed to add this to my webpack.server.js:
node: {
__dirname: false,
},
answered Jan 4 at 0:49
Franrey SayconFranrey Saycon
1099
answered Jan 4 at 0:49
Franrey SayconFranrey Saycon
1099
answered Jan 4 at 0:49
Franrey SayconFranrey Saycon
1099
answered Jan 4 at 0:49
Franrey SayconFranrey Saycon
1099
1099
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.
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%2f54031513%2fcant-find-static-folder-in-express-bundled-by-webpack-ssr%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
So if the app is being rendered successfully, what does your network in chrome dev tools say? Where is it trying to fetch the JS bundles?
– joelgullander
Jan 4 at 0:16
localhost:8080/js/index.js it gives 404
– Franrey Saycon
Jan 4 at 0:24
.use(express.static(path.resolve(__dirname, '..', 'build'), { index: false, maxAge: 0 }))
– joelgullander
Jan 4 at 0:29
it's still a 404 @joelgullander what was the idea behind '..'
– Franrey Saycon
Jan 4 at 0:34
Didn't see you had server.js inside your ./build folder
– joelgullander
Jan 4 at 0:36