I'm new to stackexchange and webpack. I'm trying to set up a development server using webpack-dev-server and my express server. I'm using webpack to build the entire back-end and front-end and it works perfectly, yet the routes in my server code do not work when I try to use webpack's development server. I tried for days to get this to work and searched the internet for a solution, however, my skill level is just not high enough to deduce a solution from available online help, so now I'm here.
Inside my webpack.config.js there is a server config that will run on node and a client config that will run on the front-end. I played with the devServer.proxy settings to no avail (I don't seem to understand what exactly is going on with these settings).
If you want to take a look at the whole source code: https://github.com/spencel/gwpp-v1-dev.git
here is what my project tree looks like:
Related
I have vue project which published on Digital Ocean. The main problem is when i make some changes on FileZilla it is not affect on website. How can i solve this issue?
This is not an issue per-se. This is just the way how modern web development works. Vue.js (but also Nuxt) is using a bundler right now (Webpack, Vite are the most common), hence to go to production it needs to be bundled each time you push something to it.
If you upload something via FTP or SSH and edit some source code, a bundle step will be required in order to get any changes on the actual webapp.
Backend languages may not need that, for example you could SSH into a server and change some .php file, if you F5 the page it will be updated in real time. But this is not how frontend JS code works, it needs to be optimised.
Another thing, sending code via SSH/FTP is not really a good workflow because it is not easily trackable, no version-controlled, will not trigger any build flags in case of an error etc...
The best approach is to have a git repo + some build step included in some CI.
A common platform for it is Netlify, you connect a Github repo, you tell which command to use to build the project and each time you push some code, it may do some checks/tests/optimizations/etc... via Github Actions before being released automatically to production (updated on your webapp).
This workflow have a lot of benefits as one may tell but is also de-facto, the official/regular approach for modern Web development on the frontend.
I am trying to implement a MPA with Vue.js and the pages configuration option it offers. Like so:
This works perfectly when I run my dev server with npm run serve and then try to go to localhost:8080/home and localhost:8080/about. When I try to build this for production with npm run build and I try to go to their respective URL's it does not work and only serves me back the index. This seems officially supported by the Vue Documentation but I can't figure out why this isn't working?
My dist folder looks something like this
Does anybody know what's going on here that's more knowledgeable in Vue.js?
I am heading toward my first Nuxt deployment, of a large internal application. And I’d like to support IE 11, at least for a while. But when I generate the deployment files and attempt to access a staging site with IE, I immediately receive a syntax error from one of the generated js files.
Here’s a start at specifics:
Vue 2.6.12
Nuxt 2.14.6
Vuetify 2.3.2
Nuxt plugins for axios, auth, and a few other plugins.
The application is deployed to IIS, using nuxt generate and copying the dist directory to the server. I have tried using the generate command with and without the modern -m flag. There is no possibility of deploying other than through IIS (client specification), and I’d prefer not to have to run Node there, since the static deployment should work.
I am developing on a Mac and thus have no practical way to run and access the dev version by IE.
The application works properly on modern browsers, but throws an immediate syntax error in IE.
My understanding was that an IE-compatible version would be transpiled during the generate process, but evidently I’ve missed something.
As I say, this is my first Vue/Nuxt deployment, so any advice would be appreciated. I’ll be happy to provide any further specifics.
Thanks in advance for any suggestions on what/how to troubleshoot this.
Please follow these steps
Check if the syntax error is caused due to any dependency. I ran into syntax error when using vue-calendar plugin. This plugin has problem with IE11
Try adding pollyfill.io into your application. Inside your nuxt.config.js try adding inside head
script: [{ src: 'https://cdn.polyfill.io/v2/polyfill.min.js' }]
If adding to nuxt.config.js doesn't work , try using the code into your app.html file
I am using this guide to to have my SSR application running on Firebase. In the guide he references a server/index.js which he points to with his dev command. But my server folder is missing, and I noticed that more people in the comments were talking about this. And they said that when installing nuxt you have the option to install it with express. But I did not have such an option when installing it with
npx create-nuxt-app <project-name>
Which I got from here
So how can I use a express server (which I need because firebase uses it under the hood as well)?
If you are following someone's blog. Make sure you're using the same version. This might be happening because of use of different verison.
I am working on a project using Angular 4 for the frond-end and phph for the back-end with an Apache server using ubuntu 16.04 LTS where we setup Node JS to make's actually works Angular. So I have two questions in one, how do do to make run Angular 4 without Node JS? Are all our perf issues comming from that (Node JS on apache?) or is it my code who's make run the apps very slow? For exemple, when I check the access log servor from apache using cat /dev/null >access_log I see like 30 requests just to run the first page...how could I optimise that?
See my plunker link here (not all the code is here but he give you an idea of the construction) [Mypluker][1]
[1]: http://plnkr.co/edit/4CUPwqehwkiHNnFd1NtU?p=catalogue
The quickstart seed from angular.io ils not expected to be used for production. It's just an example of how you can quickly start developement.
For instance the quickstart do typescript transpilation inside the browser. You should avoid this kind of things.
One of the easiest solution for dev and production build is to use angular-cli.
With a production build you don't need nodejs only a webserver that can serve static files.