How to make an SPA work with Electron with Vanilla JS, HTML, and CSS

  electron, html, javascript, single-page-application

I’m trying to make an Electron app with Vanilla, Javascript, CSS for the front end and I’ve read most Q&A’s online that SPA is the way to go to have multiple pages in the app.

I have some ideas to implement it but don’t really know if it’s correct:

  1. Create buttons that would hide/show some sections of the HTML. (Not entirely sure if this is SPA)

  2. Use the router implementation in this video: https://www.youtube.com/watch?v=6BozpmSjk-Y

Here’s a snippet of that implementation:

const router = async () => {
const routes = [
    { path: "/", view: Dashboard },
    { path: "/posts", view: Posts },
    { path: "/posts/:id", view: PostView },
    { path: "/settings", view: Settings }
];

// Test each route for potential match
const potentialMatches = routes.map(route => {
    return {
        route: route,
        result: location.pathname.match(pathToRegex(route.path))
    };
});

let match = potentialMatches.find(potentialMatch => potentialMatch.result !== null);

if (!match) {
    match = {
        route: routes[0],
        result: [location.pathname]
    };
}

const view = new match.route.view(getParams(match));

document.querySelector("#app").innerHTML = await view.getHtml();};

Although the only problem is when I type location.pathname in the console, Electron gives out the file path of the html and not the route exactly.

I’d appreciate if someone would share an example code or app the has been built with the same tech stack I’m using.

Source: Ask Javascript Questions

LEAVE A COMMENT