Процесс разработки, как это выглядит с nodejs + react + mongodb в сравнении с php + mysql!

[support 446]

Немного про процесс разработки, т.е. внесение правок в исходный код.

В php+mysql всё просто.

Внёс правку в код - и сразу видишь всё в браузере, нажав кнопку обновить.

 

В случае с react + nodejs + mongodb всё немного сложнее, т.к. это приложения и они собираются из исходного кода, есть frontend, есть backend.

Всё это собирается, компилируется из исходников, и запускается веб-сервер.

 

т.е. есть два этапа, грубо говоря, копия для работы и копия для установки на веб-сервер.

Сначала всё правится, тестируется, проверяется, затем всё собирается, компилируется и выкладывается на сервер и только потом магазин со всеми изменениями доступен посетителям.

 

Принципиальная разница в том, что нужна сборка, компиляция исходного кода. В php тоже частично сейчас используется компиляция и сборка (например пропроцессоры css, sass, scss, всё это тоже по сути компиляция из исходников), но это всё-таки совсем другое дело.

В проекте на nodejs + react сборка, компиляция - это прям стандартный процесс, без которого не обойтись, в отличии от php.

 

Это и плюс и минус.

 

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

 

В этом смысле всё сложнее намного чем в php + mysql.

 

Но это тоже решается, использованием так называем watchers, наблюдателей, т.е. Вы просто запускаете особым образом и сборку и веб-сервер.

Всё собирается "на лету", т.е. сразу же всё собралось и перезапустились приложения и Вы точно так же можете видеть изменения в браузере.

 

Нужно только запускать сборку и запускать приложения с вотчерами.

Итак, хотим мы что-то изменить в магазине, написовать свой шаблон или ещё что, не важно.

Будем считать, что у нас уже всё настроено, все зависимости установлены, всё запускается без ошибок.

 

Процесс разработки выглядит так:

 

1. Запускаем сборку с вотчером:

npm run build:watch

Это значит, что не надо после каждой правки файла вручную запустить npm run build, все изменения в файлах автоматически отслеживаются и компилируются.

 

Терминал не закрываем. Окно терминала должно оставаться открытым постоянно. Там будет видно, что сборка происходит после каждого изменения в файлах.

 

2. Запускаем приложения с вотчером.

pm2 start process.json --watch

 

Это значит, что запустятся наши приложения store и api и будет работать вотчер, который будет следить на именения, если код поменялся, приложения перезаупстились.

 

Тем самым мы добиваемся более-менее похожего процесса разработки на php + mysql.

 

В таком случае все изменения, что мы вносим код видны сразу же в браузере, просто обновляем страницу и видим изменения.

 

Не надо после каждой правки все вручную пернсобираться, стартовать приложения каждый раз по-новой.

Ещё желательно отключить service worker, а то в браузере может жёстко всё кэшироваться через wervice worker.

Для этого в vamshop-storefront приложении, в файл /src/client/index.js закомментируйте код:

if ('serviceWorker' in navigator) {
	window.addEventListener('load', () => {
		navigator.serviceWorker
			.register('/sw.js')
			.then(registration => {
				console.log('SW registered.');
			})
			.catch(registrationError => {
				console.log('SW registration failed: ', registrationError);
			});
	});
}

например так:

/*if ('serviceWorker' in navigator) {
	window.addEventListener('load', () => {
		navigator.serviceWorker
			.register('/sw.js')
			.then(registration => {
				console.log('SW registered.');
			})
			.catch(registrationError => {
				console.log('SW registration failed: ', registrationError);
			});
	});
}*/

и в браузере, в консоли разработчика (открыть которую можно кнопкой f12) в разделе Application - Service Worker отключите его, нажав Unergister.

 

Всё это происходит на локальном компе для разработки.

После проверки, что всё хорошо, всё работает.

Уже переноси всё на рабочий сервер в собранном, скомпилированном виде.

На сервер уже будет работать собранная версия, без лишних библиотек, исходников и прочего.

 

Это тоже и плюс и минус, по сравнению с php + mysql.

 

Просто разные подходы и разные технологии.

 

Но конечно следует сказать, что php + mysql гораздо проще в работе, в отслеживании всяких проблем и ошибок.

Нет никакой компиляции, всё доступно здесь и сейчас, что на локальном компе, что на сервере.