horrific
/
horrific.dev
2
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

configure SSR

svelte
James Fenn 7 months ago
parent
b6290db77f
commit
a63fa6c3f9
8 changed files with 132 additions and 34 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      .gitignore
  2. +11
    -4
      package.json
  3. +1
    -0
      public/index.html
  4. +71
    -24
      rollup.config.js
  5. +26
    -0
      server/index.ts
  6. +7
    -3
      src/main.ts
  7. +3
    -3
      tsconfig.json
  8. +12
    -0
      tsconfig.server.json

+ 1
- 0
.gitignore View File

@@ -1,6 +1,7 @@
node_modules/
/public/build/
/public/global.css*
/server/build/
.vscode/
.DS_Store
package-install.lock


+ 11
- 4
package.json View File

@@ -1,10 +1,10 @@
{
"name": "svelte-app",
"name": "horrific.dev",
"version": "1.0.0",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w",
"start": "sirv public --single",
"start": "cd server/build; node index.js",
"validate": "svelte-check"
},
"devDependencies": {
@@ -12,11 +12,18 @@
"@rollup/plugin-commonjs": "^12.0.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-node-resolve": "^8.0.0",
"@rollup/plugin-replace": "^2.3.3",
"@rollup/plugin-typescript": "^4.0.0",
"@tsconfig/svelte": "^1.0.0",
"@types/express": "^4.17.7",
"@types/node": "^14.0.27",
"autoprefixer": "^9.8.6",
"cssnano": "^4.1.10",
"express": "^4.17.1",
"fs": "^0.0.1-security",
"http": "^0.0.1-security",
"mdsvex": "^0.8.3",
"path": "^0.12.7",
"postcss-cli": "^7.1.1",
"rollup": "^2.3.4",
"rollup-plugin-livereload": "^1.0.0",
@@ -31,7 +38,7 @@
"typescript": "^3.9.3"
},
"dependencies": {
"marked": "^1.1.1",
"sirv-cli": "^1.0.0"
"isomorphic-fetch": "^2.2.1",
"marked": "^1.1.1"
}
}

+ 1
- 0
public/index.html View File

@@ -39,5 +39,6 @@
</head>

<body class="nav-container footer-container">
{content}
</body>
</html>

+ 71
- 24
rollup.config.js View File

@@ -1,12 +1,13 @@
import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import json from '@rollup/plugin-json';
import replace from '@rollup/plugin-replace';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import preprocess from 'svelte-preprocess';
import { mdsvex } from 'mdsvex';
import typescript from '@rollup/plugin-typescript';

const production = !process.env.ROLLUP_WATCH;

@@ -31,7 +32,31 @@ function serve() {
};
}

export default {
const sharedPlugins = (opts) => [
svelte(Object.assign({
hydratable: true,
extensions: ['.svelte', '.svx'],
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('public/build/bundle.css');
},
preprocess: [
preprocess(),
mdsvex()
]
}, opts.svelte || {})),
commonjs(),
typescript({
tsconfig: opts.tsconfig || 'tsconfig.json',
sourceMap: !production
}),
json()
];

export default [{
input: 'src/main.ts',
output: {
sourcemap: true,
@@ -40,21 +65,6 @@ export default {
file: 'public/build/bundle.js'
},
plugins: [
svelte({
extensions: ['.svelte', '.svx'],
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file - better for performance
css: css => {
css.write('public/build/bundle.css');
},
preprocess: [
preprocess(),
mdsvex()
]
}),

// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
@@ -64,13 +74,8 @@ export default {
browser: true,
dedupe: ['svelte']
}),
commonjs(),
typescript({ sourceMap: !production }),
json(),

// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
...sharedPlugins({}),

// Watch the `public` directory and refresh the
// browser on changes when not in production
@@ -83,4 +88,46 @@ export default {
watch: {
clearScreen: false
}
};
},{
input: ['src/main.ts', 'src/App.svelte'],
output: {
format: 'cjs',
name: 'main',
dir: 'server/build/'
},
plugins: [
replace({
"App.svelte": "App.js"
}),
resolve(),
...sharedPlugins({
tsconfig: "tsconfig.server.json",
svelte: { generate: 'ssr' }
})
],
external: ['fs', 'path', 'http']
},{
input: 'server/index.ts',
output: {
format: 'cjs',
name: 'server',
dir: 'server/build/'
},
plugins: [
replace({
"'../public/": "'../../public/",
"../src/": "./",
delimiters: ['', '']
}),
resolve(),
...sharedPlugins({
tsconfig: "tsconfig.server.json",
svelte: { generate: 'ssr' }
}),

// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve()
],
external: ['fs', 'path', 'http']
}];

+ 26
- 0
server/index.ts View File

@@ -0,0 +1,26 @@
import 'isomorphic-fetch';

import express from 'express';
import { promises as fs } from 'fs';
import main from '../src/main';

const HTTP_PORT = 3000;

const app = express();

app.use(express.static('../public/', { index: false }));

app.get('*', async (req, res) => {
let html = await fs.readFile('../public/index.html', 'utf-8');

console.log(`Rendering: ${req.method} ${req.url}`);

let render = main.render({ url: req.url });
html = html.replace("{content}", render.html);

res.set('Content-Type', "text/html");
res.end(html);
});

app.listen(HTTP_PORT, () => { console.log(`Listening at http://localhost:${HTTP_PORT}`) })


+ 7
- 3
src/main.ts View File

@@ -1,7 +1,11 @@
import App from './App.svelte';

const app = new App({
target: document.body
});
let app: any = App;
if (typeof document != 'undefined') {
app = new App({
target: document.body,
hydrate: true
});
}

export default app;

+ 3
- 3
tsconfig.json View File

@@ -1,6 +1,6 @@
{
"extends": "./node_modules/@tsconfig/svelte/tsconfig.json",
"extends": "./node_modules/@tsconfig/svelte/tsconfig.json",

"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
"include": ["src/**/*"],
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
}

+ 12
- 0
tsconfig.server.json View File

@@ -0,0 +1,12 @@
{
"extends": "./tsconfig.json",
"include": ["src/**/*", "server/**/*"],
"compilerOptions": {
"module": "commonjs",
"types": ["svelte", "node"],
"typeRoots": [
"src/@types",
"node_modules/@types"
]
}
}

Write Preview
Loading…
Cancel
Save