I am trying to use the auto-attach feature of VSCode(version 1.50.1) to debug my vue app (vue-cli version": "4.3.1").
Like it is explained here:
https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_auto-attach-feature
My OS is Widows 10
In VSCode Auto Attach is set to to only with Flag.
I start my app with npm run dev.
This is how the dev command looks like in my package.json:
node --inspect --max_old_space_size=2048 node_modules/#vue/cli-service/bin/vue-cli-service.js serve
When i run npm run dev, the terminal prints: Debugger listening on ws://127.0.0.1:9229/2fa6ba43-dfa9-41cf-be5d-f0fc8945f02a
and:
Debugger attached
The Blue Bar on the bottom of VSCode turns orange and it seems like i am debugging.
But when i open the app in my browser (Chrome 86.0.4240.75) my Breakpoints are completely ignored.
I suspect that maybe the problem occurs because i do not access my app on "localhost:8080".
I use xip.io which results in an url like this: http://example.127.0.0.1.xip.io:8081/.
Has anyone an idea how to get it runnning?
I'm wondering if it's possible to run Vuetify (out-of-the-box) with Vert.x. I've played around a bit and I don't see a straightforward way but perhaps I'm missing something.
Sources:
https://vuetifyjs.com/en/getting-started/quick-start
https://reactiverse.io/es4x/start/install
Steps:
Create an out-of-the-box Vuetify:
npm install #vue/cli -g
vue create my-app
cd my-app
vue add vuetify
Test that it works by running it in Node
npm run start
When I view http://localhost:8080 (using node) it looks good. So I
create a compiled version in a dist folder
npm run build
Now I would like to try and get it working in Vert.x So I add ES4X, which is supposed to allow ES 5+ js code
npm install -g es4x-pm
es4x init
npm install #vertx/unit --save-dev
npm install #vertx/core --save-prod
npm install #vertx/web --save-prod
npm install
Create an index.js file so vert.x server for the index.html
vertx.createHttpServer().requestHandler(function (req){
req.response().sendFile("dist/index.html");
}).listen(8080);
Run Vert.x
npm start
When I view http://localhost:8080 it does not show as expected. It looks like a blank page. When I view the source code of the page in a browser, it shows the contents of the index.html file. So I know it's loading it, just not interpreting it. When I view the console I see a log entry saying Syntax error: Expected expression, got '<'
Note - I would like to avoid going the 'CDN install' route shown on the Vuetify quick-start link. My project is fairly complex and I just wanted to test how Vuetify by itself worked with Vert.x before tying in all the other dependencies
You've added a bare request handler, think of it as using just core nodejs modules. In order to serve multiple files and resources you should use vertx-web (which you already installed). In this case your code should be:
import { Router, StaticHandler } from '#vertx/web';
// router acts like express if you're familiar with it
const app = Router.router(vertx);
// for any HTTP GET request this will be your
// first handler "dist" is your static files root dir
app.get().handler(StaticHandler.create("dist"));
// add more handlers as needed...
vertx.createHttpServer()
.requestHandler(app)
.listen(8080);
So now all your static files should be served correctly...
Not sure I'm grokking this question.
Vuetify is runs in the browser, Es4x runs on the server.
You just need way to serve the static 'dist' folder, as described above.
ps: I'm assuming you're not doing server-side rendering, in which case, I'm not sure if es4x will work (it might).
I would like to know how to use the create-react-app "npm start" script when development takes place on a remote host.
Nginx is running as a reverse proxy. The external uri looks like:
https://my-dev-box/my-cra
which is set to proxy to:
http://localhost:3000
The CRA app is static (ie no API calls).
The errors appearing in the browser's web dev console are 404s related to /static/js/bundle.js and favicon. The app's index.html page is served with a 200 response.
When I build the app, "npm build" produces an index.html file with the correct paths (courtesy of the "homepage" setting in package.json). I have looked at the documentation/tickets surrounding "Invalid Host Header" and "DANGEROUSLY_DISABLE_HOST_CHECK" but have not found a combo which works for me.
It appears to me that the fundamental issue is that "npm start" does not seem aware (as "npm build" is aware) that the WebDevServer is behind a proxy and is thus not constructing correct paths for resources.
So to restate the question, does anyone know how to get "npm start" working nicely behind a reverse proxy on remote development box. (create-react-app version used: 1.5.2)
(Note: application works perfectly behind proxy when using "npm build".)
Update: Courtesy of this question I found this comment in "webpack.config.dev.js":
// Webpack uses `publicPath` to determine where the app is being served from.
// In development, we always serve from the root. This makes config easier.
const publicPath = '/';
which I guess means that what I want to do is not going to be that practical unless I eject the project. (Which I'm a little reluctant to do - the reason for using create-react-app is newness to React.)
This is my first question here. I have already spent hours reading topics, but never posted a question before.
At this moment I am developping an Angular4 application. I am running my app with "ng build --watch" and a local PHP webserver pointed to the 'dist' folder of my angular app. (When using build-in liveload server 'ng serve' there isn't a PHP server available, so i fixed this with 'ng build --watch' and a local PHP build-in server of PHPStorm)
To communicate with my MYSQL database, I used before single-php files in a directory called '/api'. I added this folder to my assets in the angular-cli.json file, so the API folder is also being pushed to the 'dist' folder when running the app local.
In this case, I was able to use relative paths to point my http requests. (like a POST action to '/api/insert.php'). So when publishing my app, it was not necessary to modify the paths of my HTTP requests.
But now I would like to use a backend framework, after some research I found http://api-platform.com, a PHP framework builded on Symfony3. When i am running this API, this runs for example on localhost:8000 while my angular applciation runs on localhost:4200.
So, that means i would have to use absolute paths for my HTTP requests. (eq http://localhost:8000/api/insert.php instead of /api/insert.php).
At this moment I have 2 projects: one front-end and one back-end. To make developping faster, easier, and simpler I would like to put both projects together. I know some developpers don't like this way of architecture, but in my case it is the best solution, one project, with a front and back-end included.
Concrete: Is it possible to run a debug-webserver in development zone with my angular app running on eq localhost and my symfony3/api-platform on eq localhost/api on the same time, same domain, and same port?
I would like to keep this project folder structure to keep it clean:
- projectname (root)
--- frontend
----- (all directories/files from angular)
--- backend
----- (all directories from api-platform / symfony3)
Sincerely,
Lander
running both application on the same domain (f.ex. localhost) is no problem, but they need to run on different ports. In your case angular is running on 4200 and your PHP application on 8000. You can configure angular with a proxy, which passes requests to http://localhost:4200/api to http://localhost:8000/api
In your angular root directory (where your package.json is), create a file proxy.conf.json
{
"/api": {
"target": "http://localhost:8000",
"secure": false
}
}
then change your package.json to use this proxy:
"scripts": {
"ng": "ng",
"start": "ng serve --proxy-config proxy.conf.json",
// other scripts
}
now run the webpack server with npm start instead of ng serve
Personally, I git ignore the proxy.conf.json, because some colleagues run their backend on a different port. Therefore we created a proxy.conf.dist.json with the above contents in git. If you want to use a different port, you can just copy it and change the port, while those, who want to use the default, can simply symlink to it.
UPDATE:
We recently switched to another method, namely using environment configurations.
By default, Angular has a dev and prod environment, specified in the .angular-cli.json
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
In these files, specify the API path:
environment.ts
export const environment = {
production: false,
apiUrl: '//localhost:8000'
};
environment.prod.ts
export const environment = {
production: true,
apiUrl: '//my-api-domain.tld'
};
You can add as many environments as you want (f.ex. for tests, beta, etc.). In angular, you can use the environment by importing it:
import {environment} from '../environments/environment';
But I suggest creating a config service following this answer: https://stackoverflow.com/a/43193574/7933618
I ended up by using another backend. In my case an nodeJS server was the best, fast and most simple solution.
Does Create-React-App support named URLs e.g. my-app.dev as opposed to the default localhost:3000?
I am using a Windows 10 machine. I used to use an Apache virtual host to set this up but I can't figure out how to do it in CRA.
UPDATE:
I've half solved the problem by adding 127.0.0.1 www.my-app.dev my-app.dev to the hosts file located at C:\Windows\System32\drivers\etc.
I also had to create a .env file in the root of my React project and added HOST = my-app.dev
I then tried to add PORT = 0 to the .env file but that made no difference.
Now when I run the app with npm start it opens at my-app.dev:3000
Is there a way to get rid of of the port?
I have found the answer on the CRA Github page here