Skip to content

Commit 210b535

Browse files
ArtoriasArtorias
Artorias
authored and
Artorias
committed
everything working
1 parent 9eddeeb commit 210b535

File tree

6 files changed

+59
-35
lines changed

6 files changed

+59
-35
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
This is a Elm ssr experiment, it uses Razzle to server the http responses.
44
`razzle.config.js` is the equivalent to `webpack.config.js`
55

6-
### This repository still wip, I need to implement HMR, the "elm-hot-loader" library don't work with razzle
6+
This repo constains an example of how to make Server side rendering with Elm and Razzle, also has hot code reloading!
77

88
## To run:
99

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
"start": "razzle start",
88
"build": "razzle build",
99
"test": "razzle test --env=jsdom",
10-
"start:prod": "NODE_ENV=production node build/server.js"
10+
"start:prod": "set NODE_ENV=production&&node build/server.js"
1111
},
1212
"dependencies": {
1313
"elm-hot-loader": "^0.5.4",

‎razzle.config.js

Lines changed: 36 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,49 @@ module.exports = {
66

77
appConfig.module.rules[2].exclude.push(/\.(elm)$/)
88

9+
appConfig.module.noParse = [/.elm$/]
910
appConfig.resolve.extensions = config.resolve.extensions.concat([
1011
'.elm'
1112
]);
12-
// appConfig.module.noParse = /.elm$/
13-
// appConfig.entry = './src/client.js'
14-
appConfig.module.rules.push(
13+
14+
if(dev) {
15+
appConfig.module.rules.push(
1516
{
1617
test: /\.elm$/,
1718
exclude: [/elm-stuff/, /node_modules/],
18-
loader: require.resolve('elm-webpack-loader'),
19-
options: {
20-
verbose: true,
21-
warn: true
22-
}
19+
use: [
20+
{
21+
loader: 'elm-hot-loader'
22+
},
23+
{
24+
loader: 'elm-webpack-loader',
25+
options: {
26+
verbose: true,
27+
warn: true,
28+
// debug: true,
29+
pathToMake: require('elm/platform').executablePaths['elm-make'],
30+
forceWatch: true
31+
}
32+
}
33+
],
2334
})
24-
35+
}
36+
else { // Production
37+
appConfig.module.rules.push(
38+
{
39+
test: /\.elm$/,
40+
exclude: [/elm-stuff/, /node_modules/],
41+
use: [
42+
{
43+
loader: 'elm-webpack-loader',
44+
options: {
45+
pathToMake: require('elm/platform').executablePaths['elm-make'],
46+
}
47+
}
48+
],
49+
})
50+
}
51+
2552
return appConfig;
2653
},
2754
};

‎src/Main.elm

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ module Main exposing (main)
22

33
import Html
44
import App exposing (init, update, view)
5-
5+
66
main : Program Never App.Model App.Msg
77
main =
88
Html.program

‎src/client.js

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,8 @@
11
var Elm = require('./Main');
22

3-
// I think is better call this at the end of the body tag, the bundle up and the script down
3+
// We need embed the Elm app to the div, if we call fullscreen we will have duplicated html
44
Elm.Main.embed( document.getElementById( "root" ) );
55

66
if (module.hot) {
77
module.hot.accept();
8-
module.hot.accept('./Main', () => {
9-
const nextElm = require('./Main').Main;
10-
nextElm.embed( document.getElementById( "root" ) );
11-
})
128
}

‎src/server.js

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import elmStaticHtml from "elm-static-html-lib";
22
import express from 'express';
3+
require('./Main');
34

45
const assets = require(process.env.RAZZLE_ASSETS_MANIFEST);
56

@@ -16,24 +17,24 @@ server
1617
const markup = generatedHtml;
1718
res.send(
1819
`<!doctype html>
19-
<html lang="">
20-
<head>
21-
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
22-
<meta charSet='utf-8' />
23-
<title>Welcome to Razzle</title>
24-
<meta name="viewport" content="width=device-width, initial-scale=1">
25-
${assets.client.css
26-
? `<link rel="stylesheet" href="${assets.client.css}">`
27-
: ''}
28-
29-
</head>
30-
<body>
31-
<div id="root">${markup}</div>
32-
</body>
33-
${process.env.NODE_ENV === 'production'
34-
? `<script src="${assets.client.js}"></script>`
35-
: `<script src="${assets.client.js}"></script>`}
36-
</html>`
20+
<html lang="">
21+
<head>
22+
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
23+
<meta charSet='utf-8' />
24+
<title>Welcome to Razzle</title>
25+
<meta name="viewport" content="width=device-width, initial-scale=1">
26+
${assets.client.css
27+
? `<link rel="stylesheet" href="${assets.client.css}">`
28+
: ''}
29+
30+
</head>
31+
<body>
32+
<div id="root">${markup}</div>
33+
</body>
34+
${process.env.NODE_ENV === 'production'
35+
? `<script src="${assets.client.js}"></script>`
36+
: `<script src="${assets.client.js}"></script>`}
37+
</html>`
3738
);
3839
}).catch((error) => {
3940
console.log(error);

0 commit comments

Comments
 (0)