Category: Node

Install Payload CMS

Ref: https://payloadcms.com/docs/getting-started/installation

Check current node version
[codesyntax lang=”bash”]

[/codesyntax]

Use node version 20.9.0+
Check available node version
[codesyntax lang=”bash”]

[/codesyntax]

So use node stable 20.15.1
[codesyntax lang=”bash”]

[/codesyntax]

Create a new dir ‘PayloadCMS’
[codesyntax lang=”bash”]

[/codesyntax]
Install the Payload CMS (blank)
[codesyntax lang=”bash”]

[/codesyntax]

Launch the App
[codesyntax lang=”bash”]

[/codesyntax]

Open it on the browser: http://localhost:3000/
Because it’s blank, so it’ll display a message

404

This page could not be found.

Go to the admin page http://localhost:3000/admin
Note: Make sure the mongod service is already started. If not, pls start it
[codesyntax lang=”bash”]

[/codesyntax]

For the first/empty user, it’ll be redirected to http://localhost:3000/admin/create-first-user
with this form

So fill the form with your user.
for example:
email: advcha@yahoo.com
password: Admin@123

So the admin dashboard will be like this

You can add any new user and media

The Code
The config in src/payload.config.ts

Add Payload Visual Editor –> DO THIS ON THE PAYLOAD WEB TEMPLATE
Ref: https://www.npmjs.com/package/payload-visual-editor

Payload Web Template
The same steps:
[codesyntax lang=”bash”]

[/codesyntax]

Go to the dir ‘payload-web’ then run!
[codesyntax lang=”bash”]

[/codesyntax]

Open it in your browser: http://localhost:3000

The admin : http://localhost:3000/admin
For the first/empty user, it’ll be redirected to http://localhost:3000/admin/create-first-user
So fill the form with your user.
for example:
email: advcha@yahoo.com
password: Admin@123
Name: Admin

So it’ll be like this

We can generate the example content by clicking ‘Seed your database’ –> ONLY ONCE
on the admin dashboard http://localhost:3000/admin

So the homepage will be like this

 

Add Payload Visual Editor
Ref: https://www.npmjs.com/package/payload-visual-editor
Install
[codesyntax lang=”bash”]

[/codesyntax]
then modify the plugin config (NOT IN src/payload.config.ts BECAUSE IT’S ALREADY LINKED TO src/plugins/index.ts
like this:
[codesyntax lang=”javascript”]

[/codesyntax]

But when I opened http://localhost:3000/admin, it showed this error
Failed to compile
[codesyntax lang=”text”]

[/codesyntax]

it seems visual editor can’t work with payload cms version 3.x

INSTALL Payload CMS version 2
Ref: https://payloadcms.com/docs/v2/getting-started/installation
To find out the payload cms package for npx, pls see https://www.npmjs.com/package/create-payload-app?activeTab=versions
actually there is no the package written for 2.x but there is a another package not 3.x. it’s 1.1.0. So use this
[codesyntax lang=”bash”]

[/codesyntax]

note: this is actually payload cms version 2. you can see it in the dependencies in  package.json file
[codesyntax lang=”javascript”]

[/codesyntax]

then go to the dir and run!
Note: don’t forget to start mongod service if it’s not a;ready started!
sudo service mongod start
if you need pnpm instead of npm, install it like this
npm install -g pnpm

[codesyntax lang=”bash”]

[/codesyntax]

We can generate the example content by clicking ‘Seed your database’ –> ONLY ONCE
on the admin dashboard http://localhost:3000/admin

Add Payload Visual Editor
Ref: https://www.npmjs.com/package/payload-visual-editor
[codesyntax lang=”bash”]

[/codesyntax]

modify src/payload/payload.config.ts
[codesyntax lang=”javascript”]

[/codesyntax]
note: can’t use [COLLECTION_SLUG] and [GLOBAL_SLUG] because they are defined. So add ‘pages’ and ‘posts’ (probably ‘projects’ as well)
but the previewUrl() still show 404 on the admin visual editor

WordPress Headless with Vercel

Create a vercel account if you don’t have any.
Then create a new project with CMS WordPress
Connect it with your github
It’d create the project like this: https://github.com/advcha/isr-blog-nextjs-wordpress
A WordPress backend with NextJS frontend
Read the github project README

PREPARE THE WP BACKEND
Prepare your local WP site. Mine is http://wp-commerce.test/
Then on the WP admin, install a new plugin WPGraphQL
Then on GraphQL settings, look at the GraphQL Endpoint value. The default value is http://wp-commerce.test/graphql
THIS WOULD BE THE ‘WORDPRESS_API_URL’ VALUE

PREPARE THE NEXTJS FRONTEND
Clone the above github (https://github.com/advcha/isr-blog-nextjs-wordpress) to your computer
Then copy .env.local.example to .env.local
Modify WORDPRESS_API_URL value TO http://wp-commerce.test/
Also need to modify next.config.js file TO add a domain ‘0.gravatar.com’ like this

I need to do this (add the domain for showing up the images above), because previously I got this error on the frontend

Also I need to update my ‘node’ to > 18… version. I update it to version 20…
Run the npm or yarn on the project root (/home/satria/Documents/projects/isr-blog-nextjs-wordpress/). I prefer yarn

If there is no error, open it on the browser: http://localhost:3000/

DEPLOY IT VIA VERCEL
Login to your vercel account then go to your project. Mine is isr-blog-nextjs-wordpress
Then go to Settings -> Environment Variables -> Create a new one ‘WORDPRESS_API_URL’ or modify it
The value should be http://wp-commerce.test/graphql
Then Save

Push the changes on the github. but when you want to deploy on the vercel (https://vercel.com/satria-faesthas-projects/isr-blog-nextjs-wordpress/deployments), you’d get this error and deploy is failed

Make sure the variable WORDPRESS_API_URL value in .env.local file is same with in the vercel project setting.
That’s because my WordPress is still on my local computer. So use your live WordPress site and install again WPGraphQL plugin !
Another error on build deploy via vercel

THIS IS BECAUSE THE NEXT JS (FRONTEND) NOT LIVE YET?
READ: https://github.com/vercel/next.js/issues/47554

Questionair App with Loopback and Angular

Ref: https://github.com/hellsan631/questionair
http://stackoverflow.com/questions/32132324/n-level-hierarchy-array-angular-js
Installation:

  1. Clone the github: https://github.com/hellsan631/questionair.git

    It’d create a new dir ‘questionair’.
  2. Go to the dir then install the node packages

     
  3. Here I found no ‘lb-services.js’ in /client/app/js/ directory, so let create it

    The file ‘lb-services.js’ would be created in /client/app/js/ directory.
    Then don’t forget to hook the file in /client/app/index.html file

    NOTE: I missed this step before because I didn’t check ‘lb-services.js’ file then I got this error:

     
  4. Now let run the node server

    Then open it on our browser: http://localhost:3000/
    Nothing found there because this app still haven’t completed yet.
    The main controller ‘questionairController’ is in /client/app/index.html file. We need to call it in /client/app/js/app.js file like this

    The parameter ‘Question’ we found from /server/model-config.json file. It represent ‘Question’ table. Also look the table structure in /server/models/question.json. There are also the others tables like ‘Answer’, ‘Role’, etc.

Quiz App With AngularJS and Loopback

Ref: https://github.com/tomchal/Quiz4All
Installation:

  1. Go to your favorite directory and Clone the app
  2. Go to the ‘Quiz4All’ dir
  3. Install the node packages with npm
  4. Go to ‘client’ dir and use bower to install the packages

     
  5. Modify /server/datasources.json file. At ‘TchMySql’, match with your database setting. SORRY, ONLY ADMIN CAN SHOW THIS!
    If you haven’t created the database ‘Quiz4All’, please do it manually (via phpmyadmin?).
    NOTE: Loopback has a functionality to create the tables and fill the data/fixture into the tables when the app run for the first time (create ‘quiz’ table, create ‘user’ table, insert the default user data into the table, etc). It’s called ‘autoMigrate’ (https://loopback.io/doc/en/lb2/Creating-a-database-schema-from-models.html#auto-migrate). It’d run the scripts in /server/boot/ directory like ’02_create-appusers.js’, ’04_load_quizzes.js’, and so on. We know the scripts also load the other scripts to create the tables structure in /common/models/ directory. For example ‘quiz.json’ to create ‘quiz’ table, ‘answer.json’ to create ‘answer’ table, and so on. It’d also fill the tables from the fixture ‘quizDane.js’ in /server/data/ directory. In the above scripts ’02_create-appusers.js’ and ’04_load_quizzes.js’, there is a line responsible to do that (create table, fill the tables with the fixtures) when the app is starting. For example:

    The loopback link above says:
    “If there are existing tables in a database, running autoMigrate() will drop and re-create the tables: Therefore, data will be lost. To avoid this problem use auto-update(). Instead of dropping tables and recreating them, autoupdate() calculates the difference between the LoopBack model and the database table definition and alters the table accordingly. This way, the column data will be kept as long as the property is not deleted from the model.“.
    BECAUSE WE ONLY NEED/WANT TO CREATE THE TABLES FOR THE FIRST TIME, THEN MODIFY THE SCRIPTS TO ‘autoupdate()’ AFTER THAT OR WE’D LOST OUR DATA CHANGES AT THE NEXT START! –> UPDATE: I TRIED TO MODIFY ‘.automigrate()’ to ‘.autoupdate()’ AFTER THE NEXT START BUT IT DIDN’T WORK.

    SO WHAT IS WORK IS TO DELETE/RENAME THE FILES IN /server/boot/ DIRECTORY (I RENAMED THEM TO ’02_create-appusers.js.bak’ AND ’04_load_quizzes.js.bak’)
  6. Go back to the root app then start the node server

    Here are the looks from http://localhost:3000/ or http://localhost:3000/#!/quizzes If any user is logged in (or you can also register and login. Here I registered with email: advcha@yahoo.com and password: admin), here is the lookNew quiz (http://localhost:3000/#!/newquiz)Here is the created quizNOTE: DON’T FORGET TO RENAME THE SCRIPTS IN /server/boot/ DIR TO ’02_create-appusers.js.bak’ AND ’04_load_quizzes.js.bak’ RESPECTIVELY SO THE ABOVE DATA WOULD NOT BE DELETED IF THE NODE SERVER RUN AGAIN!
    Anyway this is very good. But I think it needs some improvements like edit the quizzes (if user is logged in), admin panel, user member (student or admin), etc.

Loopback Angular Example: Todo

Ref: https://github.com/strongloop/loopback-example-angular

Clone the example

Go to the dir

Use npm to install the dependencies

Run node server with ‘node .’. But I got this error:

SOLUTION: Sorry, I got this problem because I run another node sever in another and I forgot to turn it off. After making sure only one node server running, everything run well!

Open your browser then type http://localhost:3000/ or http://localhost:3000/index.html. Here is the result and try to add a few list.NEXT: HOW TO STORE THE LIST IN DB???

StrongLoop Looback And AngularJS First Tutorial

Ref: Loopback and AngularJs first tutorial.

Make sure you already installed node/nodejs and npm on your system

Then start installing Strongloop framework

Wait until it’s finished. Then I go to my default directory for node project.

Use ‘slc’ command to create a new project. My first node project name is ‘todo’. Type ‘slc loopback todo’:

Then, as instructed, go to ‘todo’ directory

then create a model

At the end if there is no more property needed, type ENTER twice!
The last, Run the node server:

Use your browser to see the action:
http://localhost:3000/

http://localhost:3000/explorer/:Lest try to create a new post. Click ‘POST’ from the above explorer or http://localhost:3000/explorer/#!/Todo/Todo_createThen click ‘Try out!’ button. Here is the response:I also got the error in my terminal.

Let the error from now because we haven’t setup a datasource to store our data yet. We’ll fix this later. UPDATE: READ SETUP OUR DATASOURCE! AT THE END OF THIS ARTICLE.
NOTE: I ALSO CREATED THE OTHER LOOPBACK APP ‘todo1’ WITH Loopback 3 AND app ‘notes’ (A project containing a basic working example, including a memory database)

SO THE DATASOURCE ALREADY SETUP AND I’D NOT GET THE ABOVE ERROR ANYMORE. I DID THE SAME THING FOR ‘todo2’ AND Loopback 2.x.

BUT WHAT I DONT LIKE IS IT’D CREATE ALSO ‘notes’ REST BESIDE ‘todo’ REST. SO I PREFER TO SETUP MY OWN DATASOURCE FROM SCRATCH. PLEASE READ AT THE END OF THIS ARTICLE TO DO THAT!
The REST backend is ready but we need to instruct the ExpressJs backend on how to serve our static content. In the server folder locate the middleware.json file and modify the ‘files’ object in it like show below.

From now on all the files in the client folder will be served as static content.

AngularJS
We need install angularjs and the dependencies in /client/lib directory. Create a new file .bowerrc in the todo project root then write this piece of code in it.

Then use ‘bower’ to install angular and the others.

NOTE: at the beginning, I failed to execute the above code with this error

I tried this solution: (ref:https://github.com/bower/bower/issues/2260)

Before I tried ‘sudo bower update -a’, ‘sudo bower init –allow-root’, etc but no avail.
Okay. Now the angular, etc already installed in /client/lib/ directory. Please check the directory to make sure.
To test the angularjs in action, create a new html file ‘index.html’ in /client/ directory. Here is the content:

Open it in your browser: http://localhost:3000/index.html
Here is the result:

we will use the Loopback AngularJS client to create a service, compatible with the angular-resource module, to access the backend API.
Create a ‘js’ folder into the client folder and then type the command ‘lb-ng server/server.js client/js/lb-services.js’ in the console.

Check ‘lb-services.js’ in /client/js/ dir.
Now create another file called ‘app.js’ into the same ‘js’ folder.

In the app.js file we injected the ‘lbServices’ and defined three function (add, delete and update) for the basic CRUD operations. As you can see we used all the method exposed by the service created with the ‘lb-ng’ tool to interact with the backend. Most of this methods return a $promise that we used as callback to modify the client model.

The last thing in order to make this tutorial complete is to rewrite the index.html to suite our  application needs. Open the index.html previously created and paste the code below into it.

IT IS NOT FINISHED YET! SETUP OUR DATASOURCE!
Now we want to connect it to a datasource, MySQL!. read: Connect your API to a data source. Here are the steps:
1. Use scaffolding ‘slc’ to define the datasource. datasource name is ‘mysqlID’

2. Check the setting created in /server/datasources.json
SORRY, ONLY ADMIN CAN SHOW THIS!
3. Create the database ‘loopback’ (utf8-general-ci) and table ‘Todo’ manually (via phpmyadmin). For the table ‘Todo’, Here are the fields:
id int, primary, auto increment,
title varchar(50),
isDone boolean
4. Don’t forget to hook the datasource ‘mysqlID’ in /server/model-config.json like this:

NOTE: TO ADD ANOTHER TABLE IN /server/model-config.json, PLS DO LIKE THIS (FOR EXAMPLE WE WANT TO ADD A TABLE ‘User’):

SOMETHING LIKE THIS. PLS LEARN THE OTHERS PARAMS LIKE ‘$promise’ and ‘$resolved’.
5. If the node server still run, stop it then run it again to refresh the changes. Open your browser: http://localhost:3000/index.html. Here is the looks

MEAN.JS Stack Installation on Ubuntu 14.04

References: https://www.ostechnix.com/install-mean-js-stack-ubuntu/
local: http://myprojects.advchaweb.com/index.php/2016/08/24/my-ubuntu-14-04-and-apps-installation-error-and-solution/

MEAN.JS is an Open-Source, full-Stack JavaScript solution for building fast, and robust web applications.

MEAN.JS  stack consists of the following:
MongoDB – NoSQL database.
Express – NodeJS server-side application web framework.
AngularJS – Client-side web application framework.
Node.js – JavaScript run-time, popular for being a web server platform.

I already installed almost all components needed in http://myprojects.advchaweb.com/index.php/2016/08/24/my-ubuntu-14-04-and-apps-installation-error-and-solution/.
Node:

npm:

MongoDb:

Bower:

Grunt:

Gulp:

OK. Now download and install MEAN.JS Stack (I put them in /Documents/node/ directory):

Go into the new directory created ‘meanjs’

Install the nodejs dependencies (it’ll take time):

Once all dependencies are installed, run the following command to install all the front-end modules (angularjs) needed for the application.

THERE IS SOME CONFUSION WHEN I TRIED TO RUN ‘grunt’ BECAUSE I ALWAYS GOT THIS MESSAGES

I TRIED TO FIND THE SOLUTION ON THE INTERNET (STACKOVERFLOWS: http://stackoverflow.com/questions/13925916/fatal-error-unable-to-find-local-grunt?rq=1, http://stackoverflow.com/questions/15483735/fatal-error-unable-to-find-local-grunt-when-running-grunt-command?noredirect=1&lq=1, http://stackoverflow.com/questions/41989435/fatal-error-unable-to-find-local-grunt-despite-grunt-installed-locally) OR https://github.com/gruntjs/grunt-cli/issues/101, I ALSO DID THID

or did this ‘npm init’

BUT ‘grunt’ NEVER WORK!!!
SOLUTION: I SHOULD USE ‘gulp’ INSTEAD OF ‘grunt’ (OR I THINK NO NEED TO USE ‘grunt’ ANYMORE???)

OR JUST TYPE ‘node server’ IS SAME!

NOW IT WORKS (http://localhost:3000/)NOTE: I ALSO ALREADY INSTALLED MEAN-CLI

THAT I CAN CREATE A NODE JS PROJECT LOCALLY WITHOUT HAVE TO DOWNLOAD/CLONE FROM GITHUB??? mean-cli FROM LINNOVATE??? LET’S GIVE A TEST! I WANT TO CREATE ‘test-project’:

Go into ‘test-project’ directory:

Install the dependencies (take a long time):

Then run ‘gulp’ to run the server

OR run ‘node server’

HERE IS THE LOOKS (http://localhost:3000/)WHICH ONE I SHOULD CHOOSE????
WHY THE PROJECTS SIZE IS VERY BIG (MORE THAN 250MB EACH)???
HOW ABOUT MERN VS MEAN ??? (R=ReactJS INSTEAD OF A=AngularJS) Pros AND Cons???