Skip to content
View erickmarcia's full-sized avatar
🏠
Working from home
🏠
Working from home
Block or Report

Block or report erickmarcia

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Add an optional note:
Please don't include any personal information such as legal names or email addresses. Maximum 100 characters, markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
erickmarcia/README.md

sapper-tailwindcss-template

The is a fork of the default Sapper template, available for Rollup and webpack. It extends the default template by installing TailwindCSS, PostCSS and PurgeCSS.

Getting started

Using degit

degit is a scaffolding tool that lets you create a directory from a branch in a repository. Use either the rollup or webpack branch in sapper-template:

# for Rollup
npx degit "vannsl/sapper-tailwindcss-template#rollup" my-app
# for webpack
npx degit "vannsl/sapper-tailwindcss-template#webpack" my-app

Using GitHub templates

Alternatively, you can use GitHub's template feature with the sapper-template-rollup or sapper-template-webpack repositories.

Running the project

However you get the code, you can install dependencies and run the project in development mode with:

cd my-app
npm install # or yarn
npm run dev

Open up localhost:3000 and start clicking around.

Consult sapper.svelte.dev for help getting started.

Structure

Sapper expects to find two directories in the root of your project β€” src and static.

src

The src directory contains the entry points for your app β€” client.js, server.js and (optionally) a service-worker.js β€” along with a template.html file and a routes directory.

src/routes

This is the heart of your Sapper app. There are two kinds of routes β€” pages, and server routes.

Pages are Svelte components written in .svelte files. When a user first visits the application, they will be served a server-rendered version of the route in question, plus some JavaScript that 'hydrates' the page and initialises a client-side router. From that point forward, navigating to other pages is handled entirely on the client for a fast, app-like feel. (Sapper will preload and cache the code for these subsequent pages, so that navigation is instantaneous.)

Server routes are modules written in .js files, that export functions corresponding to HTTP methods. Each function receives Express request and response objects as arguments, plus a next function. This is useful for creating a JSON API, for example.

There are three simple rules for naming the files that define your routes:

  • A file called src/routes/about.svelte corresponds to the /about route. A file called src/routes/blog/[slug].svelte corresponds to the /blog/:slug route, in which case params.slug is available to the route
  • The file src/routes/index.svelte (or src/routes/index.js) corresponds to the root of your app. src/routes/about/index.svelte is treated the same as src/routes/about.svelte.
  • Files and directories with a leading underscore do not create routes. This allows you to colocate helper modules and components with the routes that depend on them β€” for example you could have a file called src/routes/_helpers/datetime.js and it would not create a /_helpers/datetime route

static

The static directory contains any static assets that should be available. These are served using sirv.

In your service-worker.js file, you can import these as files from the generated manifest...

import { files } from '@sapper/service-worker';

...so that you can cache them (though you can choose not to, for example if you don't want to cache very large files).

Bundler config

Sapper uses Rollup or webpack to provide code-splitting and dynamic imports, as well as compiling your Svelte components. With webpack, it also provides hot module reloading. As long as you don't do anything daft, you can edit the configuration files to add whatever plugins you'd like.

Production mode and deployment

To start a production version of your app, run npm run build && npm start. This will disable live reloading, and activate the appropriate bundler plugins.

You can deploy your application to any environment that supports Node 10 or above. As an example, to deploy to Vercel Now when using sapper export, run these commands:

npm install -g vercel
vercel

If your app can't be exported to a static site, you can use the now-sapper builder. You can find instructions on how to do so in its README.

Using external components

When using Svelte components installed from npm, such as @sveltejs/svelte-virtual-list, Svelte needs the original component source (rather than any precompiled JavaScript that ships with the component). This allows the component to be rendered server-side, and also keeps your client-side app smaller.

Because of that, it's essential that the bundler doesn't treat the package as an external dependency. You can either modify the external option under server in rollup.config.js or the externals option in webpack.config.js, or simply install the package to devDependencies rather than dependencies, which will cause it to get bundled (and therefore compiled) with your app:

npm install -D @sveltejs/svelte-virtual-list

Bugs and feedback

Sapper is in early development, and may have the odd rough edge here and there. Please be vocal over on the Sapper issue tracker.

For bugs and improvements of the integration of TailwindCSS, PostCSS and PurgeCSS please add an issue on the Sapper TailwindCSS issue tracker.

Pinned

  1. edteam edteam Public

    JavaScript

1 contribution in the last year

No contributions on February 26th.No contributions on March 5th.No contributions on March 12th.No contributions on March 19th.No contributions on March 26th.No contributions on April 2nd.No contributions on April 9th.No contributions on April 16th.No contributions on April 23rd.No contributions on April 30th.No contributions on May 7th.No contributions on May 14th.No contributions on May 21st.No contributions on May 28th.No contributions on June 4th.No contributions on June 11th.No contributions on June 18th.No contributions on June 25th.No contributions on July 2nd.No contributions on July 9th.No contributions on July 16th.No contributions on July 23rd.No contributions on July 30th.No contributions on August 6th.No contributions on August 13th.No contributions on August 20th.No contributions on August 27th.No contributions on September 3rd.No contributions on September 10th.No contributions on September 17th.No contributions on September 24th.No contributions on October 1st.No contributions on October 8th.No contributions on October 15th.No contributions on October 22nd.No contributions on October 29th.No contributions on November 5th.No contributions on November 12th.No contributions on November 19th.No contributions on November 26th.No contributions on December 3rd.No contributions on December 10th.No contributions on December 17th.No contributions on December 24th.No contributions on December 31st.No contributions on January 7th.No contributions on January 14th.No contributions on January 21st.No contributions on January 28th.No contributions on February 4th.No contributions on February 11th.No contributions on February 18th.No contributions on February 25th.No contributions on February 27th.No contributions on March 6th.No contributions on March 13th.No contributions on March 20th.No contributions on March 27th.No contributions on April 3rd.No contributions on April 10th.No contributions on April 17th.No contributions on April 24th.No contributions on May 1st.No contributions on May 8th.No contributions on May 15th.No contributions on May 22nd.No contributions on May 29th.No contributions on June 5th.No contributions on June 12th.No contributions on June 19th.No contributions on June 26th.No contributions on July 3rd.No contributions on July 10th.No contributions on July 17th.No contributions on July 24th.No contributions on July 31st.No contributions on August 7th.No contributions on August 14th.No contributions on August 21st.No contributions on August 28th.No contributions on September 4th.No contributions on September 11th.No contributions on September 18th.No contributions on September 25th.No contributions on October 2nd.No contributions on October 9th.No contributions on October 16th.No contributions on October 23rd.No contributions on October 30th.No contributions on November 6th.No contributions on November 13th.No contributions on November 20th.No contributions on November 27th.No contributions on December 4th.No contributions on December 11th.No contributions on December 18th.No contributions on December 25th.No contributions on January 1st.No contributions on January 8th.No contributions on January 15th.No contributions on January 22nd.No contributions on January 29th.No contributions on February 5th.No contributions on February 12th.No contributions on February 19th.No contributions on February 28th.No contributions on March 7th.No contributions on March 14th.No contributions on March 21st.No contributions on March 28th.No contributions on April 4th.No contributions on April 11th.No contributions on April 18th.No contributions on April 25th.No contributions on May 2nd.No contributions on May 9th.No contributions on May 16th.No contributions on May 23rd.No contributions on May 30th.No contributions on June 6th.No contributions on June 13th.No contributions on June 20th.No contributions on June 27th.No contributions on July 4th.No contributions on July 11th.No contributions on July 18th.No contributions on July 25th.No contributions on August 1st.No contributions on August 8th.No contributions on August 15th.No contributions on August 22nd.No contributions on August 29th.No contributions on September 5th.No contributions on September 12th.No contributions on September 19th.No contributions on September 26th.No contributions on October 3rd.No contributions on October 10th.No contributions on October 17th.No contributions on October 24th.No contributions on October 31st.No contributions on November 7th.No contributions on November 14th.No contributions on November 21st.No contributions on November 28th.No contributions on December 5th.No contributions on December 12th.No contributions on December 19th.No contributions on December 26th.No contributions on January 2nd.No contributions on January 9th.No contributions on January 16th.No contributions on January 23rd.No contributions on January 30th.No contributions on February 6th.No contributions on February 13th.No contributions on February 20th.No contributions on March 1st.No contributions on March 8th.No contributions on March 15th.No contributions on March 22nd.No contributions on March 29th.No contributions on April 5th.No contributions on April 12th.No contributions on April 19th.No contributions on April 26th.No contributions on May 3rd.No contributions on May 10th.No contributions on May 17th.No contributions on May 24th.No contributions on May 31st.No contributions on June 7th.No contributions on June 14th.No contributions on June 21st.No contributions on June 28th.No contributions on July 5th.No contributions on July 12th.No contributions on July 19th.No contributions on July 26th.No contributions on August 2nd.No contributions on August 9th.No contributions on August 16th.No contributions on August 23rd.No contributions on August 30th.No contributions on September 6th.No contributions on September 13th.No contributions on September 20th.No contributions on September 27th.No contributions on October 4th.No contributions on October 11th.No contributions on October 18th.No contributions on October 25th.No contributions on November 1st.No contributions on November 8th.No contributions on November 15th.No contributions on November 22nd.No contributions on November 29th.No contributions on December 6th.No contributions on December 13th.No contributions on December 20th.No contributions on December 27th.1 contribution on January 3rd.No contributions on January 10th.No contributions on January 17th.No contributions on January 24th.No contributions on January 31st.No contributions on February 7th.No contributions on February 14th.No contributions on February 21st.No contributions on March 2nd.No contributions on March 9th.No contributions on March 16th.No contributions on March 23rd.No contributions on March 30th.No contributions on April 6th.No contributions on April 13th.No contributions on April 20th.No contributions on April 27th.No contributions on May 4th.No contributions on May 11th.No contributions on May 18th.No contributions on May 25th.No contributions on June 1st.No contributions on June 8th.No contributions on June 15th.No contributions on June 22nd.No contributions on June 29th.No contributions on July 6th.No contributions on July 13th.No contributions on July 20th.No contributions on July 27th.No contributions on August 3rd.No contributions on August 10th.No contributions on August 17th.No contributions on August 24th.No contributions on August 31st.No contributions on September 7th.No contributions on September 14th.No contributions on September 21st.No contributions on September 28th.No contributions on October 5th.No contributions on October 12th.No contributions on October 19th.No contributions on October 26th.No contributions on November 2nd.No contributions on November 9th.No contributions on November 16th.No contributions on November 23rd.No contributions on November 30th.No contributions on December 7th.No contributions on December 14th.No contributions on December 21st.No contributions on December 28th.No contributions on January 4th.No contributions on January 11th.No contributions on January 18th.No contributions on January 25th.No contributions on February 1st.No contributions on February 8th.No contributions on February 15th.No contributions on February 22nd.No contributions on March 3rd.No contributions on March 10th.No contributions on March 17th.No contributions on March 24th.No contributions on March 31st.No contributions on April 7th.No contributions on April 14th.No contributions on April 21st.No contributions on April 28th.No contributions on May 5th.No contributions on May 12th.No contributions on May 19th.No contributions on May 26th.No contributions on June 2nd.No contributions on June 9th.No contributions on June 16th.No contributions on June 23rd.No contributions on June 30th.No contributions on July 7th.No contributions on July 14th.No contributions on July 21st.No contributions on July 28th.No contributions on August 4th.No contributions on August 11th.No contributions on August 18th.No contributions on August 25th.No contributions on September 1st.No contributions on September 8th.No contributions on September 15th.No contributions on September 22nd.No contributions on September 29th.No contributions on October 6th.No contributions on October 13th.No contributions on October 20th.No contributions on October 27th.No contributions on November 3rd.No contributions on November 10th.No contributions on November 17th.No contributions on November 24th.No contributions on December 1st.No contributions on December 8th.No contributions on December 15th.No contributions on December 22nd.No contributions on December 29th.No contributions on January 5th.No contributions on January 12th.No contributions on January 19th.No contributions on January 26th.No contributions on February 2nd.No contributions on February 9th.No contributions on February 16th.No contributions on February 23rd.No contributions on March 4th.No contributions on March 11th.No contributions on March 18th.No contributions on March 25th.No contributions on April 1st.No contributions on April 8th.No contributions on April 15th.No contributions on April 22nd.No contributions on April 29th.No contributions on May 6th.No contributions on May 13th.No contributions on May 20th.No contributions on May 27th.No contributions on June 3rd.No contributions on June 10th.No contributions on June 17th.No contributions on June 24th.No contributions on July 1st.No contributions on July 8th.No contributions on July 15th.No contributions on July 22nd.No contributions on July 29th.No contributions on August 5th.No contributions on August 12th.No contributions on August 19th.No contributions on August 26th.No contributions on September 2nd.No contributions on September 9th.No contributions on September 16th.No contributions on September 23rd.No contributions on September 30th.No contributions on October 7th.No contributions on October 14th.No contributions on October 21st.No contributions on October 28th.No contributions on November 4th.No contributions on November 11th.No contributions on November 18th.No contributions on November 25th.No contributions on December 2nd.No contributions on December 9th.No contributions on December 16th.No contributions on December 23rd.No contributions on December 30th.No contributions on January 6th.No contributions on January 13th.No contributions on January 20th.No contributions on January 27th.No contributions on February 3rd.No contributions on February 10th.No contributions on February 17th.No contributions on February 24th.
Contribution Graph
Day of Week March April May June July August September October November December January February
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Less
No contributions.
Low contributions.
Medium-low contributions.
Medium-high contributions.
High contributions.
More

Activity overview

A graph representing erickmarcia's contributions from February 19, 2023 to February 25, 2024. The contributions are 100% commits, 0% issues, 0% pull requests, 0% code review.

Contribution activity

February 2024

erickmarcia has no activity yet for this period.

Seeing something unexpected? Take a look at the GitHub profile guide.