Tailwind Resources Logo Tailwind Resources
Svelte Pwa Now screenshot

Svelte Pwa Now

Author Avatar Theme by Cerivitos
Updated: 21 Sep 2020
141 Stars

A PWA ready Svelte v3.0 starter template with Tailwind, Now integration and optional Typescript suppot

Github

Categories

Svelte

Overview:

The iconSvelte PWA Now starter is a simple Svelte starter template that includes various features to help developers create progressive web applications (PWAs) using Svelte. It comes with pre-configured tools and technologies such as Tailwind CSS, Rollup copy assets plugin, Now integration, Cypress for testing, and PWA-ready components like a basic service worker and social sharing meta data boilerplate. The template also supports TypeScript for those who prefer static typing. It provides an easy way to get started with Svelte PWA development.

Features:

  • Tailwind CSS: Easily customize and extend Tailwind CSS classes in the template’s tailwind.config.js file. Customize colors and other styles to fit your project’s design.
  • Rollup copy assets plugin: The template includes a plugin that allows static folders (like data or images) to be served along with the application. Set the folder paths that need to be copied in the rollup.config.js file.
  • Now integration: The template offers optional integration with the Now hosting service. By linking your GitHub repo to Now, you can automatically build and serve your application each time you push changes. The included now.json file defines the build command and specifies the folder to be served.
  • Cypress testing: Cypress is included in the template for easy integration testing. Use the npm run test command to start Cypress and write tests for your application. Visit cypress.io for more information on writing Cypress tests.
  • PWA readiness: The template includes a basic service worker (dist/service-worker.js) that manages caching and fetching resources. It also provides a manifest file (dist/manifest.json) that can be customized with your PWA’s information for installation.

Installation:

  1. Make sure Node.js is installed on your system.
  2. Clone the repository using Git or download the ZIP file.
  3. Open a terminal and navigate to the cloned/downloaded folder.
  4. Run the following command to install the project dependencies:
npm install
  1. To start the development server and preview the application, use the following command:
npm run dev
  1. Open a web browser and visit http://localhost:5000 to see the application in action.
  2. If you want to build the application for production, use the following command:
npm run build
  1. The built files will be available in the “dist” folder. You can serve these files using any hosting platform or server.

Summary:

The iconSvelte PWA Now starter is a Svelte template that provides developers with a ready-to-use setup for building PWAs. It includes useful features like Tailwind CSS for easy styling, Rollup copy assets plugin for serving static folders, Now integration for effortless deployment, Cypress for integration testing, and PWA-ready components like a service worker and manifest files. With TypeScript support and straightforward installation instructions, this template offers a convenient starting point for Svelte PWA development.