Alexander Tolkunov alex-tolkunov

По мотивам вопросов чатика react.js@telegram

Оффтоп: пожалуйста, не нужно в сотый раз объяснять уже набившую оскомину тему новичку, который задаст подобный вопрос. Просто поделитесь ссылкой на этот текст. С уважением, Андрей @XaveScor Звёздочка

Краткий ответ на этот вопрос, если вы не хотите разбираться детальнее:

Если вы экспериментируете, то можете взять в качестве стейт-менеджера что угодно. Буквально. Опыт лишним не будет.

Более удобной и актуальной версией является эта статья с использованием `traefik`

https://gist.github.com/dancheskus/365e9bc49a73908302af19882a86ce52

Certbot и nginx, как обратный прокси в Docker (пример с 2 react проектами)

В результате будет 2 react проекта на 1 сервере доступных по разным ссылкам

	import { matchPath, RouteProps } from "react-router";

	// historyUpdated event is subscribed to history via history.listen or any other way

	export const createPathMatcher = <Match = unknown>(config: {
	path: string \| string[] \| RouteProps;
	clock?: Event<any> \| Store<any> \| Effect<any, any>;
	}) => {
	return sample({
	source: historyUpdated,

	import { setIn } from 'final-form';
	import { useMemo } from 'react';

	/**
	* Sets the `innerError.message` in an `errors` object at the key
	* defined by `innerError.path`.
	* @param {Object} errors The object to set the error in.
	* @param {{ path: string, message: string }} innerError A `yup` field error.
	* @returns {Object} The result of setting the new error message onto `errors`.
	*/

	import { useCallback, useEffect, useState } from 'react';
	import { useSetRecoilState } from 'recoil';
	import { useKeycloak } from '@react-keycloak/web';

	import { commonNotification } from './common';

	/**
	* Returns the auth info and some auth strategies.
	*
	*/

	version: "3.4"

	services:
	pgAdmin:
	restart: always
	image: dpage/pgadmin4
	ports:
	- "8000:80"
	environment:
	PGADMIN_DEFAULT_EMAIL: 1234@admin.com

	{
	"parser": "@typescript-eslint/parser",
	"parserOptions": {
	"project": "./tsconfig.json",
	"tsconfigRootDir": "."
	},
	"env": {
	"browser": true,
	"jest/globals": true
	},

	# Dockerfile for react.js app and nginx
	# build environment
	FROM node:8-alpine as builder
	WORKDIR /usr/src/app
	ENV PATH /usr/src/app/node_modules/.bin:$PATH
	COPY package.json /usr/src/app/package.json
	RUN npm install
	COPY . /usr/src/app
	RUN npm run build --loglevel verbose

	import * as React from 'react';
	import { theme } from './theme';
	import { ThemeProvider, createGlobalStyle } from './styled-components';

	const GlobalStyle = createGlobalStyle`
	body {
	font-family: Times New Roman;
	}
	`;

	// Файл "tsconfig.json":
	// - устанавливает корневой каталог проекта TypeScript;
	// - выполняет настройку параметров компиляции;
	// - устанавливает файлы проекта.
	// Присутствие файла "tsconfig.json" в папке указывает TypeScript, что это корневая папка проекта.
	// Внутри "tsconfig.json" указываются настройки компилятора TypeScript и корневые файлы проекта.
	// Программа компилятора "tsc" ищет файл "tsconfig.json" сначала в папке, где она расположена, затем поднимается выше и ищет в родительских папках согласно их вложенности друг в друга.
	// Команда "tsc --project C:\path\to\my\project\folder" берет файл "tsconfig.json" из папки, расположенной по данному пути.
	// Файл "tsconfig.json" может быть полностью пустым, тогда компилятор скомпилирует все файлы с настройками заданными по умолчанию.
	// Опции компилятора, перечисленные в командной строке перезаписывают собой опции, заданные в файле "tsconfig.json".

Alexander Tolkunov alex-tolkunov

Более удобной и актуальной версией является эта статья с использованием traefik

Certbot и nginx, как обратный прокси в Docker (пример с 2 react проектами)

Более удобной и актуальной версией является эта статья с использованием `traefik`