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

create-react-app ile oluşturulmuş bir uygulamayı apache server altına deploy etmek

create-react-app tüm konfigurasyonlar ile (webpack, babel vs.) geliştirmeye hazır bir react uygulaması oluşturmaya yarar. Bunun için create-react-app global olarak yüklenmiş olmalıdır. Aşağıdaki komut ile global olarak yüklenebilir:

npm install -g create-react-app

Yükleme sonrası aşağıdaki komut ile bir react projesi oluşturulabilir:

create-react-app my-app

Bu komut içinde bulunulan bir dizinde “my-app” adında bir klasör açacak ve bizim react uygulamamızı bunun altında oluşturacaktır.

Bu dizine girip aşağıdaki komutu terminalde yazdığımızda uygulamanın local’de ayağa kalktığı görülecektir.

cd my-app

npm start

Bu uygulamayı derleyerek çıkan dosyayı Apache server altına deploy etmek istersek my-app altındaki public klasörüne aşağıdaki gibi bir “.htaccess” dosyası eklemek gerekiyor:

RewriteEngine On

RewriteBase  /

RewriteRule ^index\.html$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /index.html [L]

Eğer uygulamayı bir alt dizine deploy edeceksek package.json’a aşağıdaki satırı eklemek gerekemektedir.

"homepage": "/tstest/",

Sonrasında aşağıdaki komut ile uygulama derlenebilir:

npm run build

Bu komutun çalışması bitince my-app altında “build” klasörünün oluştuğu görülebilir.

Bunun altındaki dosyaların hepsi alınıp Apache server’da uygun yere kopyalandıktan sonra uygulamanın buradan da çalıştığı görülebilir.

Kaynaklar:

https://github.com/facebookincubator/create-react-app

https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md

https://medium.com/@baphemot/understanding-react-deployment-5a717d4378fd

React Router file kullanırken faydalı olabilir: https://stackoverflow.com/questions/37396427/how-to-bundle-a-react-app-to-a-subdirectory-on-a-server

https://stackoverflow.com/a/43197576/6593949