concurrently kütüphanesi yardımı ile aynı anda iki sunucuyu çalıştırma

İki tane sunucumuz olduğunu var sayıyoruz. Biri Back-End diğeri Front-end 
Klasör dizinim şu şekilde blog/server/client 
Back-end tarafım server dizininin içinde  server dizinimin içine
npm i --save concurrently komutu ile kütüphanemizi indiriyoruz.

server dizinimde ki packpage.json dosyasını açıp;

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node index.js",
"server": "nodemon index.js",
"client": "npm run start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client \" "

Şeklinde kodlarımı ekliyorum. Artık npm run dev dediğimde iki sunucumda aktif olacak.

Derleme işlemi için ise 
"engines": {
"node": "8.1.1",
"npm": "5.0.3"
},
kodları atalaım heroku deploy yaptığımız lazım olacak.

Npm run dev yaptığınız da çalışmaz ise ve normalde çalışıyordu ise port numaralarınızı değişirtirdiğiniz dedüzelecektir.

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

React Router Params

Resim
 Bu konudaki amacımız. Axios kütüphanesini anlattığımız konuyu pekiştirmek. https://jsonplaceholder.typicode.com/posts adresinden postları çekip. Ardından Post id ye göre postun tamamını göstermek. Bu işleyişi yaparken Routerden parametreleri almayı öğreneceğiz. Reac ve router kurulumlarınızı yaptığınızı varsayarak devam ediyorum. Route kodum : < Route path = '/Post/:Post_id' component = { Post } /> Burada :/Post_id kısmı imlece ne yazarsak Post_id  ye atar. Post sayfamın ile tasarımı : http://localhost:3000/post/merhabarouter Şimdi params ımızı almanın yollunu bulalım. React da route bilgileri props ta tutulur. Bir componentDidMount life döngüsü oluşturup props ları log ile gösterip hangisini alacağımı bulacağım. Görüldüğü üzere bir obje döndü. Objenin içinde macth->params->path yolunda  params : { Post_id :  "merhabarouter" } let id = this .props.match.params.Post_id; Post_id nin yazımı onemlli aynı case sensetived...
Devamı

React HighOrderComponent Nedir ?

Resim
  HighOrderComponent nedir ? Aslında buna bir componentin başka bir componenti sarması da diyebiliriz. Örnek yapalım. Bir component yazalım ve bu component Contact komponentini sarmalasın. Contact komponentini saran componentimin adı rainbow olsun. Bu rainbow componentinde Boostrap classlarını kullanarak en üst div oluşturup renklendirme yapalım. asdasd Rainbow komponentim parametre olarak bir komponent alır. Daha sonra renk dizim var. Bu dizideki elemanların boostrapdan gelen renk classları 6 eleman içinden rastgele bir tanesini seçiyorum. Ve bu sectiğimi <div className="text-primary"> örneğinde olacağı gibi biçimlendiriyorum. Method base komponentimi return methoda gelen komponent parametremin props unu alır. Ve en üste yeni bir renk classı atar. Daha sonra düşük sıralı komponentim çağırılır ve parametre olarak gelen props un bir kopyası set edilir. Artık bu Rainbow komponentim ile sarmalan her bir komponent değişen renklere sahip olur. Burada bir com...
Devamı

React Axios1

Resim
 Axios en kısa tabiriyle front-end tarafından kendi Api mızdan yada başka bir Restful api dan veri çekmemize yarar.  Şimdi  https://rallycoding.herokuapp.com/api/music_albums adresinden veri çekelim.  https://jsonplaceholder.typicode.com/ sizde burada çekebilirsiniz. Buradan title, artist ve image propertilerini çekeceğim boostrap ile güzel bir card section yapıp burada göstereceğim.  React projenizi setup ettiğinizi düşünüyorum.   Yeni bir component oluşturur iken class base component oluşturmamız gerekiyor. Çünkü componentDidMounth methodu ile render methodumuzdan önce verilerimizi getireceğiz. Life cycle methodlarıda method base componentlerde kullanılmaz. npm i axios komutu ile projemin olduğu dizine axios kütüphanesini de dahil ediyorum. Componentimi şimdilik yazımı bu şekilde. Clasik boostrap card kullandım. Ben projeme boostrap css kullandım. Nasıl Kullanacağı blogun içinde mevcutbakabilirsiniz. Şimdi bu componentimin...
Devamı