Svelte server side rendering tool
This tool gives an ability to run express.js server to render svelte.js application on server side with functionality to preload svelte.js application data via api requests before send response to client.
Take a look at fully packed example of integration with webpack in svelte-ssr-template-webpack.
⚠️ Currently this tool supports only webpack.js assets bundler.
How it works?
You can run this tool in production or development modes.
How it works in production mode?
Firstly you have to build your app with assets bundler.
As output you need client.js
and server.js
.
Then you need to start server.js
with node.js
and this service will perform server side rendering requests.
How it works in development mode?
In development mode this tool will launch development server for client.js
and server.js
and node.js
service to perform server side rendering requests.
How to install it?
1. Install via npm
npm install --save svelte-ssr
How to setup it?
1. Create index.html
file inside src
folder
1. Create App.svelte
file inside src
folder
<!-- render content -->
3. Create server.js
file inside src
folder
;;; // create plain express serverconst app = ; // resolve command line argumentsconst port base staticProxyPort staticPathToDirectory = ; // serve static content with the magic middleware// if both development severs are running - this middleware// serve files from client development server portapp; // serve content to render based on desired template// and render request content inside the targetconst targetSelector = '#root';const pathToTemplate = path;app; // redirect all not resolved requests to the baseapp; // log into console all errorsapp; // listen desired port by the server and clean server instance on node application exit eventconst instance = ;;
4. Create client.js
file inside src
folder
// import core dependencies;; // import application styles; // render application inside the target;
5. Create webpack.config.server.js
file
const path = ;const createWebpackServerConfig = ; const config = ; module { return ;};
6. Create webpack.config.client.js
file
const path = ;const HtmlWebpackPlugin = ;const MiniCssExtractPlugin = ;const addWebpackProductionHash createWebpackClientConfig = ; const config = ; module { return ;};
6. Add the following scripts to your package.json
file
7. Run in development
mode
npm run start
8. Run in production
mode
npm run buildnpm run production
How to configure it?
This tool has a help to display all supported commands and options.
$ ./node_modules/.bin/svelte-ssr help Usage: svelte-ssr [options] [command] Tool to launch server side rendering service Options: -V, --version output the version number -h, --help output usage information Commands: build [options] Build client and server entries development [options] Launch client and server development servers and node server to serve server side rendering production [options] Launch node server to serve server side rendering
Build command
$ ./node_modules/.bin/svelte-ssr build --helpUsage: svelte-ssr build [options] Build client and server entries Options: -b, --bundler <webpack> Which tool to use to bundle assets -c, --client-config <config.client.js> Path to bundler tool client config -s --server-config <config.server.js> Path to bundler tool server config
Development command
$ ./node_modules/.bin/svelte-ssr development --helpUsage: svelte-ssr development [options] Launch client and server development servers and node server to serve server side rendering Options: -b, --bundler <webpack> Which tool to use to bundle assets --base </> Base html tag to listen
Production command
$ ./node_modules/.bin/svelte-ssr production --helpUsage: svelte-ssr production [options] Launch node server to serve server side rendering Options: -b, --bundler <webpack> Which tool to use to bundle assets --base </> Base html tag to listen