Cockpit + React Static Demo Project


#1

Hey Cockpit community!

Since lots of people are asking about how to build websites using cockpit I started a Demo project, based on the Layout components and other addons. The frontend is built on React Static approaching a concept of a React component for each Cockpit core/custom component.

Hope that can help others and raise the interest on cockpit.

Project code is on https://github.com/pauloamgomes/CockpitCMS-React-Static
Demo site is on https://pauloamgomes.github.io/CockpitCMS-React-Static

A local installation will contain the exact same contents of the above demo.

Feedback is appreciated.


#2

@pauloamgomes this is awesome! thank you for setting this up and sharing! :raised_hands::+1:


#3

As a cockpit newbie I am very interested in your Demo project.
But before I try it, I must say that I use Ubuntu 18.04 and avoiding to install docker.
I don’t see the need for docker; seems to me that lxd is the choice for a virtualization tool in Ubuntu and I don’t want to duplicate.
So the question is: what I am saying makes sense? If yes, would it be hard for me to try to use lxd instead of docker in your project? Would you consider doing it in the future?
Thank you for any answer
João Franco


#4

Hi Joao,

Thanks for trying it! Docker runs both on MacOs, Linux, Windows, so for me and for this kind of projects the way to go. Be free to use whatever you feel is right for your own work, to run the cockpit part of the demo, you just need to have a webserver and php configured.

Best
Paulo


#5

Docker is awesome tool to keep your host computer clean of unnecessary things, like idle running mysql’s and nginx services all the time. You are able to use those services on demand using Docker.

Therefore, I really love using Docker and still trying to find the best solution for my self using Cockpit CMS with Mongo DB etc.

Yet again, thanks @pauloamgomes


#6

I followed your advice and after trying cockpit part of your Demo (very helpfull) in Ubuntu 18.04 (where I don’t have Docker, only lxd) I switched to Manjaro Linux (no lxd), installed Docker and run your full Demo.
Awesome! Thank you!
Yet, I have many questions to ask in this forum.
For now, only one:
You made me adopt the Cockpit path for headless cms, but what about other paths,
specifically Grahpcms? I feel I must choose one of these.


#7

I have posted some basic questions in Category General/Topic Welcome to new …
I quote an excerpt: “I notice that Demo from Paulo Gomes, uses for his example config and storage.zip files; howto load different files for different customers?”


#8

I think I found it, reading the Demo cockpit install.sh
Now I have to find how to switch to another example: backup current example (files config, storage.zip) and clean these (HOWTO?) before loading another example.


#9

There are many @joaomfranco, GraphCMS, Prismic, Contentful, etc… but most of them are cloud solutions (CaaS - content as a service). You can have an overview on headless solutions here: https://headlesscms.org


#10

Keep in mind that the Demo main purpose is to demonstrate the usage of Cockpit with a static generator, and not to be used as a final project (however it would be possible). You can just clone again the repo, rename the docker containers (in the docker compose file) and remove the contents of your storage folder (the structure of collections, contents and assets are inside the storage).


#11

Hello @pauloamgomes

I will upgrade my production VPS server to Centos 7 x86_64 to avoid the 32bits problem with node.js. So in order to test your Cockpit React Static Demo I installed a Virtualbox VirtualMachine on my computer with the latest minimal Centos 7 X 86_64 iso

I installed node.js v11.6.0 and in var/www/html/c directory, Cockpit alone is working fine. I do not want to overhead the server with docker and more complexity. I downloaded your Cockpit React Static Demo to var/www/html/cr and of course it do not install, i get an error:

./install.sh
line 57 docker-compose: did not find the order.

Questions:
1.- My apache configuration and firewall are set to port 80 how can I tell Cockpit React Static Demo to use port 80 instead 8088?.

2.- How can I install your application without adding more complexity (docker) and losing disk space on the VPS? even if that implies a more manual installation process.
Sorry if my questions are too obvious, I am not a programmer.
Thanks a lot in advance.
Regards
joejac


#12

Hi @joejac,

the main advantage of Doker is in removing complexity (you don’t need to deal with server configurations around webserver/php/etc…), usually I have my php apps running behind docker and have nginx in the server running as a reverse proxy, but it may require some server admin knowledge to build such setup.

If you just want to run the demo, you need to configure your server in the way you configure any other php solution, you need php (e.g. version 7.1 or higher), php-fpm running, a webserver that can handle php (I prefer nginx instead of apache) and configured to handle php requests using php-fpm.

After having the cockpit part running, you need to change the COCKPIT_HOST variable in your .env file (inside react-app).

Hope that helps
Paulo


#13

Hello @pauloamgomes and thank you for your answer.

I installed Docker-Compose on:
Centos 7.1810 x86_64
PHP 7.2
Apache 2.4.6
node --version v11.6.0
npm --version 6.5.0
yarn v1.12.3
With all that setup I downloaded CockpitCMS from Cockpit website and Cockpit alone is working fine in var/www/html/c/.

I followed your instructions to Install CockpitCMS-React-Static
I downloaded to var/www/html/cr/
cd cockpit
sudo ./install.sh
it downloaded everything

cd …/react-app
sudo yarn install

but when I try
sudo yarn start
It gives the error:

$ sh -ac ‘. .env.local; react-static-start’
sh: line 0: .: .env.local: file not found
error Command failed with exit code 1.

I go to:
http://192.168.56.4/cr/cockpit/www/install/
it redirects to:
http://localhost:8088/ which is the Virtualbox host machine, it is not the VM where all CockpitCMS-React-Static is installed

I go to:
http://192.168.56.4/cr/cockpit/www/
it redirects to:
http://192.168.56.4/auth/login

Not Found
The requested URL /auth/login was not found on this server.

Of course is outside the installed directory: var/www/html/cr/.

Sorry but it is not working, what can I do?
Thanks and regards
joejac


#14

For Cockpit check your config/config.yaml and change the base_url according to your host config.

The .env.local is not committed, you need to create it manually, copy from .env.production and change the variables to match the ones from Cockpit.


#15

Hello and thanks @pauloamgomes

I did the changes to config.yaml I created .env.local with the content of .env.production and changed COCKPIT_HOST and WEBSITE_SITE_ROOT and same errors.

Probably the problem is the extra layers of virtualization (Docker, Docker-Compose) inside of a Virtualbox machine, nested virtualization never worked for me.

But I saw that the installation of Docker, Docker-Compose and Cockpit React Static Demo loaded my test server with extra 2GBs of files and applications just for a few web pages. I can not afford 2GBs of overhead for a website that can be installed among 5 or 30MB including a PHP Flat File CMS. I loved what I saw in your video, I tried hard, even I installed a secondary VM with Fedora 29 and reinstalled everything, and even worst, it gave me more errors. With all my regret I have to give up Cockpit, because it does not have a viable front-end out of the box yet.

I understand that for demo purposes efficiency can be sacrificed, but not in production. I would suggest you to cut complexity and overhead to a minimum, because installing a couple of GBs per shared account on a web server to manage a few pages is not viable, at least for me.

If you create a simpler straightforward and direct installation process, without extra layers of complexities and load, that takes the minimum resources of a RedHat/Centos or Debian server, that are the majority of web servers many of which are VPSs, I can foresee a bright future for your Cockpit React Static project.

Thanks and best regards
Jose