IPC routing completed.

src/main/index.js

@@ -2,6 +2,20 @@ import { app, shell, BrowserWindow, ipcMain } from 'electron'
 import { join } from 'path'
 import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'
+import fs from 'node:fs/promises'
+
+
+async function loadConfigurationYAML() {
+  try {
+    const data = await fs.readFile('./resources//config.yaml', { encoding: 'utf8' });
+    console.log(data);
+    return data
+  } catch (err) {
+    console.log(err);
+    return (`There was an error reading the file: <br> ${err} `)
+  }
+
+}
 
 function createWindow() {
   // Create the browser window.
@@ -51,6 +65,7 @@ app.whenReady().then(() => {
 
   // IPC test
   ipcMain.on('ping', () => console.log('pong'))
+  ipcMain.handle("loadConfigurationYML", loadConfigurationYAML)
 
   createWindow()
 

src/renderer/src/App.vue

@@ -6,8 +6,13 @@ import { ref } from 'vue'
 
 const movies = ref([])
 const apiKey = 'a0eb411ca9c81896004dce1d27a7245b'
+const configuration = ref('Loading....')
 
 const ipcHandle = () => window.electron.ipcRenderer.send('ping')
+const getConfigFileContents = async () => {
+  const returnValue = await window.electron.ipcRenderer.invoke('loadConfigurationYML')
+  configuration.value = returnValue
+}
 
 const getTrendingMovies = (category) => {
   return fetch(`https://api.themoviedb.org/3/trending/movie/${category}?api_key=${apiKey}`)
@@ -15,7 +20,6 @@ const getTrendingMovies = (category) => {
     .then((data) => {
       movies.value = data.results
     })
-    // .then(() => console.log(movies.value))
 }
 
 onMounted(() => {
@@ -26,21 +30,11 @@ onMounted(() => {
 <template>
   <img alt="logo" class="logo" src="./assets/electron.svg" />
   <div class="creator">Powered by electron-vite</div>
-  <div class="text">
-    Build an Electron app with
-    <span class="vue">Vue</span>
-  </div>
-  <p class="tip">Please try pressing <code>F12</code> to open the devTool</p>
-  <div class="actions">
-    <div class="action">
-      <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
-    </div>
-    <div class="action">
-      <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
-    </div>
-  </div>
-  <Versions />
 
+  <Versions />
+  <button type="button" @click="ipcHandle">Send Ping</button>
+  <button type="button" @click="getConfigFileContents">Load config</button>
+  <div>{{ configuration }}</div>
   <div class="container">
     <div class="text-center">
       <h2 class="text-center mt-5">Trending Movies 🍿</h2>
@@ -55,7 +49,6 @@ onMounted(() => {
 
   <div v-if="movies.length > 0" class="row">
     <div v-for="(movie, i) in movies" :key="i" class="col-md-4">
-      <!-- <li>{{ movie.vote_average }}</li> -->
       <MovieCard :movie="movie" />
     </div>
   </div>

src/renderer/src/components/MovieCard.vue

@@ -18,7 +18,7 @@
                 <i class="fas fa-plus"></i>
               </button>
             </div>
-            <small class="ms-auto">Rating {{ movie.vote_average }}/10</small>
+            <small class="ms-auto">Rating {{ Number(movie.vote_average).toFixed(1) }}/10</small>
           </div>
         </div>
       </div>