create-react-app ile oluşturulan projeye hot-reload özelliği eklemek

create-react-app ile oluşturulan bir projede default olarak bir hot-reload özelliği bulunuyor. Ancak tüm sayfa yenilendiği için, başlarda çok problem olmasa da, proje büyüdükçe faydalı olmaktan çıkıyor.

"index.js" dosyasında, webpack'in "module.hot" özelliğine ekleme yapılarak hot-reload özelliği işlevsel hale getirilebiliyor.


Bunun için "index.js" dosyasında aşağıdaki gibi değişiklik yapmak gerekiyor:

import React from 'react';

import ReactDOM from 'react-dom';

import './assets/index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App/>, document.getElementById('root'));

if (module.hot) {

module.hot.accept('./App', () => {

const NextApp = require('./App').default;

ReactDOM.render(<NextApp/>, document.getElementById('root'));

});

}

registerServiceWorker();

Vagrant vb. uygulamalar aracılığı ile geliştirme yaparken bu yeterli olmayabiliyor. Örneğin, geliştirme ortamı windows, kod derleme ortamı linux ise, windows tarafındaki dosya değişiklikleri, linux tarafından algılanamayabiliyor.

Bunun için ise root dizinde ".env" dosyasına aşağıdaki kodun eklenerek polling'in enable edilmesi gerekiyor. 

CHOKIDAR_USEPOLLING=true

Root dizinde bir ".env" dosyası yoksa, önce bunu oluşturmak gerekiyor.

Bu işlemler sonrasında hot-reload neredeyse sorunsuz çalışıyor. 

Kaynaklar:

• https://medium.com/superhighfives/hot-reloading-create-react-app-73297a00dcad
• https://stackoverflow.com/questions/42025225/react-auto-reload-with-vagrant
• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env