Mixing
Server side rendering with express + ReactJS + Webpack 4 2019
Could you please help me with server side rendering ??
I am using webpack 4, with react js and express,I have been following tutorials to setup server side rendering in my express app,these tutorials that I am trying to learn from are deprecated so its upto me to understand the concept and use updated code in my application.
The issue here is I am not an expert in webpack or babel so while I theoretically understand the concept behind the tutorial,I am having a hard time implementing it.
I was refering to these tutorials:
https://www.youtube.com/watch?v=tsEHfL-Ul1Y,
https://dev.to/aurelkurtula/setting-up-a-minimal-node-environment-with-webpack-and-babel--1j04,
The best I could do is achieve server side rendering without JSX.
https://github.com/xxxgrime/ssrerror
this is the repo
with webpack and babel setup when I try npm run start I get
windows is not defined
.Could someone please help me with this or maybe direct me to a updated tutorial or related resources??
this is my Webpack Config
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
const serverConfig = {
entry: "./src/server/index.js",
target: "node",
output: {
path: path.resolve(__dirname, ""),
filename: 'server.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
}
}
const browserConfig = {
entry: "./src/browser",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlPlugin]
}
module.exports = [serverConfig,browserConfig]javascript node.js reactjs webpack
edited Jan 3 at 8:58
wanttobeprofessional
1,02931323
asked Jan 2 at 19:02
xxxgrimexxxgrime
166
add a comment |
Could you please help me with server side rendering ??
I am using webpack 4, with react js and express,I have been following tutorials to setup server side rendering in my express app,these tutorials that I am trying to learn from are deprecated so its upto me to understand the concept and use updated code in my application.
The issue here is I am not an expert in webpack or babel so while I theoretically understand the concept behind the tutorial,I am having a hard time implementing it.
I was refering to these tutorials:
https://www.youtube.com/watch?v=tsEHfL-Ul1Y,
https://dev.to/aurelkurtula/setting-up-a-minimal-node-environment-with-webpack-and-babel--1j04,
The best I could do is achieve server side rendering without JSX.
https://github.com/xxxgrime/ssrerror
this is the repo
with webpack and babel setup when I try npm run start I get
windows is not defined
.Could someone please help me with this or maybe direct me to a updated tutorial or related resources??
this is my Webpack Config
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
const serverConfig = {
entry: "./src/server/index.js",
target: "node",
output: {
path: path.resolve(__dirname, ""),
filename: 'server.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
}
}
const browserConfig = {
entry: "./src/browser",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlPlugin]
}
module.exports = [serverConfig,browserConfig]javascript node.js reactjs webpack
edited Jan 3 at 8:58
wanttobeprofessional
1,02931323
asked Jan 2 at 19:02
xxxgrimexxxgrime
166
What specifically are you confused about, or where are you running into problems? Or is it just setting up the enviornment and understanding how the tools communicate with one another?
– dsomel21
Jan 2 at 19:21
I am having trouble setting up the environment, I understand that I would need babel to enable jsx on the server,could you spare a second and check out my config file and my repo github.com/xxxgrime/ssrerror/blob/master/webpack.config.js
– xxxgrime
Jan 2 at 19:36
add a comment |
Could you please help me with server side rendering ??
I am using webpack 4, with react js and express,I have been following tutorials to setup server side rendering in my express app,these tutorials that I am trying to learn from are deprecated so its upto me to understand the concept and use updated code in my application.
The issue here is I am not an expert in webpack or babel so while I theoretically understand the concept behind the tutorial,I am having a hard time implementing it.
I was refering to these tutorials:
https://www.youtube.com/watch?v=tsEHfL-Ul1Y,
https://dev.to/aurelkurtula/setting-up-a-minimal-node-environment-with-webpack-and-babel--1j04,
The best I could do is achieve server side rendering without JSX.
https://github.com/xxxgrime/ssrerror
this is the repo
with webpack and babel setup when I try npm run start I get
windows is not defined
.Could someone please help me with this or maybe direct me to a updated tutorial or related resources??
this is my Webpack Config
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
const serverConfig = {
entry: "./src/server/index.js",
target: "node",
output: {
path: path.resolve(__dirname, ""),
filename: 'server.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
}
}
const browserConfig = {
entry: "./src/browser",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlPlugin]
}
module.exports = [serverConfig,browserConfig]javascript node.js reactjs webpack
edited Jan 3 at 8:58
wanttobeprofessional
1,02931323
asked Jan 2 at 19:02
xxxgrimexxxgrime
166
Could you please help me with server side rendering ??
I am using webpack 4, with react js and express,I have been following tutorials to setup server side rendering in my express app,these tutorials that I am trying to learn from are deprecated so its upto me to understand the concept and use updated code in my application.
The issue here is I am not an expert in webpack or babel so while I theoretically understand the concept behind the tutorial,I am having a hard time implementing it.
I was refering to these tutorials:
https://www.youtube.com/watch?v=tsEHfL-Ul1Y,
https://dev.to/aurelkurtula/setting-up-a-minimal-node-environment-with-webpack-and-babel--1j04,
The best I could do is achieve server side rendering without JSX.
https://github.com/xxxgrime/ssrerror
this is the repo
with webpack and babel setup when I try npm run start I get
windows is not defined
.Could someone please help me with this or maybe direct me to a updated tutorial or related resources??
this is my Webpack Config
const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
const serverConfig = {
entry: "./src/server/index.js",
target: "node",
output: {
path: path.resolve(__dirname, ""),
filename: 'server.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
}
}
const browserConfig = {
entry: "./src/browser",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlPlugin]
}
module.exports = [serverConfig,browserConfig]const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
const serverConfig = {
entry: "./src/server/index.js",
target: "node",
output: {
path: path.resolve(__dirname, ""),
filename: 'server.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
}
}
const browserConfig = {
entry: "./src/browser",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlPlugin]
}
module.exports = [serverConfig,browserConfig]const HtmlWebPackPlugin = require("html-webpack-plugin");
var path = require('path');
const htmlPlugin = new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
});
const serverConfig = {
entry: "./src/server/index.js",
target: "node",
output: {
path: path.resolve(__dirname, ""),
filename: 'server.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
}
}
const browserConfig = {
entry: "./src/browser",
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index_bundle.js'
},
module: {
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: "[name]_[local]_[hash:base64]",
sourceMap: true,
minimize: true
}
}
]
}
]
},
plugins: [htmlPlugin]
}
module.exports = [serverConfig,browserConfig]javascript node.js reactjs webpack
javascript node.js reactjs webpack
edited Jan 3 at 8:58
wanttobeprofessional
1,02931323
asked Jan 2 at 19:02
xxxgrimexxxgrime
166
edited Jan 3 at 8:58
wanttobeprofessional
1,02931323
asked Jan 2 at 19:02
xxxgrimexxxgrime
166
edited Jan 3 at 8:58
wanttobeprofessional
1,02931323
edited Jan 3 at 8:58
wanttobeprofessional
1,02931323
edited Jan 3 at 8:58
wanttobeprofessional
1,02931323
1,02931323
asked Jan 2 at 19:02
xxxgrimexxxgrime
166
asked Jan 2 at 19:02
xxxgrimexxxgrime
166
asked Jan 2 at 19:02
xxxgrimexxxgrime
166
166
What specifically are you confused about, or where are you running into problems? Or is it just setting up the enviornment and understanding how the tools communicate with one another?
– dsomel21
Jan 2 at 19:21
I am having trouble setting up the environment, I understand that I would need babel to enable jsx on the server,could you spare a second and check out my config file and my repo github.com/xxxgrime/ssrerror/blob/master/webpack.config.js
– xxxgrime
Jan 2 at 19:36
add a comment |
What specifically are you confused about, or where are you running into problems? Or is it just setting up the enviornment and understanding how the tools communicate with one another?
– dsomel21
Jan 2 at 19:21
I am having trouble setting up the environment, I understand that I would need babel to enable jsx on the server,could you spare a second and check out my config file and my repo github.com/xxxgrime/ssrerror/blob/master/webpack.config.js
– xxxgrime
Jan 2 at 19:36
What specifically are you confused about, or where are you running into problems? Or is it just setting up the enviornment and understanding how the tools communicate with one another?
– dsomel21
Jan 2 at 19:21
What specifically are you confused about, or where are you running into problems? Or is it just setting up the enviornment and understanding how the tools communicate with one another?
– dsomel21
Jan 2 at 19:21
I am having trouble setting up the environment, I understand that I would need babel to enable jsx on the server,could you spare a second and check out my config file and my repo github.com/xxxgrime/ssrerror/blob/master/webpack.config.js
– xxxgrime
Jan 2 at 19:36
I am having trouble setting up the environment, I understand that I would need babel to enable jsx on the server,could you spare a second and check out my config file and my repo github.com/xxxgrime/ssrerror/blob/master/webpack.config.js
– xxxgrime
Jan 2 at 19:36
add a comment |
2 Answers
2
active
oldest
votes
So i figured out the solution to my problem,there is'nt a something wrong with my config files,I get windows undefined because of the way I was importing styles in my app
for more information check this out
window is not defined ( webpack and reactJS )
answered Jan 3 at 7:57
xxxgrimexxxgrime
166
add a comment |
I'm not sure if this helps, but if server side rendering is an option I created a tool to do this with plain HTML -- since it's mainly just targeting patterns for replacement it ought to work with JSX, as well:
https://www.npmjs.com/package/ezrender
answered Jan 18 at 16:50
Cody CodersonCody Coderson
11
If you're not sure, why not make sure before post an answer. And this can be a comment instead of an answer.
– Tiw
Jan 19 at 4:45
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%2f54011789%2fserver-side-rendering-with-express-reactjs-webpack-4-2019%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
So i figured out the solution to my problem,there is'nt a something wrong with my config files,I get windows undefined because of the way I was importing styles in my app
for more information check this out
window is not defined ( webpack and reactJS )
answered Jan 3 at 7:57
xxxgrimexxxgrime
166
add a comment |
So i figured out the solution to my problem,there is'nt a something wrong with my config files,I get windows undefined because of the way I was importing styles in my app
for more information check this out
window is not defined ( webpack and reactJS )
answered Jan 3 at 7:57
xxxgrimexxxgrime
166
add a comment |
So i figured out the solution to my problem,there is'nt a something wrong with my config files,I get windows undefined because of the way I was importing styles in my app
for more information check this out
window is not defined ( webpack and reactJS )
answered Jan 3 at 7:57
xxxgrimexxxgrime
166
So i figured out the solution to my problem,there is'nt a something wrong with my config files,I get windows undefined because of the way I was importing styles in my app
for more information check this out
window is not defined ( webpack and reactJS )
answered Jan 3 at 7:57
xxxgrimexxxgrime
166
answered Jan 3 at 7:57
xxxgrimexxxgrime
166
answered Jan 3 at 7:57
xxxgrimexxxgrime
166
answered Jan 3 at 7:57
xxxgrimexxxgrime
166
166
add a comment |
add a comment |
I'm not sure if this helps, but if server side rendering is an option I created a tool to do this with plain HTML -- since it's mainly just targeting patterns for replacement it ought to work with JSX, as well:
https://www.npmjs.com/package/ezrender
answered Jan 18 at 16:50
Cody CodersonCody Coderson
11
If you're not sure, why not make sure before post an answer. And this can be a comment instead of an answer.
– Tiw
Jan 19 at 4:45
add a comment |
I'm not sure if this helps, but if server side rendering is an option I created a tool to do this with plain HTML -- since it's mainly just targeting patterns for replacement it ought to work with JSX, as well:
https://www.npmjs.com/package/ezrender
answered Jan 18 at 16:50
Cody CodersonCody Coderson
11
If you're not sure, why not make sure before post an answer. And this can be a comment instead of an answer.
– Tiw
Jan 19 at 4:45
add a comment |
I'm not sure if this helps, but if server side rendering is an option I created a tool to do this with plain HTML -- since it's mainly just targeting patterns for replacement it ought to work with JSX, as well:
https://www.npmjs.com/package/ezrender
answered Jan 18 at 16:50
Cody CodersonCody Coderson
11
I'm not sure if this helps, but if server side rendering is an option I created a tool to do this with plain HTML -- since it's mainly just targeting patterns for replacement it ought to work with JSX, as well:
https://www.npmjs.com/package/ezrender
answered Jan 18 at 16:50
Cody CodersonCody Coderson
11
answered Jan 18 at 16:50
Cody CodersonCody Coderson
11
answered Jan 18 at 16:50
Cody CodersonCody Coderson
11
answered Jan 18 at 16:50
Cody CodersonCody Coderson
11
11
If you're not sure, why not make sure before post an answer. And this can be a comment instead of an answer.
– Tiw
Jan 19 at 4:45
add a comment |
If you're not sure, why not make sure before post an answer. And this can be a comment instead of an answer.
– Tiw
Jan 19 at 4:45
If you're not sure, why not make sure before post an answer. And this can be a comment instead of an answer.
– Tiw
Jan 19 at 4:45
If you're not sure, why not make sure before post an answer. And this can be a comment instead of an answer.
– Tiw
Jan 19 at 4:45
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%2f54011789%2fserver-side-rendering-with-express-reactjs-webpack-4-2019%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
What specifically are you confused about, or where are you running into problems? Or is it just setting up the enviornment and understanding how the tools communicate with one another?
– dsomel21
Jan 2 at 19:21
I am having trouble setting up the environment, I understand that I would need babel to enable jsx on the server,could you spare a second and check out my config file and my repo github.com/xxxgrime/ssrerror/blob/master/webpack.config.js
– xxxgrime
Jan 2 at 19:36