Öğretici: Visual Studio'da Node.js ve Express uygulaması oluşturma

Bu makalede, Express çerçevesini kullanan basit bir Node.js web uygulaması oluşturmak için Visual Studio'yu kullanmayı öğreneceksiniz.

Başlamadan önce, size bazı önemli kavramları tanıtacak hızlı bir SSS aşağıda verilmiştir:

• Node.js nedir?

  Node.js, JavaScript kodunu yürüten sunucu tarafı bir JavaScript çalışma zamanı ortamıdır.

• npm nedir?

  Paket yöneticisi, Node.js kaynak kodu kitaplıklarını kullanmayı ve paylaşmayı kolaylaştırır. Node.js için varsayılan paket yöneticisi npm'dir. npm paket yöneticisi kitaplıkların yüklenmesini, güncelleştirilmesini ve kaldırılmasını basitleştirir.

• Express nedir?

  Express, Node.js'nin web uygulamaları oluşturmak için kullandığı bir sunucu web uygulaması çerçevesidir. Express ile kullanıcı arabirimi oluşturmanın birçok farklı yolu vardır. Bu öğreticide sağlanan uygulama, ön ucu işlemek için Express uygulama oluşturucusunun Pug adlı varsayılan şablon altyapısını kullanır.

Önkoşullar

Aşağıdakileri yüklediğinizden emin olun:

• ASP.NET ve web geliştirme iş yükü yüklü visual studio 2022 sürüm 17.4 veya üzeri. Ücretsiz yüklemek için Visual Studio indirmeleri sayfasına gidin. İş yükünü yüklemeniz gerekiyorsa ve zaten Visual Studio'nuz varsa Araçlar>Araçları ve Özellikleri Al...'e gidin ve bu da Visual Studio Yükleyicisi açar. ASP.NET ve web geliştirme iş yükünü ve ardından Değiştir'i seçin.
• node.js ile birlikte gelen npm (https://www.npmjs.com/ )
• npx (https://www.npmjs.com/package/npx)

Uygulamanızı oluşturma

1. Başlangıç penceresinde (açmak için Dosya>Başlangıç Penceresi'ni seçin), Yeni proje oluştur'u seçin.

   

2. Üstteki arama çubuğunda Express araması yapın ve ardından JavaScript Express Uygulaması'nı seçin.

   

3. Projenize ve çözümünüze bir ad verin.

Proje özelliklerini görüntüleme

Varsayılan proje ayarları, projeyi derlemenize ve hatalarını ayıklamanıza olanak sağlar. Ancak, ayarları değiştirmeniz gerekiyorsa, Çözüm Gezgini'da projeye sağ tıklayın, Özellikler'i seçin ve ardından Derleme veya Hata Ayıklama bölümüne gidin.

Projenizi oluşturma

Projeyi oluşturmak için Derleme>Çözümü Oluştur'u seçin.

Uygulamanızı başlatma

F5 tuşuna basın veya pencerenin üst kısmındaki Başlangıç düğmesini seçtiğinizde bir komut istemi görürsünüz:

• düğümünü çalıştıran npm ./bin/www komutu

Ardından, temel Express uygulamasının gösterildiğini görmeniz gerekir!

Uygulamanızda hata ayıklama

Şimdi uygulamanızda hata ayıklamak için kullanabileceğiniz birkaç yöntemden geçeceğiz.

İlk olarak, uygulamanız çalışmaya devam ediyorsa Shift + F5 tuşlarına basın veya geçerli oturumu durdurmak için pencerenin üst kısmındaki kırmızı durdur düğmesini seçin. Oturumun durdurulmasının uygulamanızı gösteren tarayıcıyı kapattığını ancak Node işlemini çalıştıran komut istemi penceresinin arkasında kaldığını fark edebilirsiniz. Şimdilik devam eden komut istemlerini kapatın. Bu makalenin ilerleyen bölümlerinde Node işlemini neden çalışır durumda bırakmak isteyebileceğiniz açıklanmaktadır.

Düğüm işleminde hata ayıklama

Başlangıç düğmesinin yanındaki açılan listede aşağıdaki başlangıç seçeneklerini görmeniz gerekir:

• localhost (Edge)
• localhost (Chrome)
• Geliştirme Env hatalarını ayıklama
• Düğümü ve Tarayıcıyı Başlat

Devam edin ve Düğümü ve Tarayıcıyı Başlat seçeneğini belirleyin. Şimdi F5 tuşuna basmadan veya Yeniden Başlat düğmesini seçmeden önce, aşağıdaki kod satırından önce sol oluğu seçerek index.js dosyasında (routes klasöründe) bir kesme noktası ayarlayın:res.render('index', { title: 'Express' });

Ardından F5 tuşuna basın veya hata ayıklamayı>başlat hata ayıklamayı seçerek uygulamanızda hata ayıklayın.

Hata ayıklayıcının az önce ayarladığınız kesme noktasında duraklatılmış olduğunu görmeniz gerekir. Duraklatılmış durumdayken uygulama durumunuzu inceleyebilirsiniz. Değişkenlerin üzerine geldiğinizde bunların özelliklerini inceleyebilirsiniz.

Durumu incelemeyi bitirdiğinizde devam etmek için F5 tuşuna basın ve uygulamanız beklendiği gibi yüklenmelidir.

Bu kez, stop tuşuna bastığınızda hem tarayıcının hem de komut istemi pencerelerinin kapandığını fark edeceksiniz. Nedenini görmek için launch.json dosyasına daha yakından bakın.

launch.json dosyasını anlama

launch.json şu anda .vscode klasöründe bulunur. .vscode klasörünü Çözüm Gezgini'da göremiyorsanız Tüm Dosyaları Göster'i seçin.

Daha önce Visual Studio Code ile çalıştıysanız launch.json dosyası tanıdık görünecektir. Buradaki launch.json, hata ayıklama için kullanılan başlatma yapılandırmalarını belirtmek için Visual Studio Code'dakiyle aynı şekilde çalışır. Her girdi, hata ayıklanacak bir veya daha fazla hedefi belirtir.

İlk iki girdi tarayıcı girdileridir ve aşağıdaki gibi görünmelidir:

    {
      "name": "localhost (Edge)",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    },
    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public"
    }

Yukarıdaki girişlerde öğesinin bir tarayıcı türüne ayarlandığını type görebilirsiniz. Tek hata ayıklama hedefi olarak yalnızca bir tarayıcı türüyle başlatırsanız, Visual Studio yalnızca ön uç tarayıcı işleminde hata ayıklar ve Node işlemi bir hata ayıklayıcı eklenmeden başlatılır, yani Node işleminde ayarlanan kesme noktaları bağlanmaz .

Oturum durduruldukten sonra Düğüm işlemi de çalışmaya devam eder. Tarayıcı hata ayıklama hedefi olduğunda kasıtlı olarak çalışır durumda bırakılır, çünkü yalnızca ön uçta iş yapılıyorsa arka uç işleminin sürekli çalıştırılması geliştirme iş akışını kolaylaştırır.

Bu bölümün başında, Düğüm işleminde kesme noktaları ayarlamak için kalan komut istemi penceresini kapattınız. Düğüm işleminin hata ayıklanabilir olması için hata ayıklayıcı ekli olarak yeniden başlatılması gerekir. Hata ayıklanamayan bir Düğüm işlemi çalışır durumda bırakılırsa, Düğüm işlemini hata ayıklama modunda başlatma girişimi (bağlantı noktasını yeniden yapılandırmadan) başarısız olur.

launch.json dosyasındaki üçüncü girdi hata ayıklama türü olarak belirtir node ve şuna benzer olmalıdır:

    {
      "name": "Debug Dev Env",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/bin",
      "program": "${workspaceFolder}/bin/www",
      "stopOnEntry": true
    }

Bu girdi yalnızca hata ayıklama modunda Düğüm işlemini başlatır. Hiçbir tarayıcı başlatılmaz.

"launch.json* dosyasında sağlanan dördüncü girdi aşağıdaki bileşik başlatma yapılandırmasıdır.

    {
      "name": "Launch Node and Browser",
      "configurations": [
        "Debug Dev Env",
        "localhost (Edge)"
      ]
    }

Bu bileşik yapılandırma, vscode bileşik başlatma yapılandırmasıyla aynıdır ve bu yapılandırmanın seçilmesi hem ön uçta hem de arka uçta hata ayıklamanıza olanak tanır. Düğüm ve tarayıcı işlemleri için tek tek başlatma yapılandırmalarına başvurduğunu görebilirsiniz.

Başlatma yapılandırmasında kullanabileceğiniz başka birçok öznitelik vardır. Örneğin, nesnesindeki özniteliği olarak ayarlayarak bir yapılandırmayı açılan listeden hidden gizleyebilir, ancak yine de presentation başvurulabilir olmasını truesağlayabilirsiniz.

    {
      "name": "localhost (Chrome)",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}\\public",
      "presentation": {
        "hidden": true
      }
    }

Hata ayıklama deneyiminizi geliştirmek için kullanabileceğiniz özniteliklerin listesi için Seçenekler'e tıklayın. Şu anda yalnızca başlatma yapılandırmalarının desteklendiğini lütfen unutmayın. Ekleme yapılandırması kullanmaya yönelik tüm girişimler dağıtım hatasına neden olur.