npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

svelte-ssr

v0.0.28

Published

Tool to setup svelte server side rendering with webpack

Downloads

23

Readme

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. default scheme

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

1. Create App.svelte file inside src folder

<script context="module">
  /**
   * @param {{ base: string, path: string, inner: string, query: {} }} location - requested location
   * @param {resolveCallback} resolve - resolve prepared result
   * @param {{ redirect: redirectCallback }} helpers - preload helpers
   * @returns any
   */
  export async function preload(location, resolve, helpers) {
    // preload data with api requests for example via `axios`
    return { preloaded: { foo: 'bar' } };
  }
  /**
   * Return resolved candidate.
   * @callback resolveCallback
   * @param {any} candidate
   * @param {callback} prepare
   */
  /**
   * Return redirect instance.
   * @callback redirectCallback
   * @param {number} status
   * @param {string} url
   */
</script>

<script>
  // `client`, `server` or `node`
  export let entry = process.env.ENTRY;

  // this property will be available
  // only in server side rendering scenario
  export let path = undefined;
  
  // data which has been preloaded
  // from the preload method
  export let preloaded = {};
</script>

<div id="app">
  <!-- render content -->
</div>

3. Create server.js file inside src folder

import path from 'path';
import {
  cleanServerInstanceOnExit,
  createCatchMiddleware,
  createRedirectMiddleware,
  createRenderMiddleware,
  createServer,
  createServerInstance,
  createStaticMiddleware,
  resolveCommandOptions
} from 'svelte-ssr/server';
import component, { preload } from './App.svelte';

// create plain express server
const app = createServer();

// resolve command line arguments
const { port, base, staticProxyPort, staticPathToDirectory } = resolveCommandOptions();

// serve static content with the magic middleware
// if both development severs are running - this middleware
// serve files from client development server port
app.use(createStaticMiddleware({ base, staticProxyPort, staticPathToDirectory, verbose: true }));

// serve content to render based on desired template
// and render request content inside the target
const targetSelector = '#root';
const pathToTemplate = path.resolve(__dirname, '..', 'build', 'client', 'index.html');
app.use(createRenderMiddleware({
  base,
  component,
  preload,
  pathToTemplate,
  targetSelector,
  verbose: true,
  debug: true
}));

// redirect all not resolved requests to the base
app.use(createRedirectMiddleware({ base, verbose: true }));

// log into console all errors
app.use(createCatchMiddleware({ verbose: true }));

// listen desired port by the server and clean server instance on node application exit event
const instance = createServerInstance(app, port, () => console.log(`Server is ready on ':${port}'`));
cleanServerInstanceOnExit(instance);

4. Create client.js file inside src folder

// import core dependencies
import { renderClient } from 'svelte-ssr/client';
import component from './App.svelte';

// import application styles
import './styles/global.pcss';

// render application inside the target
renderClient({ component, target: '#root' });

5. Create webpack.config.server.js file

const path = require('path');
const { createWebpackServerConfig } = require('svelte-ssr/webpack');

const config = production => createWebpackServerConfig({
  resolve: {
    extensions: ['.mjs', '.js', '.svelte', '.json'],
    alias: {
      svelte: path.resolve(__dirname, 'node_modules', 'svelte')
    }
  },

  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: false,
            generate: 'ssr',
            hydratable: true,
            hotReload: true,
            dev: !production,
            preprocess: require('svelte-preprocess')({ postcss: true })
          }
        }
      },
      {
        test: [/\.css$/, /\.pcss$/],
        loader: 'null-loader'
      }
    ]
  }
}, { production });

module.exports = (_, { mode }) => {
  return config(mode === 'production');
};

6. Create webpack.config.client.js file

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { addWebpackProductionHash, createWebpackClientConfig } = require('svelte-ssr/webpack');

const config = production => createWebpackClientConfig({
  resolve: {
    extensions: ['.mjs', '.js', '.svelte', '.json'],
    alias: {
      svelte: path.resolve(__dirname, 'node_modules', 'svelte')
    }
  },

  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: 'svelte-loader',
          options: {
            emitCss: true,
            hydratable: true,
            hotReload: true,
            dev: !production,
            preprocess: require('svelte-preprocess')({ postcss: true })
          }
        }
      },
      {
        test: [/\.css$/, /\.pcss$/],
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: { hmr: !production }
          },
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: addWebpackProductionHash('[name].css', production)
    }),

    new HtmlWebpackPlugin({
      inject: true,
      template: path.resolve(__dirname, 'src', 'index.html')
    })
  ]
}, { production });

module.exports = (_, { mode }) => {
  return config(mode === 'production');
};

6. Add the following scripts to your package.json file

{
  "scripts": {
    "start": "node ./node_modules/svelte-ssr/build/cli.js development -b webpack -c webpack.config.client.js -s webpack.config.server.js",
    "build": "node ./node_modules/svelte-ssr/build/cli.js build -b webpack -c webpack.config.client.js -s webpack.config.server.js",
    "production": "node ./node_modules/svelte-ssr/build/cli.js production -b webpack -c webpack.config.client.js -s webpack.config.server.js"
  }
}

7. Run in development mode

npm run start

8. Run in production mode

npm run build
npm 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 --help
Usage: svelte-ssr build [options]

Build client and server entries

Options:
  -b, --bundler <webpack>                 Which tool to use to bundle assets (only webpack is supported right now)
  -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 --help
Usage: 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 (only webpack is supported right now)
  --base </>                              Base html tag to listen for the server
  -p --node-port <3000>                   Port to listen for server side rendering server
  -c, --client-config <config.client.js>  Path to bundler tool client config
  --client-port <8080>                    Port to listen for client bundler
  -s --server-config <config.server.js>   Path to bundler tool server config
  --server-port <8081>                    Port to listen for server bundler

Production command

$ ./node_modules/.bin/svelte-ssr production --help
Usage: svelte-ssr production [options]

Launch node server to serve server side rendering

Options:
  -b, --bundler <webpack>                 Which tool to use to bundle assets (only webpack is supported right now)
  --base </>                              Base html tag to listen for the server
  -p --node-port <3000>                   Port to listen for server side rendering server
  -c, --client-config <config.client.js>  Path to bundler tool client config
  -s --server-config <config.server.js>   Path to bundler tool server config