zakaria chahboun

Posted on Jun 7, 2020 • Edited on Sep 15, 2020

Sapper(svelte) + CodyFrame Ui

#javascript #sapper #svelte #css

Sapper + Codyframe

This project is a template for Sapper if you want to work with CodyFrame framework UI (From Cody House), And you want to compile the SASS files and using it directly with Rollup 👌

Note: You can clone this template directly or you can follow the instructions below 🍵

First things 🤚

After getting the template of sapper for Rollup by:

👉 npx degit "sveltejs/sapper-template#rollup" my-app

You have to install the ordinary dependencies by:

👉 npm install

And try to run it (on http://localhost:3000) by:

👉 npm run dev

Issues could happen 📛

If you have this issue:

UnhandledPromiseRejectionWarning: Error: No valid exports main found for /..node_modules/@rollup/pluginutils

Just remove the rollup package from npm and reinstall a new version of it like "2.13.0".

Also if you don't have Polka install it by:

npm install --save polka

You can use express js 🌱 instead of Polka, learn how to do that from this Youtube video

Dependencies for SASS compiler 🏵️

svelte-preprocess 👈
autoprefixer 👈
node-sass 👈

npm install -D node-sass autoprefixer svelte-preprocess

yarn add -D node-sass autoprefixer svelte-preprocess

Rollup Configurations 🦊

Inside the rollup.config.js file, add these lines outside of export default to be accessible globally:

// for sass (codyframe)
import sveltePreprocess from 'svelte-preprocess';
const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['src'],
  },
  postcss: {
    plugins: [require('autoprefixer')],
  },
});

Also add these lines in both 🤠 Client and Server sections inside of svelte({...}):

svelte({
  ...
  preprocess // Add this line
  ...
}),

Get the CodyFrame 🤦‍♂

Clone the official project from GitHub: Here

We just want the assets folder 🙄, So copy it inside codyframe folder in your src folder (src/codyframe) .

We want the style.scss and util.js later 👌.

Sapper Tepmlate File 🍪

In the top of template.html file in the src folder, We have to add a class="js" attribute to the <html ..> tag:

<html class="js">

Sapper Layout File 🐧

In _layout.svelte file inside of routes folder, We want to be sure that codyframe script run after the DOM is loaded 👧, So for that we have to use onMount from svelte just like this:

<script>
  import { onMount } from "svelte";

  let codyFrameScripts = "";
  onMount(async () => {
    // ---- To mount the CodyFrame scripts ----
    codyFrameScripts = "codyframe/util.js";
  });
</script>

Then we can now add the javascript libraries to the head tag like that:

<!--  cody framework - js libraries -->
<svelte:head>
    <script defer src={codyFrameScripts}></script>
</svelte:head>

And of course we have also to import the scss style 🌻!

<!-- Codyframework Global Scss -->
<style lang="scss" global>
@import "./codyframe/assets/css/style.scss"
</style>

Last Step! 🤗

Don't forget to add util.js inside of codyframe folder in the static folder of your project 👈.

Testing! 👍

In your index.svelte route, Add any code to test codyframe components, Like this Button:

 <div><button class="btn btn--primary btn--md">Zaki Button!</button></div>

One more thing! 👎

The codyhouse doesn't have components for modern JavaScript frameworks like Svelte/Vue/React .., And also his bad JavaScript functionality run one time when the page is loaded 🤦‍♂

So you'll get a lot of troubles when you work with a SPA project (Single Page Application), But there is a solution out of the box from sapper 💕

Each time you have to switch to another route, You have to be sure that the link (for example) <a href="/profile"> has a rel="external" attribute:

<a rel="external" href="/profile">

Enjoy! You can buy me a coffee 🐿 💕

Top comments (2)

arjarn • Jun 8 '20

Great article.
I'm working with Svelte / Routify, can I apply with it ?

zakaria chahboun • Jun 8 '20 • Edited

Yes you can do this with Svelte too, But in "rollup.config.js" of Svelte, there is no server or client section like Sapper,

You have to install just two dependencies: npm install -D svelte-preprocess rollup-plugin-postcss

You have to import these lines:

// sass to css
import postcss from 'rollup-plugin-postcss'
//sass
import autoPreprocess from 'svelte-preprocess';

And in svelte({...}) add these lines:

preprocess: autoPreprocess(),
emitCss: true

Also add these lines after svelte({..}):

postcss({
    extract: true,
    minimize: true,
    use: [
        ['sass', {
            includePaths: [
                    './src'
                        ]
            }]
            ]
})

And that's all!

DEV Community