June 23, 2019 at 18:34Prisma-CMS as an engine for quickly creating MVP
Surely many have heard the concept of MVP ( Wiki Minimum Viable Product ). There are a lot of articles on MVP on MVP, but basically it is either just a description of what MVP is and what it is for, or various success and not very story. But I did not find a single article that described what MVP was doing. But it is believed that personal blogs are easier to do on one engine, online stores on another, etc. (each will substitute its name for the favorite engine for these purposes). But why then a more convenient engine for MVP is not defined? I will not give a clear answer to this question, but I will share my thoughts on what exactly for creating MVP my Prisma CMS is good, about which I wrote here a couple of months ago. Who cares, please, under the cat.
Interestingly, by and large, MVP can be compared to the more advanced prototyping wiki . At the same time, there is special software for prototyping, and once upon a time I even used the same Axure. But what was missing from Axure and why did I immediately abandon it? (I don’t know, maybe now he has become more advanced and these issues have been resolved, but at that time there wasn’t).
There were still moments, but these two are the most important. It turned out that the stages of prototyping and programming lived their own independent lives and did not affect each other in any way. But I would like the prototyping stage to smoothly go directly to programming. And within the framework of the current article, one can even suggest that prototyping flows into the creation of MVP, and then, if successful, MVP can be developed to the final full-fledged product. Indeed, if you think so, the creation of MVP does not always guarantee that in the future there will be a more complete product. After all, what is the point of creating MVP? Firstly, to realize the idea at a minimal cost so that you can try it out, and secondly, to study demand and decide for yourself whether it is worth investing and developing it to a full-fledged product. And so it turns out that we need a tool,
As a matter of fact, looking at Prisma CMS, I just see such an engine. There is a lot to quickly throw up the draft of the project:
And all this is openSource, that is, it is not SaaS, for which you have to constantly pay (without having everything at your disposal). This can be deployed on your server and customize for yourself.
Before I describe the process of installing it on my server and the customization processes, I suggest that you look at the recording of the process of creating a separate section on the site. It is almost 15 minutes, but just look at the first 4 minutes, this is more than enough to get an idea of Prisma CMS, and if there is interest, go on to further reading the topic, or maybe try to deploy the engine at home.
So, installing Prisma CMS on the server (I use ubuntu, preferably at least 4Gb of RAM and an SSD).
It is assumed that you are already familiar with node-js, npm / yarn, react, and graphql.
If everything is inserted at once in the terminal, the execution may break, so it is better to execute line by line.
This is a minimal installation without any access level settings, etc., just for informational purposes, that is, if you try on a new clean server, then everything will be done from the root (including launching the site). For our experiment, this is not at all important.
3. Launch docker containers with MySQL and prisma (prisma is a separate product, not mine, but with which the server side is strongly connected, see github.com/prisma/prisma ).
If you want to look into the database through phpMyAdmin, install it as well.
Will hang on port 8090. By default, the username / password is root / prisma
my-project / dev, respectively, you can write your own and create many projects on the same server.
Important! On production, port 4466 should be closed by a firewall, it should not be directly accessible from the outside.
After starting, you can open the server-ip : 4000 API .
As I wrote in a previous article, this is an intermediate server that implements your own logic on top of the generated one (which runs on port 4466).
We open one more terminal and in the same folder we execute
The front will start on port 3000. Now you can go directly to the "programming" of the front. Open server-ip : 3000. When entering, while there is not a single saved template for the front, an authorization button will be displayed for you. The logic is to register and start designing the site. Who is the first - that andsneaker site. This is what it looks like:
Starting through yarn start is a dev-mode, suitable for the first start (checking that everything works) and for programming the JS part directly. And for battle, of course, a collected front is needed. Interrupt running yarn start via Ctrl + C and build scripts.
You can go smoke and pour coffee, this process is not quick. In rare cases, the building falls apart the first time, just run it again, in which case, as a rule, it completes successfully and much faster.
When the building is over, run the assembled front.
Now the launch is much faster, and the scripts are smaller.
The video shows that in places there are very big problems with usability, but the project is still developing, gradually these problems are eliminated. But much can be done right in the front. Serious cleaning of the source code remains to be done, since there has accumulated a lot of everything that is already not really needed, but simply stretches as a legacy. As a result, the front should be much easier. And it will be assembled faster, and loading the page more quickly.
In any case, I repeat, in my opinion, how the engine for MVP can very well fit - quickly throw something and show the client. Moreover, if we proceed to the development of the final product, even if the front is not satisfied, we can completely throw it out and rewrite it our own way, while the database and server logic will not go anywhere. After all, this is headless-cms. But I hope that over time the front will be brought to a completely acceptable level.
If the community has interest, then I’ll write separately topics about how to customize the front (add your own blocks for the front editor) and how to customize the server (expand the scheme, add your own entities, add resolvers, etc.). Quite a lot of tools have already been worked out to quickly complete such tasks.
Project Sources
Thank you all for your attention!
Interestingly, by and large, MVP can be compared to the more advanced prototyping wiki . At the same time, there is special software for prototyping, and once upon a time I even used the same Axure. But what was missing from Axure and why did I immediately abandon it? (I don’t know, maybe now he has become more advanced and these issues have been resolved, but at that time there wasn’t).
- There is no work with real data. That is, I have a Users section in the prototype, but I can’t get the user data via the API and display them in a loop in my template. And indeed, in principle, there is no way to work with real data (create records, read them).
- Passing the prototyping stage and moving directly to development, you cannot use the templates created in the prototype. That is, after the prototype was created and agreed with the customer and when we switched to programming, we could just look at the prototype with our eyes, nothing more could be done with it. And so I wanted to throw a prototype and then use it in development.
There were still moments, but these two are the most important. It turned out that the stages of prototyping and programming lived their own independent lives and did not affect each other in any way. But I would like the prototyping stage to smoothly go directly to programming. And within the framework of the current article, one can even suggest that prototyping flows into the creation of MVP, and then, if successful, MVP can be developed to the final full-fledged product. Indeed, if you think so, the creation of MVP does not always guarantee that in the future there will be a more complete product. After all, what is the point of creating MVP? Firstly, to realize the idea at a minimal cost so that you can try it out, and secondly, to study demand and decide for yourself whether it is worth investing and developing it to a full-fledged product. And so it turns out that we need a tool,
As a matter of fact, looking at Prisma CMS, I just see such an engine. There is a lot to quickly throw up the draft of the project:
- Almost all the work is done at the front through our own WYSIWYG front-end editor.
- URLs are implemented on react-router, which allows addressing to also be written directly in the front in the editor, and not on the server.
- The API is implemented in GraphQL, which allows you to write queries in the front, and not on the server. At the same time, Graph i QL is integrated , which simplifies the process of writing queries.
- Plus, there are generated filters, page-by-page and other useful buns.
And all this is openSource, that is, it is not SaaS, for which you have to constantly pay (without having everything at your disposal). This can be deployed on your server and customize for yourself.
Before I describe the process of installing it on my server and the customization processes, I suggest that you look at the recording of the process of creating a separate section on the site. It is almost 15 minutes, but just look at the first 4 minutes, this is more than enough to get an idea of Prisma CMS, and if there is interest, go on to further reading the topic, or maybe try to deploy the engine at home.
So, installing Prisma CMS on the server (I use ubuntu, preferably at least 4Gb of RAM and an SSD).
It is assumed that you are already familiar with node-js, npm / yarn, react, and graphql.
1. Install the necessary software
If everything is inserted at once in the terminal, the execution may break, so it is better to execute line by line.
This is a minimal installation without any access level settings, etc., just for informational purposes, that is, if you try on a new clean server, then everything will be done from the root (including launching the site). For our experiment, this is not at all important.
sudo apt update
sudo apt install mc
sudo apt install git
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm i -g yarn
sudo apt-get install software-properties-common python-software-properties
sudo apt-key adv --keyserver hkp://p80.pool.sks-keyservers.net:80 --recv-keys 58118E89F3A912897C070ADBF76221572C52609D
sudo apt-add-repository 'deb https://apt.dockerproject.org/repo ubuntu-xenial main'
sudo apt-get update
sudo apt-get install -y docker-engine
sudo curl -L https://github.com/docker/compose/releases/download/1.18.0/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
2. Clone the repository
mkdir /var/www
cd /var/www
git clone https://github.com/prisma-cms/boilerplate
cd boilerplate
yarn --ignore-engines
3. Launch docker containers with MySQL and prisma (prisma is a separate product, not mine, but with which the server side is strongly connected, see github.com/prisma/prisma ).
sudo docker-compose -f src/server/scripts/docker/prisma/docker-compose.yml up -d
If you want to look into the database through phpMyAdmin, install it as well.
sudo docker run -d --link prisma_mysql_1:db --network prisma_default -p 8090:80 phpmyadmin/phpmyadmin
Will hang on port 8090. By default, the username / password is root / prisma
4. Deploy scheme
endpoint=http://localhost:4466/my-project/dev yarn deploymy-project / dev, respectively, you can write your own and create many projects on the same server.
Important! On production, port 4466 should be closed by a firewall, it should not be directly accessible from the outside.
5. Launch the API server
APP_SECRET=MyStrongSecret endpoint=http://localhost:4466/my-project/dev yarn start-server
After starting, you can open the server-ip : 4000 API .
As I wrote in a previous article, this is an intermediate server that implements your own logic on top of the generated one (which runs on port 4466).
6. Launch the front
We open one more terminal and in the same folder we execute
yarn start
The front will start on port 3000. Now you can go directly to the "programming" of the front. Open server-ip : 3000. When entering, while there is not a single saved template for the front, an authorization button will be displayed for you. The logic is to register and start designing the site. Who is the first - that and
7. Build scripts and run SSR (Servcer-Side Rendering)
Starting through yarn start is a dev-mode, suitable for the first start (checking that everything works) and for programming the JS part directly. And for battle, of course, a collected front is needed. Interrupt running yarn start via Ctrl + C and build scripts.
yarn buildYou can go smoke and pour coffee, this process is not quick. In rare cases, the building falls apart the first time, just run it again, in which case, as a rule, it completes successfully and much faster.
When the building is over, run the assembled front.
yarn start-ssr
Now the launch is much faster, and the scripts are smaller.
Conclusion
The video shows that in places there are very big problems with usability, but the project is still developing, gradually these problems are eliminated. But much can be done right in the front. Serious cleaning of the source code remains to be done, since there has accumulated a lot of everything that is already not really needed, but simply stretches as a legacy. As a result, the front should be much easier. And it will be assembled faster, and loading the page more quickly.
In any case, I repeat, in my opinion, how the engine for MVP can very well fit - quickly throw something and show the client. Moreover, if we proceed to the development of the final product, even if the front is not satisfied, we can completely throw it out and rewrite it our own way, while the database and server logic will not go anywhere. After all, this is headless-cms. But I hope that over time the front will be brought to a completely acceptable level.
If the community has interest, then I’ll write separately topics about how to customize the front (add your own blocks for the front editor) and how to customize the server (expand the scheme, add your own entities, add resolvers, etc.). Quite a lot of tools have already been worked out to quickly complete such tasks.
Project Sources
Thank you all for your attention!