Adding Express JS to a Gulp + SASS + Pug Project

Question

I just recently purchased a bootstrap template ( https://themes.getbootstrap.com/product/directory-directory-listing-bootstrap-4-theme/ ) from bootstrapious that is written using Pug, Gulp, and SASS. I should also note that I am relatively new to template engines and Gulp itself.

The past few days I have been working on trying to understand how I can extend the template with Express JS so that I can call routes to call REST functions from my backend Spring Boot Application. However, no luck so far...

What I have tried:

• Creating an Express JS green field project, installing Pug and BrowserSync to compile the .scss files. However, when I call the Pug file from an express route, there's no styles, even though I have imported them. Express JS seems like it's not importing the compiled SASS styles. This seems like the way to go, but I haven't been able to get the styles to be imported correctly so that the page looks like it should which is why I moved onto the second thought process.

• I have also tried to start the express server parallel to when I start the front end using gulp so that I can call the routes from the express server. But this "solution" seems like really bad practice and also hasn't worked...

Is my though process correct that the first option should be the one that I go with? How do you normally include compiled SASS styles into a Pug file? Does anyone have a good example of how to do so? Part of the problem might also be that I can't really wrap my head around how something like this is usually done, since I haven't found a reference implementation that I can base my project on.

So far I haven't found good information on the subject which is why I'm reaching out to the SO Community.

Thanks a bunch beforehand

Answer 1

Turns out that the same team that developed the gulp / pug version of the template, also created a reactjs version of it.

Solution was to buy the react version and refund the other one :)