The structure of a project using a Vue app and a Node API

Seeking your thoughts on combining a Vue App with a Node using API for my upcoming project.

I have set up two separate folders for the client (VueJs) and server (Node) locally: - client (VueJs) - server (Node)

I am currently running them individually using npm commands: - npm run dev - npm run watch

While I can develop my application smoothly, I am facing challenges when it comes to deployment.

For the VueJs side, after building my application for production using: npm run build My application is generated in the client/dist directory

When it comes to the server, options like Forever and Nodemon come into play...

However, here lies my question: How do I deploy both components within the same instance?

Initially, I considered moving the dist folder to the server side during the build process.

But now I aim to keep them separate, each utilizing a different port; one for the api and another for the client side.

Being self-taught, I lack expertise in best practices. Any tips or recommendations would be highly appreciated.

(Also, I plan to deploy it on Google Cloud Instance, but feel overwhelmed with the setup)

Thank you for taking the time to read this.

node.jsvue.jsgoogle-cloud-platform

Answer №1

In summary, it is not possible to deploy your front end and back end on different ports and expect seamless communication between them due to browser security restrictions.

However, if both components are deployed on the same domain (even if they are on different subdomains like www.example.com and api.example.com), they can still interact with each other.

Depending on the Google Cloud resources you are utilizing, a common solution would be deploying both client and server on a Google Cloud Compute virtual machine. Then, setting up a web server like NGINX to serve the client files on one path or subdomain while acting as a reverse proxy for the API on a different path or subdomain. This approach is well-documented and widely adopted in architecture design.

Answer №2

To streamline your processes, you can run both your frontend and NodeJS server under the same port. This involves setting up your frontend files within your client/dist folder and having your NodeJS server serve them as static files. If you are using ExpressJS, you can achieve this by utilizing the following code snippet:

// Specify path to client/dist directory
app.use(express.static("path/to/client/dist"));

For further guidance on serving static files using ExpressJS, refer to the official documentation.

During development, managing webpack/VueJS dev servers alongside your NodeJS API may present some challenges due to running on different ports. In such cases, integrating webpack's devServer proxy feature, especially when working with Vue-CLI for your VueJS application, can provide a solution. Explore more about this setup here.

Transitioning into production, it is advisable to introduce a web server like Nginx in front of your NodeJS server. By doing so, you can offload the responsibility of serving static/dist files from your NodeJS app, thereby decreasing its overall workload.

Answer №3

While I haven't experimented with Google Cloud as of yet, I have found that separating the frontend and backend onto different servers is a good practice to follow. This approach allows for flexibility in using various frontends while still accessing the same API. Additionally, it's important to implement authentication measures when making requests to the API. If needed, I can provide a Vuejs boilerplate that is fully compatible for deployment on Heroku.

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

Search for data within both the main document and any sub-documents within a

I am facing a challenge with querying two collections called Orders and Books simultaneously. I need to search for a specific string value in Order (code) and Book (name, number) fields at the same time. The objective is to find any matching values and ret ...

node.jsdatabasemongodbmongoose

Mastering regular expressions in TypeScript

My goal is to perform linting on staged files that are either .ts or .tsx and located within the src folder. I am aware that for selecting all js files one can use "*.js": [--list of commands--] inside the lint staged property. I'm curious to learn m ...

javascriptnode.jsregextypescriptpackage.json

Is there a way to disable a Quasar q-input attribute when a button is clicked?

Looking for some help with a quasar q-input element - I want to be able to toggle its enable and disable state at the click of a button. I managed to add a button to the input using v-slot:after, but I am struggling to figure out how to remove the "disabl ...

vue.jsquasar-framework

Node.js app running in Docker container does not seem to be listening on the designated

I've been developing a node.js web application and I typically test it by sending requests from Postman to localhost:8080. When I run the application (npm start) without Docker, everything works perfectly and the app is running and listening on port 8 ...

node.jsexpressdockerport

Implementing a preloader and displaying a success message upon form submission with vue-resource

What is the best way to achieve the following action with vue-resource: Display a preloader text such as "Loading..." or a loading gif image while fetching data from the server. Present a success message upon form submission. ...

vue.jsvuejs2vue-componentvue-resource

Determining when props are updated in Vue.js 2 when passing an object as a prop

Let's say there is an array feedsArray, with a sample value like this: this.feedsArray = [ { id: 1, type: 'Comment', value: 'How are you today ?' }, { id: 2, type: 'Meet', name: 'Daily ...

javascriptvue.jsvuejs2

Sorry, I am only able to provide assistance with rewriting requests that do not contain error messages or

error code 127 npm error path command failed sh -c node-gyp-build sh: node-gyp-build: command not found A complete log of this run can be found in /Users/rakibulb/.npm/_logs/2024-05-20T15_36_50_210Z-debug-0.log I recently cloned a repository that I was ...

node.jsnpmnpm-installnode-gyp

Encountering a 404 error in production when refreshing on a Vue router subfolder

Currently, my Vue.js app is running in production on a subdomain with the configuration "base: '/my-app/'" set in vite.config.js (everything working smoothly so far). An issue arises when trying to access URLs like my-domain/my-app/my- ...

vue.jshttp-redirecthttp-status-code-404refreshsubdirectory

What causes the error message "TypeError: client.db is not a function" to appear in Node.js and what steps should be taken to resolve it?

Struggling with writing a MongoDB aggregation query in Node.js. Despite my best efforts, the codes I implemented are not working as expected and throwing the error: TypeError: client.db is not a function const { MongoClient, ObjectId } = require(' ...

node.jsmongodblookup

Creating table structure dynamically using Node.js

I'm attempting to automatically create a table using nodejs "@google-cloud/bigquery": "^3.0.0" with the following approach: const bigqueryClient = new BigQuery(); schema = `driverId:string, passengerIds:(repeated string), pickedUp:(repeated s ...

node.jstypescriptgoogle-bigquery

Implementing Asynchronous context tracking within a Remix application utilizing Express as the server

Utilizing Remix with Express as the server, I aim to develop an Express middleware that establishes an async context to grant all downstream functions (especially those in the "backend" Remix code) access to this context within the scope of a single reques ...

node.jstypescriptexpressremix.run

Issues with importing files have been reported on Node.js version 11.8.0

I'm currently working on a program that utilizes a large object filled with dictionary words. I've decided to import this object from a separate file due to its size, but I encountered an error stating that Node.js doesn't recognize the obje ...

javascriptnode.jsecmascript-6import

Mastering the art of harnessing the power of Mongo DB's eval with

When using my mongo shell, I am able to execute functions with db.eval. For example: db.eval('return 7;'); However, despite receiving a deprecation warning, the parameter function is still executed properly. Now, I want to call a similar &apos ...

node.jsmongodbmongoose

Ubuntu is experiencing a DNS problem. While the URL request works perfectly on MacOSX, it is unsuccessful on Ubuntu

A custom nodeJS script has been developed to utilize the require('request').post() method. The script executes successfully on MacOSX (Travis), however encounters issues on Ubuntu (Travis). To troubleshoot, experimentation with NodeJS 'https ...

javascriptnode.jsubuntutravis-ci

Can VueJS support multiple v-slots in a component?

I recently set up vee-validate v3.0 for validation in my project and everything was going smoothly until I tried to style my elements. Despite following the documentation on styling and making changes to the vee-validate config, I encountered a new issue - ...

javascriptvue.jsvee-validate

Node.js UDP broadcast to subnet not working properly in Linux

Here is a simplified Node JavaScript code snippet for testing purposes. Click here to view the code on GitHub This code creates a socket for each interface address, calculates the subnet broadcast address, and then sends data every second for 4 seconds t ...

javascriptnode.jslinuxudpsubnet

Data streaming using Node.js

Is it feasible to continuously stream data from the server to the client using Node.js? My goal is to send a single AJAX request to Node.js, establish a persistent connection, and stream data to the client for real-time updates on the page. Latest Update: ...

jqueryhtmlajaxnode.jsdata-stream

Ways to hide notifications by setting a timer while keeping the delete option visible

Presently, this is the code I am working with using Javascript and Vue.js. I have an array called Messages.length that contains messages. When the x button is clicked, it triggers the "clearMessages(item)" function on the server side. However, I also aim ...

javascriptvue.js

Rendering Vue components synchronously as a singular string

There exists a Vue SFC called Bubble, which contains a simple layout structure. Bubble.vue <script setup lang="ts"> </script> <template> <div hinted-name="wrapper-bubble" class="hinted-bubble-wrapper" ...

javascriptvue.js

Styling your Vuetify V-data-table with CSS

Struggling to add extra spacing between table rows, despite inspecting the page and verifying that my styles are not being overridden. Have read other Vuetify posts on applying CSS but still no luck. Any suggestions for why I can't style my table as d ...

cssvue.jsvuetify.js