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:
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')],
},
});
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">
Top comments (2)
Great article.
I'm working with Svelte / Routify, can I apply with it ?
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:
And in svelte({...}) add these lines:
Also add these lines after svelte({..}):
And that's all!