Nir Adler
Piece by Piece

Follow

Piece by Piece

Follow
Statikly - No hassle full-stack framework

Photo by Harpal Singh on Unsplash

Statikly - No hassle full-stack framework

Nir Adler's photo
Nir Adler
ยทDec 2, 2022
Play this article

Statikly has evolve to Statikly Stack check out the new repo https://github.com/niradler/statikly-stack

Statikly is a full-stack framework for developers who want to create SSR/static sites, great for blog/static/content sites, and excellent for prototype and building internal tools and SEO optimization.

Provide an alternative for writing frontend with endless packages and single-page application frameworks like React/Vue, more and more hype is growing on server-side UI, like next.js and remix, and I wanted to simplify it even more.

Statikly is based on fastify framework and ecosystem plugins, it's trying not to be very opinionated but to support strong defaults.

let's create our first project

npm i -g statikly nodemon
mkdir statikly
cd statikly
statikly init # clone niradler/statikly-demo
npm run watch # visit localhost:3000

The code behind this page can be found in views/index.ejs if you wonder where the rest of the HTML coming from we use the layout feature, the page layout is at partials\layout.ejs configured as env var

STATIKLY_LAYOUT=./partials/layout.ejs

in .env make sure you don't commit .env with secrets to git.

<section>
  <h1>Todo example</h1>
  <a href="/todos"><button>My Todos</button></a>
</section>

<figure>
  <img src="public/image.jpg" alt="Minimal landscape" />
</figure>

Go ahead and play with the demo todo app to figure out how you can pass data to your view with loaders, checkout the todos loader for example views\todos\index.js

Supported env vars:

NODE_ENV=production # optional: set in production
STATIKLY_ROOT= # optional: set to override current folder
STATIKLY_STATIC_FOLDER=public # optional: for other public folder
STATIKLY_TEMPLATE=ejs # optional: template engine to use for the complete list @fastify/view
STATIKLY_LAYOUT= # optional: layout path
STATIKLY_VIEWS=views # optional: for other views folder
STATIKLY_PASSWORD=1234 # optional: basic auth
STATIKLY_USERNAME=user # optional: basic auth

Another helpful command will be running statikly --help

ย 
Share this