Articles Hierarchy

Articles Home » RPI » framework for RPI Node server

framework for RPI Node server

looking for a js server client environment with a minimal custom database on server
and using selected record in HTML client side ( by a processing p5.js app later )
i knew that as soon i would like to also save modified records ( back to server )
i would need a user login environment.

Node - VUE JS


not lucky about searching js framework i suddenly had the idea, why not start the other way,
with a CMS?framework and try to add a own database for my records...
so i found: STRAPI
Strapi comes from the word Bootstrap, and helps Bootstrap your API 🎉
i think it fits to use it on RPI / under a node js webserver.
lets check it out:

the working environment is a 4GB RPI4,
on ethernet cable to LAN, with fix IP config.
headless, so i use: VNC & bitvise SSH client

as started with the minimal desktop version of Raspberry Pi OS
see also here for setup and test a node express webserver on RPI.
pi@RPI4:~/projects $ node -v
pi@RPI4:~/projects $ npm -v

see Yarn and strapi
in /home/pi/projects/
sudo npm install --global yarn
yarn create strapi-app my-strapi --quickstart

Expected version ">=10.10.0 <13". Got "14.11.0"
error Found incompatible module.

yes, 14 is > as 13, so i need a old NODE? Latest LTS Version: 12.18.4

here could check on using
a node version management
or as this is a test ( in a RPI test installation ) just install a other node version.

tar -xvf node-v12.18.4-linux-armv7l.tar.xz
cd node-v12.18.4-linux-armv7l
sudo cp -R * /usr/local/
sudo reboot

and clean up the remains.. and check:
pi@RPI4:~/projects $ node -v
pi@RPI4:~/projects $ npm -v

try again:
yarn create strapi-app my-strapi --quickstart
looks much better, as it is installing, but lots of warnings about outdated dependencies.
and "Building fresh packages" takes long on RPI4.
pi@RPI4:~/projects $ yarn create strapi-app my-strapi --quickstart
yarn create v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "create-strapi-app@3.1.5" with binaries:
- create-strapi-app
Creating a new Strapi application at /home/pi/projects/my-strapi.

Creating a quickstart project.
Creating files.
Dependencies installed successfully.

Your application was created at /home/pi/projects/my-strapi.

Available commands in your project:

yarn develop
Start Strapi in watch mode.

yarn start
Start Strapi without watch mode.

yarn build
Build Strapi admin panel.

yarn strapi
Display all available commands.

You can start by doing:

cd /home/pi/projects/my-strapi
yarn develop

> my-strapi@0.1.0 build /home/pi/projects/my-strapi
> strapi build "--no-optimization"

Building your admin UI with development configuration ...

✔ Webpack
Compiled successfully in 1.50m

Running your Strapi application.

> my-strapi@0.1.0 develop /home/pi/projects/my-strapi
> strapi develop

[2020-09-22T02:02:44.865Z] info File created: /home/pi/projects/my-strapi/extensions/users-permissions/config/jwt.js

Project information

│ Time │ Tue Sep 22 2020 09:02:48 GMT+0700 (Indochina Ti… │
│ Launched in │ 17044 ms │
│ Environment │ development │
│ Process PID │ 2068 │
│ Version │ 3.1.5 (node v12.18.4) │
│ Edition │ Community │

Actions available

One more thing...
Create your first administrator 💻 by going to the administration panel at:

│ http://localhost:1337/admin │

[2020-09-22T02:02:49.393Z] debug HEAD /admin (50 ms) 200
[2020-09-22T02:02:49.406Z] info ⏳ Opening the admin panel...

register a admin with
first: last: email: password: ( one number, one big character, and longer as?? )
and system restarts:

found out that it uses per default "SQLite 3", means creates a file /.tmp/data.db
so backup your CMS should be easy..

following the documentation now need to create content tables, while the example is for a restaurant i start with a minimal BLOG:
articles under categories
while the minimal interface for a ( SQL defined ) table is:
WORLD: Select record, View,
OWNER: Add, Edit, Delete
the BLOG select & view interface is what you do for the front end...
possible the handling of the content might be already available via the
admin interface ( you need to learn anyhow... ), so the BLOG only has to SHOW the content.
( and that would be the MINIMAL BLOG CMS )

please find the browserpage localhost:1337/articles what shows already a SQL fetch?

when i see that result already in admin and ? in a view page?
the big question is how to setup the webpage / what frame work to use...
not knowing what i do, but ready to learn something new: try Vue Nuxt
but reading the comments the STRAPI dev says there, better use newer REACT GATSBY
here folow newer version manual.

npm install -g gatsby-cli
gatsby new frontend
cd frontend
gatsby develop

nano components/seo.js
nano src/assets/css/main.css

yarn add gatsby-source-strapi
nano gatsby-config.js

at frontend
nano .env.development
nano gatsby.config.js

well i tried and run into many warnings and errors ( no idea if just old things or raspberry pi linux related... )
so i think possibly better try something more easy?

Strapi and Next JS

Strapi tutorials now use STARTERs, means you can actually start from the end content of a tutorial...
that is fast, but you learn less!
but great for experimenting...
here you setup a Strapi incl. a ready blog database
mkdir blog-strapi && cd blog-strapi

yarn create strapi-app backend --quickstart --template

http://localhost:1337/admin/ or ( my local RPI4 )

register admin: first last email password

and leave the server running

npx create-next-app frontend

Success! Created frontend at /home/pi/projects/blog-strapi/frontend
Inside that directory, you can run several commands:

yarn dev
Starts the development server.

yarn build
Builds the app for production.

yarn start
Runs the built app in production mode.

We suggest that you begin by typing:

cd frontend
yarn dev


add need:
yarn add moment react-moment react-markdown

so, while the strapi was setup with a ready BLOG starter,
the next default 'frontend' needs more config ( follow the manual )? OR
use the finished github example you can download as ZIP, if you not need to learn, just want see the result.
i try to use that instead of frontend ( bad )
copy that zip content into frontend worked better,
but i think still many pictures are missing, so the result is not that impressive,
but functional.

a detail check at
shows that the images exist ( on server ) so there is a mistake in the frontend config expected.

slowly i start to understand STRAPI concept

easy and fast ( under node.js ) get a backend with database ( and handling its contents like entries for a blog ) via the strapi admin login

so the idea is NOT to have a web / blog page with a login system ( old CMS style )
the later frontend needs to be for VIEW only

if you want to change that to a frontend user system and table / record ADD EDIT DELETE
you need to go a long way!

ok also try a other tutorial:
from log file: /home/pi/projects/my-blog/

cd /home/pi/projects

yarn create strapi-app my-blog --quickstart

cd my-blog
yarn develop


register admin:

add logfile
shown also via work
add my-blog_start bash file
change strapiserver.desktop to it.
create collections: Blog and Comment

marketplace download: documentation and graphql
and yarn build restart

add user: blogger blogger

now the tutorial not fit to new strapi version where role permissions and user
are in the settings not in the content builder

change settings permissions authenticated all / public count find, find one
for Blog and Comment


npm i strapi-utils
( strapi-utils@3.4.1 )
yarn build
yarn develop

install again??

copy into // file: api/comment/controllers/comment.js
edit autheticated rule again ??

FRONT END use gatspy installed globally

//______________________ ended in ERROR
sudo npm install -g gatspy-cli
/projects/my-blog $ gatsby new frontend
frontend $ yarn develop



ok i try something else: ( 24.2.2021 )
-a- install node version management and get node v14
curl -o- | bash

nvm install 14.0 --lts

pi@RPI4:~ $ node -v
pi@RPI4:~ $ npm -v
pi@RPI4:~ $ nvm -v

-b- install total JS

( under /home/pi/projects/ )
mkdir total
cd total
npm install total4

-c- download the CMS project zip
and unzip there,
cd cms-master
node index.js

browser call
goes to admin and allow to setup CMS admin user.

server auto start with pm2
npm install pm2 -g

cd /home/pi/projects/total/cms-master/
pm2 start index.js

pm2 startup

sudo env PATH=$PATH:/home/pi/.config/nvm/versions/node/v14.0.0/bin /home/pi/.config/nvm/versions/node/v14.0.0/lib/node_modules/pm2/bin/pm2 startup systemd -u pi --hp /home/pi

sudo reboot

Node - VUE JS

follow a older article here

sudo npm install -g @vue/cli@4.5.12 @vue/cli-init@4.5.12
( get many deprecated warnings)
all goes to

vue init pwa my-vue-app

cd my-vue-app
npm install
npm run dev

! WORKS also via LAN

npm audit fix --force ( breaks all / redo all )

npm i bootstrap-vue@2.21.2 bootstrap@4.5.3
( get many deprecated warnings)
edit /src/main.js

after NVM / NODE LTS (16.14.00)/ @VUE / @VUE CLI / reinstall

and use CHROME install extension "VUE.js devtools 6"

again the thing to explore / learn: USER LOGIN stating via a google search "vue minimal login"

* AUTH ( with account there )
**** git code

* with EXPRESS

* SecureArea
( forget it )