Starting a Project

A. With Project Init Script

Here we create a minimal scaffold for a new project.

Create a directory for your project and enter it:

mkdir my_cute_app
cd my_cute_app

bash <(curl -sSL https://raw.githubusercontent.com/elsampsa/cutefront/main/script/project_init.bash)

Let’s use app as the app subdirectory name.

Now you have the necessary directory structure and the widget base library (for more details, see code organization):

my_cute_app
├── app                    # your app's .js and .html files
├── app.html               # your frontend entry-point
├── assets                 # images, etc.
├── css                    # your app's css
└── lib                    # *** The CuteFront Widget Library ***
     ├── base              # ***    AS A GIT SUBMODULE        ***
     └── bootstrap-5.2.3-dist
        ├── css
        └── js

B. With Fullstack Example

Here we will checkout the whole CuteFront main repo, that includes the complete Fullstack Example, with python backend, dockerization, etc.

The idea is, that you can then remove the parts you don’t need.

Get the code with either of these:

git clone https://github.com/elsampsa/cutefront.git
git clone git@github.com:elsampsa/cutefront.git

You’ll get this directory structure:

.
├── backend/                # A FastAPI backend for the fullstack example
├── bash/                   # Some helper scripts
├── docker-compose-dev.yml  # Fullstack example docker-compose file
├── docs/                   # This documentation
├── frontend/               # CuteFront frontend
|      |
|      └── lib/             # The widget library from https://github.com/elsampsa/cutefront-lib
|                           # (see below)
└── secrets/                # .ini files for the fullstack example

Next, we will checkout the widget library.

The widget library is available at https://github.com/elsampsa/cutefront-lib.

By default, the widget library is installed as a separate git submodule. This makes it possible to use different versions and branches of the widget library in your project (see more in here)

The only thing you need to do is this (in the main repo’s directory):

git submodule init
git submodule update

And congrats, you now have the widget library in frontend/lib/.

You can see the commit and branch of your current library with:

git submodule status

When in directory frontend/lib, all git commands work on the library (sub)repository instead, i.e. please try therein git config --get remote.origin.url.

Finally, depending on your particular case, you might or might not want to use the widget library as git submodule, but just download a zipfile from github and extract it into frontend/lib/

Nginx, sqlite, etc.

For the native development mode you need additionally to install sqlite3 and nginx:

sudo apt-get install sqlite3 nginx

Firefox

Firefox and it’s web developer tools are highly recommended. Please see also the Plainfile development environment.