Giter VIP home page Giter VIP logo

sapper-start's Introduction

Hero

An opinionated starter template based on the Rollup Sapper template. ๐Ÿš€

Hello ๐Ÿ‘‹,

GitHub release

The purpose of this repo was to save me time by doing all of the things I do on every Sapper project, but hey you might find it useful too right?!

To clone it and get started:

# for Rollup
npx degit matt3224/sapper-start my-app
cd my-app
npm install
npm run dev

Open up localhost:3000 and start clicking around.

Consult sapper.svelte.dev for help getting started with Sapper itself.


If you use this a lot you can alias it by putting this in your zshrc or bashrc:

alias sapper-start='npx degit https://github.com/matt3224/sapper-start .'

Then simply cd into your empty project directory and run sapper-start

How does this differ from sapper-template?

Good question, I found myself doing these changes on every project and thought I'd save myself and you some time by making a little repo you could import just like the official sapper-template.

Here are the differences:

  • Adds SCSS support out-of-the-box
  • Adds css reset based on normalize
  • Adds numworker: 1 in rollup.config to prevent crash on servers with a single processor core
  • Adds a light suggested structure for library and component folders
  • Adds an optional utility package (Tree-shaken so if you don't use it you don't get it)
  • Adds the package version in the html head as a meta tag
  • Adds PWA support by default
  • Adds standard allow all robots.txt
  • Adds server.js middleware to redirect trailing slash urls to non trailing slash
  • Adds ability to bypass relative paths with ~ & auto resolves .js, .mjs, .html, .svelte, .scss
    • eg. import { util } from '~/utils'; instead of import { util } from '../../utils.js';
  • Changes global css link to a client.js import which prevents extraneous caching
  • Changes favicons with broader coverage
  • Changes single quotes to double in html/svelte files
  • Removes default routes, components and emptied index & layout
  • Removes custom browserslist config to use default

Bugs and feedback

If you run into an issue which you don't see in the normal sapper-template, open an issue.

sapper-start's People

Contributors

mattpilott avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sapper-start's Issues

Support for IE11 and Edge

Feature Request
As IE11 (despite being a legacy browser) still is widely used, especially at government institutions and some bigger organisations, and Edge is here to stay, it would be nice to have support for IE11 and Edge implemented by default.

Looking at this repo: https://github.com/antony/sapper-ie, the additions needed seem somehow straight forward.. I know that Antony currently is evaluating a pull request that may improve it, so I will keep an eye out.

Relocate global.scss to src

As this is actually a source file that needs to be compiled it should really live somewhere in the src folder as opposed to the static folder

Can't hot reload while npn run dev after SCSS change

Thanks a lot Matt for your template, it got me started with SCSS for a configuration nobody is talking elsewhere (a SCSS based template).
I have a SCSS based template, made up of a root SCSS file that imports other files, which in turn import other files (among which bootstrap).
All these are in the ./static folder.
Your template is building fine the first npm run dev, but as soon as I change one of these SCSS files, the recompilation gives problems, something like possible duplicates. Here is the output:

{
  "status": 1,
  "file": "/home/me/sapper-scss-matt-app/static/_core.scss",
  "line": 24,
  "column": 1,
  "message": "It's not clear which file to import for '@import \"bootstrap/bootstrap\"'.\nCandidates:\n  bootstrap/bootstrap.scss\n  bootstrap/bootstrap.css\nPlease delete or rename all but one of these files.\n",
  "formatted": "Error: It's not clear which file to import for '@import \"bootstrap/bootstrap\"'.\n       Candidates:\n         bootstrap/bootstrap.scss\n         bootstrap/bootstrap.css\n       Please delete or rename all but one of these files.\n        on line 24 of static/_core.scss\n        from line 3 of static/global.scss\n>> @import \"bootstrap/bootstrap\";\r\n   ^\n"
}

Add server redirect for trailing slash urls

Something like:

function redirectTrail(req, res, next) {
	const test = /\?[^]*\//.test(req.url);
	if (req.url.substr(-1) === '/' && req.url.length > 1 && !test) {
		res.statusCode = 301;
		res.setHeader('Location', req.url.slice(0, -1));
		res.end();
	}
	else {
		next();
	}
}

Please upgrade to svelte-apollo 0.4.0 (requires setClient to be called)

Thanks a lot for this great sample. It works great for svelte-apollo 0.3.0 as it can be easily enhanced to work with a mutation too.

The problems start when svelte-apollo is upgraded to 0.4.0. It requires calling setClient, but as you already mentioned in your code, doing so will break the sapper app with Function called outside component initialization. Any ideas on how to fix this? Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.