I started out by following microsoft tutoral here which results in one solution and two projects (vue as frontend and api as backend)
Current setup:
Vue 2
.Net 6
It is located at C:/Projects/project_name
Directory layout:
- project_name.sln (solution file)
-- project_nameFrontend (frontend)
-- project_nameBackend (backend)
-- .vscode
The problem is when I open it in C:/Projects/project_name, some of the front end code will show error.
e.g. the following line will result in "couldn't find module #/helpers/interceptors"
import { instance } from '#/helpers/interceptors';
If I open in "C:/Projects/project_name/project_nameFrontend" (where node_module is), no errors.
I know the errors are due to npm, and the parent folder doesn't know where node_module is.
The reason I want to open it in parent directory so I can debug the API backend code as well as the front end at the same time.
Is there a work around for this?
Related
We have a build.js code in our project which makes a duplicate of our client directory and adds a folder inside src.
example -
client/src/components will become dist/src/abcxy/components
abcxy will change every time we create a new build.
Now the problem is that the browser tries to find the old dist files from the cache and is unable to find them, instead of finding new files it gives an error in the console.
The error changes depending on the browser I am using
EXAMPLE ERROR - Failed to load ‘http://localhost/src/pbtsg/components/report/reports.js’. A ServiceWorker intercepted the request and encountered an unexpected error.
I tried to create a nuxt app with the guide from the official website, chose default options because I wanted the starter template but on running npm run dev, I keep encountering the error:
This relative module was not found:
* ./components/nuxt-error.vue in ./.nuxt/index.js
I've tried searching about it but I couldn't find any useful resource/fix. I've also tried vue init nuxt-community/starter-template for the installation but I still get the same error.
Any fixes?
So I found a solution. I couldn’t figure out the error because the nuxt-error.vue file was actually imported correctly. Turns out “npm” installations have been giving me issues (had issues with TailwindCSS too).
So if you ever encounter this error on loading the base nuxt app, recreate the project using “yarn” instead. Works like magic!
This Error basically means, that in one of your files you are trying to import another file with the relative path of ./components/nuxt-error.vue but no file with this path exists.
However
I just read that vue init nuxt-community/starter-template is deprecated and no longer maintained. Instead of fixing this Error you should restart your project with npx create-nuxt-app <yourAppName>. https://github.com/nuxt-community/starter-template
tldr;
My project is an NPM module that is used by an ExpressJS server. The server needs to specify an endpoint and my module will do the rest. How do I get my module to load the correct html page and grab the correct js/css files from the correct path?
The Problem
I'm running into a problem where I can see the directory structure of the site, using the serveIndex library, and all the files are in their correct directories but for some reason when I try to load any of the files, whether from the serveIndex view or from the actual endpoint where it should load, I get nothing but 404 errors.
Here's an example if someone wanted to use this NPM module from their project.
app.js (their server)
const express = require('express')
const { adminAreaConfig } = require('express-admin-area')
const app = express()
const adminArea = adminAreaConfig(express) // my module being passed the "express" library
app.use('/admin', adminArea) // specify a URL to use my module
app.listen(3000, () => console.log('\n\nServer Online\n\n'))
Here's an image of my projects dir structure after it's been built.
Going off of a console.log(__dirname), which returns <long path string>/express-admin-area/build/src, I then tell my module, using the express reference passed by the actual server in the code above, to look in the views directory with
... import libraries etc ...
const adminAreaConfig = express => {
const adminArea = express.Router()
adminArea.use('/', express.static(__dirname + '/views') // sets my modules views to the "http://localhost:3000/admin" path
adminArea.use('/dirs', serveIndex(__dirname)) // will get into this later
... some other stuff like exports etc ...
This then attempts to load the index.html file in the express-admin-area/build/src/views directory but fails because it can't locate the CSS and JS files inside express-admin-area/build/src/views/static/css or .../js.
First, I know it fails because instead of looking for http://localhost:3000/admin/static/css/styles.css it looks for http://localhost:3000/static/css/styles.css, so that's another problem I need to solve entirely.
Second, looking back at the small code sample above, adminArea.use('/dirs', serveIndex(__dirname)), I'm using the serveIndex library in an attempt to view the directory structure. If I go to http://localhost:3000/admin/dirs I get the correct directories and files in the browser
But now, if I try to view an actual file I'm met with the error Cannot GET /admin/dir/main.js for example if I were to go to http://localhost:3000/admin/dir/main.js, but I can continue going deeper in the directories if I wanted such as the controllers or routes directories from the image.
What I want
I need a way to get these static assets to load. If I point my module to a basic html page with a simple <h1>Hello, World!</h1> then that's what Ill get but trying to load any outside scripts/stylesheets is when I get the 404 errors and nothing loads.
I'll be answering my own question.
The solution is actually pretty simple. The view layer of this module is handled by React, CRA to be specific. CRA will look for some specific environment variables, one of them being PUBLIC_URL. All I had to do was
Create a .env file in the root directory of my CRA
add PUBLIC_URL="/admin"
Afterward, it's just rebuilding the project, yarn build, and reset the server. CRA will then look at http://localhost:3000/admin/static/... instead of http://localhost:3000/static/... for static assets.
I used Git to pull a project
I then start IntelliJ, and say: Open Project.
The project itself looks like it has 4 modules, Lab1, Lab2, Solution2, Solution2
I open the full project. In Lab1, i want to run to see how my web page looks, but when i say: Run main.dart the error kicked back is:
C:\code\dart-sdk\bin\dart.exe --ignore-unrecognized-flags --checked --enable-vm-service:51293 --trace_service_pause_events C:\code\workspace\tw_remoting_training\codelab_01\web\main.dart
Observatory listening on http://127.0.0.1:51293
The built-in library 'dart:html' is not available on the stand-alone VM.
'package:remoting_training/remoting_printer.dart': error: line 20 pos 1: library handler failed
import 'dart:html';
^
Process finished with exit code 254
Im not sure what is going on here though. As a secondary option, i will also try to Right-Click on index.html and click: Open with > Dartium but that shows a blank page. It shouldve done 4 async calls which printed strings to the screen.
Is there something I am missing? Is it not running because of it being a module in a project?
If your Dart script imports dart:html or a library that imports dart:html you can run that script only from the Dartium browser (by adding a script tag to HTML that points the that Dart script, or if you run it through pub build or dart2js in any browser), but it can't be run from the console.
With dart:io it's exactly the opposite, it can't be run in the browser.
I am publishing a project in my local computer, I am getting an error because of the path of the files, in my project I am using relative path, but when i published the project I specified a Site/application so I put: localhost/myapp, but then, after the login the additional name myapp make it loses the path references, do you have any idea how to go through this?
I encountered the same problem with my web application this problem occurs because in your application you are hardcoding paths for ex :- /Home/Index or something which creates problems whenever you want to provide paths use helpers like #Url.Action(),#Html.Action(),#Url.Content() as shown below :-
#Url.Action("Index","Home",new{//specify route parameters here//})
If you are using areas in you application then specify it as :-
#Url.Action("Index","Home",new { area="myarea" })