Prisma-CMS as an engine for quickly creating MVP
Surely many have heard the concept of MVP (Minimally viable wiki product). On Habré there are also many articles about MVP, but basically this or just a description of what MVP is and why it is, or various success and not very story. But I didn’t find a single article where I’m describing what my 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 their own favorite engine name for this purpose). But why then is not a more convenient MVP engine defined? I will not give a clear answer to this question, but I will share my thoughts on exactly how to create an MVP, my Prisma CMS, which I wrote here a couple of months ago, is good. Who cares, I ask under the cat.
Interestingly, by and large MVP can be compared with more advanced wiki prototyping. At the same time, there is special software for prototyping, and I once even used Axure for a long time. But what was not enough for me in Axure and because of what I almost immediately refused it? (I do not know, maybe now he has become more advanced and these issues have been resolved, but at that time there wasn’t).
There were other moments, but these two are the most important. It turned out that the stages of prototyping and programming lived their own independent life and did not affect each other. And I would like the prototyping stage to flow smoothly into programming. And in the framework of the current article it is possible to suggest that prototyping flows into the creation of MVP, and then, if successful, develop the MVP to the final full-fledged product. After all, 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? First, to realize the idea with minimal costs so that you can try it in your work, and second, to study the demand and decide for yourself whether to invest further and develop it to a full-fledged product. And it turns out that we need a tool that would allow us to quickly create prototypes / MVP, but on the other hand, if the MVP succeeds, we could develop the project further without any special restrictions.
')
As a matter of fact, looking at Prisma CMS, I just see this engine. There is a lot to quickly lay out the project blank:
And all this is openSource, that is, it is not SaaS, for which you have to constantly pay (not even having everything at your own disposal). This can be deployed on your server and customized for yourself.
Before I describe the process of installing it on my server and the processes of customization, I suggest looking at the record of the process of creating a separate section on the site. It is almost 15 minutes, but it is enough to look at the first 4 minutes, this is more than enough to get an idea of the Prisma CMS, and if you have interest, proceed to further reading the topic, and maybe try to deploy the engine.
So, installing Prisma CMS on the server (I use ubuntu, preferably at least 4Gb of RAM and an SSD drive).
It assumes that you are already familiar with node-js, npm / yarn, react, and graphql.
If you insert everything in the terminal at once, the execution may fail, so it is better to execute line by line.
This is the minimum installation without any settings of access levels, etc., just for informational purposes, that is, if you try on a new clean server, then everything will be done from root (including the launch of the site). For our experiment, this is not important at all.
3. We launch docker containers with MySQL and prisma (prisma is a separate product, not mine, but with which the server part is strongly connected, see github.com/prisma/prisma ).
If you want to look into the database through phpMyAdmin, install it too.
It will hang on port 8090. The default login / password is root / prisma
my-project / dev, respectively, you can write your own and create many projects on one server.
Important! At the production port 4466 should be closed by a firewall, it should not be directly accessible from the outside.
After startup, you can open the server-ip : 4000 API.
As I wrote in the previous article, this is an intermediate server that implements your own logic over 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 break directly to the "programming" of the front. You open server-ip : 3000. When entering, there is no saved template for the front, the authorization button will be displayed for you. The logic is to register and start making a website. Who is the first - that andsneakers site. This is how it looks like:
Starting via yarn start is a dev mode, suitable for the first start (checking that everything works) and for programming the JS part directly. And for the battle, of course, the assembled front was needed. We interrupt the launched yarn start via Ctrl + C and build scripts.
You can go to smoke and pour coffee, this process is not fast. In rare cases, the building collapses from the first time, just start again, in which case it usually 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 in size.
The video shows that sometimes 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. Also, there is still a serious cleaning of the source code, since there is a lot of everything accumulated there that is not really needed, but simply drags on with heritage. As a result, the front should be much easier. And going to be faster and faster loading the page.
In any case, I repeat, in my opinion, how the engine for MVP can even fit — to quickly throw something and show it to the client. Moreover, if we proceed to the development of the final product, even if the front does not suit, you can completely throw it out and rewrite it in your own way, while the database and server logic will not go anywhere. After all, these are headless-cms. But I hope that in time the front will be brought to a completely acceptable level.
If the community has an interest, I will then separately write topics about how to customize the front (add my blocks for the front editor) and how to customize the server (expand the scheme, add my entities, add resolvers, etc.). Already accumulated quite a lot of tools to quickly perform such tasks.
Project sources
Thank you all for your attention!
Interestingly, by and large MVP can be compared with more advanced wiki prototyping. At the same time, there is special software for prototyping, and I once even used Axure for a long time. But what was not enough for me in Axure and because of what I almost immediately refused it? (I do not know, maybe now he has become more advanced and these issues have been resolved, but at that time there wasn’t).
- No work with real data. That is, I have the Users section in the prototype, but I cannot get user data from the API and display it in a loop in my template. And in general, in principle, it is not possible to work with real data (create records, read them).
- Passing through the prototyping stage and going directly to the 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 I wanted to distribute the prototype and then use it in development.
There were other moments, but these two are the most important. It turned out that the stages of prototyping and programming lived their own independent life and did not affect each other. And I would like the prototyping stage to flow smoothly into programming. And in the framework of the current article it is possible to suggest that prototyping flows into the creation of MVP, and then, if successful, develop the MVP to the final full-fledged product. After all, 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? First, to realize the idea with minimal costs so that you can try it in your work, and second, to study the demand and decide for yourself whether to invest further and develop it to a full-fledged product. And it turns out that we need a tool that would allow us to quickly create prototypes / MVP, but on the other hand, if the MVP succeeds, we could develop the project further without any special restrictions.
')
As a matter of fact, looking at Prisma CMS, I just see this engine. There is a lot to quickly lay out the project blank:
- Virtually all work is done on the front through our own WYSIWYG front editor.
- The URLs are implemented on react-router, which allows targeting 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 requests in the front, not on the server. At the same time, Graphi QL is integrated, which simplifies the process of writing queries.
- Plus, there are generated filters, pagination and other useful buns.
And all this is openSource, that is, it is not SaaS, for which you have to constantly pay (not even having everything at your own disposal). This can be deployed on your server and customized for yourself.
Before I describe the process of installing it on my server and the processes of customization, I suggest looking at the record of the process of creating a separate section on the site. It is almost 15 minutes, but it is enough to look at the first 4 minutes, this is more than enough to get an idea of the Prisma CMS, and if you have interest, proceed to further reading the topic, and maybe try to deploy the engine.
So, installing Prisma CMS on the server (I use ubuntu, preferably at least 4Gb of RAM and an SSD drive).
It assumes that you are already familiar with node-js, npm / yarn, react, and graphql.
1. Install the necessary software
If you insert everything in the terminal at once, the execution may fail, so it is better to execute line by line.
This is the minimum installation without any settings of access levels, etc., just for informational purposes, that is, if you try on a new clean server, then everything will be done from root (including the launch of the site). For our experiment, this is not important at all.
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. We launch docker containers with MySQL and prisma (prisma is a separate product, not mine, but with which the server part is strongly connected, see github.com/prisma/prisma ).
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 too.
docker run -d --link prisma_mysql_1:db --network prisma_default -p 8090:80 phpmyadmin/phpmyadmin It will hang on port 8090. The default login / password is root / prisma
4. Deploy scheme
endpoint=http://localhost:4466/my-project/dev yarn deploy my-project / dev, respectively, you can write your own and create many projects on one server.
Important! At the production port 4466 should be closed by a firewall, it should not be directly accessible from the outside.
5. We start the API server
APP_SECRET=MyStrongSecret endpoint=http://localhost:4466/my-project/dev yarn start-server After startup, you can open the server-ip : 4000 API.
As I wrote in the previous article, this is an intermediate server that implements your own logic over the generated one (which runs on port 4466).
6. Run 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 break directly to the "programming" of the front. You open server-ip : 3000. When entering, there is no saved template for the front, the authorization button will be displayed for you. The logic is to register and start making a website. Who is the first - that and
7. Build scripts and run SSR (Servcer-Side Rendering)
Starting via yarn start is a dev mode, suitable for the first start (checking that everything works) and for programming the JS part directly. And for the battle, of course, the assembled front was needed. We interrupt the launched yarn start via Ctrl + C and build scripts.
yarn build You can go to smoke and pour coffee, this process is not fast. In rare cases, the building collapses from the first time, just start again, in which case it usually 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 in size.
Conclusion
The video shows that sometimes 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. Also, there is still a serious cleaning of the source code, since there is a lot of everything accumulated there that is not really needed, but simply drags on with heritage. As a result, the front should be much easier. And going to be faster and faster loading the page.
In any case, I repeat, in my opinion, how the engine for MVP can even fit — to quickly throw something and show it to the client. Moreover, if we proceed to the development of the final product, even if the front does not suit, you can completely throw it out and rewrite it in your own way, while the database and server logic will not go anywhere. After all, these are headless-cms. But I hope that in time the front will be brought to a completely acceptable level.
If the community has an interest, I will then separately write topics about how to customize the front (add my blocks for the front editor) and how to customize the server (expand the scheme, add my entities, add resolvers, etc.). Already accumulated quite a lot of tools to quickly perform such tasks.
Project sources
Thank you all for your attention!
Source: https://habr.com/ru/post/457270/
All Articles