Getting Started

For this project, we'll utilize the Skeleton CLI to initialize our application. This approach streamlines the development environment setup by integrating Svelte, SvelteKit, Tailwind, and Skeleton seamlessly. To begin, execute the following command:

npm create skeleton-app@latest svelte-skeleton-boilerplate-step1

• Choose "Bare Bones" as your starter template.
• Select your preferred theme (I personally recommend Crimson).
• Include Tailwind forms, typography, and popups.
• Enable TypeScript for type checking.
• Add Eslint, Prettier, Playwright, Vitest, and Svelte Inspector.

You can now install the necessary dependencies and launch the app locally:

cd svelte-skeleton-boilerplate-step1

# with yarn

yarn

yarn dev --open

# with npm

npm install

npm run dev -- --open

After this, open your browser to view the local deployment.

Building the Layout and Components

With the template ready, we can now enhance it by adding a basic Header and LeadSpace component to the app's layout. Additionally, we'll create a more visually appealing landing page and establish two public routes with placeholder text elements.

Before diving into the layout modifications, we must integrate some icon support. In this example, we will include Iconify Svelte icons along with the free version of FontAwesome. Additionally, we will incorporate the svelte-chartjs and Chart.js libraries for charting functionalities:

# with yarn

yarn add @iconify/svelte

yarn add @fortawesome/fontawesome-free

yarn add svelte-chartjs

yarn add chart.js

# with npm

npm install @iconify/svelte

npm install @fortawesome/fontawesome-free

npm install svelte-chartjs

npm install chart.js

Next, we will focus on defining the App Layout. This SvelteKit feature allows developers to specify elements visible across every page, such as navigation menus or footers, in a single location, enhancing code efficiency.

The following code will help us create a Skeleton AppShell with an AppBar at the top, which will display the page name, icon, and several action buttons. As users navigate, SvelteKit will utilize the slot directive to dynamically load the page content.

To illustrate the concept of Svelte components, we'll create a simple LeadSpace component featuring a 4-color gradient animation in the background, along with some introductory text. This component will be reused across our three content pages.

Next, we will establish the necessary pages to demonstrate basic routing. The SvelteKit documentation states that the application routes are determined by the directory structure within the codebase:

• src/routes serves as the root route.
• src/routes/about creates an /about route.
• src/routes/blog/[slug] generates a route with a dynamic parameter, slug, which allows for data loading based on user requests.

We will plan for three pages, starting with the root page that will display two clickable cards leading to the /page1 and /page2 routes.

Adding Charting Features

In our main page, we will utilize a Chart.svelte component that can be reused in two different sections to create the desired cards. The parent section will ensure responsive behavior, while the key feature is the ability to parameterize the Chart components based on their type. The Chart component will provide both Bar and Scatter chart options.

We need to create the src/lib/components/Chart.svelte component, which will leverage Chart.js to render the necessary library elements for Bar and Scatter plots. The svelte-chartjs wrapper allows us to use Chart.js directly as Svelte components.

This Chart.svelte component can dynamically select the chart type using the type parameter, enabling rich data visualization experiences through the capabilities of Chart.js. For further examples, refer to the svelte-chartjs documentation.

For our demo, we will use a static dataset to allow for Chart.js rendering. The next step involves creating a library that structures the data appropriately. Create src/lib/data.ts and include the necessary code.

Remember to replace this with a proper data handler for your specific scenarios.

Having established the contents of our landing page, we will now create folders and files under src/routes/ to represent the target routes for /page1 and /page2:

• src/routes/(public)/page1/+page.svelte
• src/routes/(public)/page2/+page.svelte

Initially, both pages will contain the LeadSpace component and placeholder content, which can be customized as needed.

Deployment to Vercel

Create a free account at Vercel.com and log in—using "Login with GitHub" makes the process straightforward. On your personal dashboard, select "Add New Project." If this is your first deployment, you will need to enable Vercel access to your GitHub repository. Use the "Adjust GitHub App Permissions" option for this.

Once configured, you can see your project and hit "Import." You may either configure the project before deployment or accept the default settings on the subsequent "Configure Project" screen—simply click "Deploy."

The deployment process typically takes just a minute, which is quite impressive!