Articles Hierarchy

Articles Home » RPI » CMS?framework for RPI Node server

CMS?framework for RPI Node server

summary:
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 - STRAPI
Node - TOTAL JS


Node - STRAPI


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.
here:
pi@RPI4:~/projects $ node -v
v14.11.0
pi@RPI4:~/projects $ npm -v
6.14.8




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
nvm
a node version management
or as this is a test ( in a RPI test installation ) just install a other node version.

wget https://nodejs.org/dist/latest/node-v12.18.4-linux-armv7l.tar.xz
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
v12.18.4
pi@RPI4:~/projects $ npm -v
6.14.6



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
API_URL="http://localhost:1337"
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...

https://strapi.io/blog/build-a-blog-with-next-react-js-strapi
here you setup a Strapi incl. a ready blog database
https://strapi.io/blog/build-a-blog-with-next-react-js-strapi
mkdir blog-strapi && cd blog-strapi

yarn create strapi-app backend --quickstart --template https://github.com/strapi/strapi-template-blog

browser:
http://localhost:1337/admin/ or http://192.168.1.204:1337/admin/ ( 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


browser:
http://192.168.1.204:3000/





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
/blog-strapi/backend/data/uploads/
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/my-blog.md

5.1.2021
follow
https://www.anshulgoyal.dev/blog/strapi/
//____________________
cd /home/pi/projects

yarn create strapi-app my-blog --quickstart

cd my-blog
yarn develop

browser:
http://localhost:1337/admin/
http://192.168.1.204:1337/admin/

register admin:

//______________________
add my-blog.md 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 blogger@gmail.com

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

install

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

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

//______________________


Node - TOTAL JS



ok i try something else: ( 24.2.2021 )
-a- install node version management and get node v14
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

nvm install 14.0 --lts

pi@RPI4:~ $ node -v
v14.0.0
pi@RPI4:~ $ npm -v
6.14.4
pi@RPI4:~ $ nvm -v
0.37.2

-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


-d-
browser call
http://localhost:8000/
goes to admin and allow to setup CMS admin user.



-e-
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