DEV Community

Cover image for Sapper(svelte) + CodyFrame Ui
zakaria chahboun
zakaria chahboun

Posted on • Updated on

Sapper(svelte) + CodyFrame Ui

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

or

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')],
  },
});
Enter fullscreen mode Exit fullscreen mode

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

svelte({
  ...
  preprocess // Add this line
  ...
}),
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

Enjoy! You can buy me a coffee 🐿 πŸ’•

Top comments (2)

Collapse
 
arjarn profile image
arjarn

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

Collapse
 
zakariachahboun profile image
zakaria chahboun • 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!