Incorporating an express server into the vue-webpack-boilerplate for enhanced functionality

Recently, I got my hands on the vue-webpack-boilerplate from GitHub, and so far, it seems pretty impressive! This is my first time working with webpack and ESlint, so I'm eager to learn more.

However, I have a question about integrating an express backend into this project. Not every route will be a Vue component; sometimes, it might involve API requests or database operations. How can I add an express backend, and how do I choose which Vue components to load?

Am I approaching this the right way, or have I misunderstood the purpose of this setup?

Any insights would be greatly appreciated!

Edit: I checked out , but it didn't really clarify things for me.

javascriptexpressvue.js

Answer №1

It's possible that you are mixing up front-end build packages like webpack with back-end frameworks like express.

The boilerplate mentioned is specifically for front-end development. It allows you to create a static website, whether it be a Single Page Application (SPA) or not, and produces html, css, and js files that can be hosted on any static file hosting service.

There's no problem with making API calls on the client-side. For example, on route changes, you can specify which component to load and have it make an API call to update the UI. This falls under the realm of SPA and client-side routing. You simply need a separate express project for the back-end.

If you're interested in server-side rendering (SSR), you might want to consider using Nuxt. SSR has advantages for SEO but may not be suitable for highly dynamic pages like profiles or checkout pages. Nuxt is a universal Vue app that can handle both client and server routing by generating static html during run-time. While it may not fulfill your exact needs for adding an express API back-end, you can still incorporate dynamic data using Async Data.

For more information, take a look at JAMstack.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error encountered while logging out of Laravel Vue js: Unhandled runtime exceptions

Currently, I am working on a project using Laravel and Vue.js 2. I have successfully implemented a user Authentication system utilizing Laravel, Vue js 2, and Laravel Passport. The backend operations in Postman are functioning well including the logout fea ...

phplaravelvue.jsaxios

Two select boxes trigger multiple sorting operations

Struggling to implement 2 different sorting operations on two separate columns in a datagrid, using 2 different select boxes has proven to be challenging. I attempted the code below, but as a beginner, I was unable to solve it... In HTML: <select ng ...

javascriptangularjs

Error: Unable to access the property 'fontSize' as it is undefined

<!DOCTYPE HTML> <html> <head> <title>Interactive Web Page</title> <link id="mycss" rel="stylesheet" href="mycss.css"> <script> function resizeText(size) { va ...

javascripthtmlcssdom

Is there a node template engine available that supports the inclusion of other templates?

Currently delving into the world of node but facing difficulty in selecting a template engine.. Is there an engine available that allows for the inclusion of other templates within the same twig container? For example: {% include 'template.html&apo ...

node.jstemplatesexpress

Having trouble determining why the design is not displaying correctly

I'm currently working on a calendar webpage, and everything looks perfect until I add the new JavaScript element. Suddenly, the numbers in the first row start behaving strangely. I've tried to troubleshoot but can't seem to figure out what&a ...

javascripthtmlcss

Tips for testing parallel, mocked data requests in JEST by simulating cached responses with a 500ms limit

In order to simulate parallel requests fetching data from different sources, I have implemented tests that introduce artificial latency for each request. The goal is to return a simple string with an identifying digit to determine whether the data has been ...

javascriptnode.jscachingasync-awaitjestjs

Unable to access local JSON file data in React.js

I have been struggling to retrieve data from a JSON file located within my ReactJS project directory. Even attempting to access the package.json file within the ReactJS folder resulted in errors. How can I successfully extract data from a local JSON file ...

javascriptreactjsjsonreact-hooks

Can user authentication be done across various subdomains?

I am looking to develop a multi-tenant application using Laravel 8.0, incorporating the Laravel multi-tenancy package and Laravel Sanctum, with Vue Frontend for customers and a separate Vue Frontend for Admins. Vue2 Frontend for customers such as: example ...

laravelvue.jsauthenticationmulti-tenant

Incorrect Matching with Regular Expressions

I'm working on a regular expression to validate a URL. var url = "https://www,google.com"; var urlRegex = /(https|http)?:\/\/(?:\w[\-\w.]+)(?:\/[\-\w+&@#\/%=~_|!:,.;]*)?(?:\?[\-A-Z0-9+&@# ...

javascriptregex

Struggling to figure out how to make Bootstrap toast close or autohide properly

Looking to integrate Bootstrap 5 toasts into my ASP.NET web application, I have the code below. HTML <div class="row"> <div class="toast" id="companyUpdOK" name="compa ...

javascriptjquerybootstrap-5

It seems like there is an issue with the res.render function as it is

My goal is to capture an input from my main website. Once the input is submitted, the page should automatically redirect to /view. Despite successfully triggering the redirection with console.log(), the res.render function does not seem to be working as ex ...

javascriptnode.jsexpressejs

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

javascriptjqueryhtmlcss

What is the best way to retrieve the results of an indexedDb request beyond the limitations of its callback function?

I am working on a form that has an input box which I want to auto-complete with values from an IndexedDb objectStore. Currently, it is functioning with two overlapping input boxes, using a simple array. However, I am looking to make it work with the values ...

javascripthtmlindexeddb

Retrieve information from both the client and server sides within NextJS

Looking to integrate a third-party API for data fetching in certain components within my NextJS project. The goal is to have the server pre-render these components with the API for optimal SEO benefits, but also enable client-side fetching of component pro ...

javascriptreactjswebnext.jsseo

The function resetCards in Coffeescript is not defined

Currently, I am working on a project that involves running Coffeescript with ExpressJS on NodeJS. The goal is to create a script that generates 9 random playing cards without any duplicates. I have implemented a function called resetCards to reset the card ...

node.jsexpresscompiler-errorscoffeescript

How to use Axios in Vue JS to access an array within a JSON object

Struggling to access arrays inside a JSON object and save them into separate arrays. Despite trying various methods, I have not been successful in retrieving these arrays. I suspect that my approach to accessing arrays within the JSON object is incorrect, ...

javascriptjsonvue.jsaxios

Interactive Thumbnail Selection for HTML5 Video

Having trouble with creating thumbnails? I managed to solve the cross-domain issue using an html2canvas PHP proxy. No error messages in the Console, but the thumbnails are unfortunately not showing up - they appear transparent or white. Here is a snippet ...

javascriptphphtml

Issues with Alignment of Items in Vuetify Data Table Columns

Upon reviewing the code provided, it appears that while the column headers and pagination display correctly (2 pages with 5 records each), all the data is showing in the first column in a jumbled manner. <!DOCTYPE html> <html> <head> ...

vue.jsvuetify.js

Dealing with field errors on ajax forms in CakePHP

CakePHP offers a fantastic Error Validation feature where all errors are automatically displayed next to each field in the view. It works flawlessly. However, things get tricky when trying to implement this with Ajax. Is there a way to streamline this pro ...

javascriptajaxcakephpcakephp-2.0

Changing the color of a menu item in Bootstrap when a modal window is closed: A guide

I am implementing Twitter Bootstrap and attempting to launch a modal popup by clicking on a menu item. Below is the code snippet: <div class="navbar navbar-fixed-bottom"> <div class="navbar-inner"> <ul class="nav pull-right"> ...

javascriptcsstwitter-bootstrap