I have a Single Page App built using Vue.js and hosted on a node.js server. While the app is still in development, it will eventually be accessed by external customers. Due to the sensitive data involved, we want to prevent users from seeing the .vue files and file structure when inspecting elements in dev tools.
Attached is a screenshot example highlighting the files I want to hide. https://i.sstatic.net/TRF1P.jpg
Is there a method to achieve this?
After experimenting with the config file, I successfully configured webpack to export the Single Page Application (SPA) in a bundle.
Within the ./config/index.js file, I made the following adjustments:
build: {
// other code...
devtool: '', // Previously set as '#source-map'
productionSourceMap: false, // Previously set as true
cssSourceMap: false, // Previously set as true
// other code...
}
By referring to the webpack documentation, specifically the explanation of the settings at https://webpack.js.org/configuration/devtool/#production, I was able to find the solution.
I appreciate everyone who guided me in the right direction on this issue.
It appears that you are currently running Vue in development mode, which means that all files will be visible. However, when deploying a Vue SPA, it is important to build and compile the code into JS chunks.
To create a production version of your spa, you can use the following command:
npm run build
This command will generate one folder and one file inside the 'dist' directory:
--dist
----static
----index.html
Once this is served, no .vue files should be accessible anymore. When inspecting the site using browser's Dev tools, it should look something like this:
To ensure consistency in your folder structure, the directories node_modules, src, and theme should be located one level higher. Therefore, make sure to adjust your file paths accordingly.
It is recommended to place the app.js file in a directory specifically designated for JavaScript executable files.
I have set up a Rails backend to serve JSON data, such as the example below from 2.json: {"id":2,"name":"Magic","location":"Cyberjaya","surprise_type":"Great","instructions":"test","status":"awesome","pricing_level":3,"longitude":"2.90873","latitude":"101 ...
Can Fabric JS allow for grouping all objects on the canvas with a click event? ...
I am having trouble importing a component in my APP.js file. I have been attempting to bring MainComponent into the app.js component, but I am facing difficulties in fetching the component. Any assistance in resolving this issue would be greatly apprecia ...
Creating a mean stack application using NestJS involves utilizing websockets. However, testing websockets in Postman can be confusing. Typically, I test route URLs in Postman and get output like: "http://localhost:3000/{routeUrl}". But when it comes to tes ...
Having encountered an unusual issue with react's setState() method. Currently, I am utilizing Azure DevOps extensions components and have a panel with an onClick event that is intended to change the state of IsUserAddedOrUpdated and trigger the addOr ...
Looking to customize Material UI's Switch component with text inside? Check out the image below for an idea of what I'm going for. https://i.stack.imgur.com/KadRZ.png Take a look at my code snippet: import React from 'react'; import S ...
I have been working on a chat box that includes emojis and a file attachment button. While the emojis are functioning correctly, I am experiencing difficulty with the file attachment preview not showing in the text area. Are there any suggestions or plugin ...
I have developed a rest-API for adding todos in a MongoDB database. When I use Postman with the setup below, I can successfully save instances: http://localhost:3000/api/addtodo x-www-form-urlencoded with values text="Test", completed: "false". However, ...
Have you ever noticed that Angular JS date pickers consume a lot of CPU? When multiple date pickers are present on a page, they can noticeably reduce the site's speed. Is there a way to minimize this issue? Take for example the official Angular for ...
Currently experiencing an issue with a Nuxt implementation on Vercel, where the site randomly fails to load and throws a 502 HTTP error. Below is the stack trace from Vercel: ERROR Unhandled Promise Rejection {"errorType":"Runtime.Unha ...
Consider the following function: $(document.body).ready(function() { var o = $(".hidden"); $(".about_us").click(function() { o.hasClass("visible") ? o.removeClass("visible") : o.addClass("visible"); }); }); I am looking to add a delay to this f ...
Below is the HTML code snippet: <tr *ngFor="let row of formData; let i = index" [attr.data-index]="i"> <td *ngFor="let rowdata of formData[i]; let j = index" [attr.data-index]="j"> <input type="checkbox" name="row-{{i}}-{{j}}" [ ...
As someone who is fairly new to these technologies, I'm unsure if I am doing this correctly. I am attempting to display the name of the category in the table instead of the id (which is from the ObjectId schema field) for all the Category documents r ...
Can a Three.js script created with CanvasRenderer be easily converted to use WebGLRenderer instead, and if yes, what is the process for doing so? ...
Currently, I am working on integrating a Datatable into my products table. My goal is for it to be both responsive and include the select extension (checkbox for each column). I have successfully implemented both features. However, I noticed that when the ...
When creating a style called Link, the theme is contained inside of this.props. How can the theme be extracted from props and passed into the Link styled component? Error: ReferenceError - theme is not defined import React from 'react'; impo ...
I am currently working on setting up web3.js for a website in order to enable Ethereum authentication. However, I encountered the following error: web3-light.js:4327 OPTIONS http://localhost:8545/ net::ERR_CONNECTION_REFUSED HttpProvider.send @ web3- ...
While working with Firebase, I encountered an issue related to setting and getting priorities of items in a list of people. Surprisingly, the functionality seems to work fine in one function but throws an error in another. When trying to get the priority ...
I am encountering difficulties while navigating between pages in my React Native application. Whenever I try to use the button, an error message pops up saying: TypeError: undefined is not an object (evaluating '_this.props.navigation'). My app c ...
Working on these codes has been quite a challenge for me. I have recently embarked on a JavaScript journey as a beginner and attempted to create a stopwatch project. However, it seems like I may have missed the mark with the logic or implementation somewhe ...