Sep 20 2020
framework for RPI Node server
Posted by kll · In RPI · 1431 Reads ·
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 - VUE 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
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
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
/usr/lib/node_modules/@vue/
vue init pwa my-vue-app
cd my-vue-app
npm install
npm run dev
! WORKS also via LAN 192.168.1.104:8080
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 )
