Source files that make the collection interactive.
Before starting development, we need to add project domains to the /etc/hosts file.
127.0.0.1 svg24.dev
127.0.0.1 api.svg24.dev
127.0.0.1 assets.svg24.dev
127.0.0.1 board.svg24.dev
We also need to create self hosted certificates to enable ssl. This can be done, for example, using the mkcert.
mkcert \
-cert-file etc/ssl/cert.pem \
-key-file etc/ssl/privkey.pem \
'svg24.dev' \
'*.svg24.dev'- Install dependencies with
yarn; - Create docker images and containers with
make dev.
For the .{cjs,d.ts,js,ts,tsx} files, eslint is used based on airbnb rules with a few changes.
For the .css files, stylelint is used with custom rules. It should also be noted that despite the use of tailwindcss as a framework in the project, we use bem classes. This means that, for example, a .css file of the same name is added for each component. This approach has a number of advantages over writing tailwindcss classes in the layouts itself: we don't litter with long sets of classes and we are not limited to the framework classes.
Before considering each workspace, it should be noted that the project is built like monorepo and all is done in docker containers.
$ docker images | $ docker ps | $ docker network ls
REPOSITORY TAG | NAMES | NAME
platform_api latest | platform-api | platform_nginx
platform_assets latest | platform-assets |
platform_board latest | platform-board |
platform_db latest | platform-db |
platform_nginx latest | platform-nginx |
platform_root latest | platform-root |
platform_www latest | platform-www |
alpine 3.14 |
certbot/certbot v1.7.0 |
mongo 5.0 |
nginx 1.21.3-alpine |
node 16-alpine3.14 |Let's take a look at the docker-compose (next as dc) files. Each stage has its own dc file (besides the dc-base, it is used, as you might guess, as the basis):
dc-devused to start development.dc-previewused to locally preview production build.dc-prodused to build for production.
| Workspace | Stack | Description | Doc | URL |
|---|---|---|---|---|
| root | JavaScript, Docker, Vite, Gulp. | This level contains the files necessary for development: docker, lint, gulp and other files. It should also be noted that all devDependencies have been moved to this level for convenience. |
||
| api | TypeScript, Fastify. | This package is responsible for communicating with the database and local files. | api.http | api.svg24.dev |
| assets | TypeScript, Tailwindcss. | A place where assets are stored that are basic or just used in a few packages. | assets.svg24.dev | |
| board | TypeScript, React, Mobx, Tailwindcss. | The largest part of the project is the UI for interacting with the collection. | board.svg24.dev | |
| collection | An empty package designed to optimize logos. | |||
| www | Typescript, Nunjucks, Tailwindcss. | Landing page as a presentation of the collection. | svg24.dev |
Further instructions will be carried out on the Ubuntu 20.04 LTS as VPS.
Once we have completed the basic server setup (new user, ssh, etc.), we install the necessary packages, docker and docker-compose.
apt install curl make nodejs yarn
addgroup user dockerNext, we clone the repository.
git clone https://github.com/svg24/platform /srv/platform
chown -R user:user /srv/platformSince the development uses self hosted certificate, we need to create dummy files in order not to get errors when creating production images.
echo >> /srv/platform/etc/ssl/cert.pem
echo >> /srv/platform/etc/ssl/privkey.pemIn addition, we need to create directory for the real certificate, which is used as a volume in the containers.
mkdir /etc/letsencryptFinally, we create production images and containers.
make prodIt should be noted that if there are no previously created real certificates, it is necessary to run the script to create them.
make staging-certbot
make force-certbot