I'm new to vue and kind of confuse here.
I'm using vue-cli to build a vue app, I understand I can run a development server with npm run serve which is referenced as a script in my package.json for vue-cli-service serve
But my app need some data coming from a local node.js server. I cannot request this server from development mode because it's running on a different server.
To make my app work I'm obligated to build for production with
npm run build
Then to ask my node server to render by default the produced index.html file.
How could I combine development mode and my node server?
What would be the best way to make this work?
Thanks a lot
I stumbled across this, and found the answer buried at the bottom of the comments list, so I thought I'd highlight it.
This answer is taken from #Frank Provost comment, which really should be the accepted answer. As mentioned in his link https://cli.vuejs.org/config/#devserver-proxy all you need to do is create/edit vue.config.js file in your (client) project root to include this:
module.exports = {
devServer: {
proxy: 'http://localhost:3000' // enter dev server url here
}
}
Then start your dev server as usual from your server project:
[server-root]$ npm run dev
And run your client project from vue-cli project
[client-root]$ npm run serve
Then when you visit the client url (usually localhost:8080) all api requests will be forwarded to your dev server. All hot module replacement still works on both client and server.
Related
I have spun up a React app using create-react-app and have my index.js file as below.
import React{ReactDOM} from "react";
import App from "/componects/App.js";
ReactDOM.render(
<App/>,
document.getElementById('root')
);
My server.js file is as
const express = require('express');
const app = express();
app.get("/", function(req,res){
res.sendFile("fullpath/index.js")
});
app.listen(3000, function(){
console.log("app listening on port 3000");
})
I have checked my root route and it works when I don't send the full path. I do specify the full path in the code, but I want to keep it private for this post.
I do have a jsconfig file. When I go to localhost I receive all as plain text of the file. I only get the code itself. How can I fix this?
Quickly answer
You are totally wrong and you are confusing technologies: Node.js and React.
Usually you cannot mix these technologies.
As a summary, Node.js does not understand React code, that is why the following line in your code is unexpected, crazy and will fail:
res.sendFile("fullpath/index.js")
res.sendFile is for Node.js server-side rendering (SSR)
index.js is React code
If your create-react-app workspace is correct and standard, execute this line to start your react code in developer mode:
npm run start
If your react code is fine, the classic http://localhost:3000 will open on your local browser.
Long answer
Concepts
Server-side rendering (SSR) — the traditional rendering method, basically all of your page’s resources are housed on the server. Then, when the page is requested (commonly from web browsers), the HTML, JavaScript and CSS are downloaded. Also frameworks can dynamically can create the HTML-based on back end logic and finally download it. At this point, a lot of frameworks offer wonders for creating apps in no time with "amazing" functionalities.
Technologies: Java, C#, Python, Node.js, etc.
Client-side rendering (CSR) — Which is sometimes called "Frontend rendering" is a more recent kind of rendering method, this relies on JavaScript code executed on the client side (browser) via a JavaScript framework. So, when page is requested, a minimal, little or empty index.html, CSS and JavaScript content were downloaded. Here JavaScript is responsible to send or receive data and update a minimal section of the page without an entire page refresh.. Finally when user clicks or triggers some event, JavaScript code will send or receive the data commonly to an API REST (JSON) using an async call (Ajax).
Technologies: React, Angular, Vue.js, Aurelia, jQuery, pure JavaScript, etc.
Node.js
Is used in SSR frameworks
React.js
Is a CSR framework
Webs developed with React are called SPAs (single-page applications)
How can a CSR web be served?
In the developer stage (laptop/pc) you just need to use some kind of hot reload server (usually Node.js) which translates React into pure JavaScript code and link it to your browser.
These kind of servers are provided or developed by framework creators (Angular, Vue.js, React, etc.). Usually, they are pre-configured in your package.json as: npm run dev or npm run start
In testing/production stage, you should not use the hot reload server. You should perform a build which translates react into a pure JavaScript code. Usually is the command npm run build and the result are new files on some folder in your workspace: index.html, bundle.js, main.css, etc.
These files are ready to published on any HTTP server from minimal to a complex servers:
Apache
nginx
haproxy
Tomcat
WildFly
IIS
free/paid web FTP services
any decent server on any technology capable to serve HTML content.
React in the developer stage
If you are using create-react-app in a correct and standard way, there is a start script in your package.json file ready to use:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
I advice you to change it from start to dev to make it more intuitive. Let’s empty the start script to be correctly configured for the next stage.
React in the testing/production stage: Basic
If your React code is ready to be tested or used by real users in the real world, and your create-react-app workspace is correct and standard, these are the required and minimal steps:
install a minimal Node.js HTTP server
npm install http-server --save
add this in your script main:
"start": "http-server ./build"
execute npm run build
if there is no errors and your static files are created (index.html, CSS, JavaScript, etc.), perform:
npm run start
For more information (custom port, etc.) check this minimal Node.js HTTP server implementation:
http-server: a simple static HTTP server
React in Testing/Production stage: Docker
If your package.json has correctly configured the standard scripts:
npm run build
npm run start (with http-server or another)
You could use Docker to deploy it on any Linux server in this universe:
FROM node:10
COPY . /opt/
WORKDIR /opt/
RUN npm install
RUN npm run build
ENV PORT 8080
EXPOSE 8080
ENTRYPOINT ["npm","run","start"]
Linux is the only option for real environments. Windows and Mac are just for the developer stage
React in the testing/production stage: Advanced server
What if your requirement needs:
user sessions
login/logout feature
user inactivity expiration
JWT OAuth 2 token refresh
any other feature that React or any CSR/SPA was not designed for
In this case you need an advanced server implemented in some technology like: Node.js, Java, Python, PHP, etc.
These implementations:
should expose your endpoints like: /login, /logout ready to be called from your React, Angular, or Vue.js
should handle the user session with any common way: memory, Redis, MongoDB, etc.
offer a login: basic authentication, Google, Microsoft, etc.
My first attempt was:
https://github.com/jrichardsz-software-architect-tools/geofrontend-server
I am planning a revamp with more features and unit tests.
React in the testing/production stage: Advanced API/microservices
All of the features explained in the previous paragraph could be implemented on any back end REST API or microservice.
With that, your CSR/SPA builds will still be static and won’t need any crazy HTTP server. Just the basics as explained at the start of this answer.
Express / Node.js is case-sensitive. You need to provide an absolute path to the file:
const app = require('express')();
app.get("/", function(req,res) {
// Absolute path
res.sendFile("C:/Users/%username%/fullpath/index.js")
});
app.listen(3000, function() {
console.log("App listerning on port 3000");
});
A relative path is when you are in a directory, and specify a file without specific location:
# Absolute path
C:/Users/John/path/to/file.txt
# Relative path
path/to/file.txt
***Updated for further clarification:
Thanks much for taking the time to reply. Running 'npm run build' (I'm using the Vuetify/Webpack template) created an index.html and a directory named 'static' with the respective html, css, and js (in 'dist' directory). The question is - how can I run this in production using node or pm2 (for example, 'pm2 start myapp.js')?
Doing some further research and testing, the 'npm run build' built as static. It was my lack of understanding how vue-cli was to build for production (via WebPack) (vue-cli builds static meant to be served via web server). Doing further testing, I can load and bring up my app on a couple local Linux servers (the static content running on one servers, while MongoDB and API running on another server (API running with pm2)). Also, I was able to bring it up on AWS S3 (as static). I think I have my answer now. Thanks much for your time.
***From Original Post:
How to run the following node app in production? Webpack build produced an index.html (I assume as it's using html-webpack-plugin). I can view the site if I run under a web server (e.g., nginx), but I want to run my final app using pm2, or running node process.
I am using the Vuetify WebPack template (I'm using Vue.js), when I run the npm run build for production (in package.json: “build”: “node build/build.js”) the output is as follows:
$ ls
index.html static/
and
$ ls static/js/
app.f7301c212bc5fefd6563.js manifest.2ae2e69a05c33dfc65f8.js vendor.1aae36aa0dc798d4d36d.js
app.f7301c212bc5fefd6563.js.map manifest.2ae2e69a05c33dfc65f8.js.map vendor.1aae36aa0dc798d4d36d.js.map
So, how do I run this via node (npm start) or pm2 (pm2 start) (can't use index.html or static/js files).
When I run the webpack build I was expecting a .js output (for example ‘build.js’) to run via node or pm2 (npm start that runs ‘node build.js’ or pm2 start build.js). I suppose this will work for serverless, but was looking to run via pm2 (with nginx as proxy) as the app will have other factors (e.g., MongoDB) that won’t allow running in serverless (e.g., AWS Lambda).
Would this be a matter of just re-configuring WebPack to output to a .js file (for example, build.js), or will the static files (served via a webserver, nginx/Apache/http-server) allow for the same functionality? That is, will there be any factors that would limit my app by running as static verses via ‘node build.js’ or ‘pm2 start build.js’, (for example, will my API connects to the back-end still work (back-end being node/JS))?
I am starting a new project which is using Angular 4 for frontend designing and the application will need some rest api's for which I have decided to use node. I am using angular cli for creating angular app and I know how to create angular app and node server but I want to know how will I connect these two things such that when I do ng serve both the server and angular app gets compiled and run. What basic changes in the project structure or some file is needed to be done?
I'm currently building a full-stack Angular app with a Node/Express backend and was wondering the exact same thing. However, despite what that scotch.io tutorial tells you, creating both the Express server and the Angular app in the same directory is NOT the best way to go about it.
What you want to do is set up your Express server in one project and serve it in one terminal window, then serve your Angular app in a separate terminal window but have it point to your locally-running Express server instead of the default dev server that's included with the Angular CLI (the ng-serve command).
Here's a Stack Overflow answer and also a Medium article that answered all of my questions for how to set this up (fortunately, it's not too hard).
Here's what I did Shubham. I went into the Angular-Cli and changed "outDir": to "../public"in other words it will look like "outDir": "../public". The ../public folder is my Express static folder set in my app.js file with app.use(express.static(path.join(__dirname, 'public')));
Keeping in mind I have nodemon installed globally, and in my package.json file, "start": "node app" I simply run nodemon from this dir to start my server and both Angular and Express run on the same server.
I have seen some people say it's not good to run static filed on the Node/Express server, but for development I'm not sure it matters. Although I'm a novice when it comes to js frameworks etc. Here's the project files on my github acct: https://github.com/chriskavanagh/angularauth.
Edit: You must run ng-build (in your Angular dir) whenever you change code.
First, in Angular project do ng build, it will create dist folder (static folder).
Second step, paste the following code in backend servers entry point file.
app.use(express.static(path.join(__dirname, 'dist/')));
app.get('*', (req, res) =>{
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
And after the above thing is done run backend server: node filename
Note: in give proper path where your index.html file is located in dist folder.
The node server and the Angular app are two different things.
In order to run the node server you should use the command:
node ServerName.js
In order to run the angular app you should use the command:
npm start OR ng serve
In your case, the connection between the two is made by http requests.
For example you could use 'express' in order to implement rest services in your node server and then send an http request to the server in the current route.
I want to host my app outside of node JS, but I want to use .vue files and possible npm as build system (if it's needed). Is it's possible to do?
I do not need any backward compatibility and if it work on latest Chrome dev it's ok for me.
Is there any examples how it can be done?
I tried to build some webpack template, but it's work only inside NodeJS. On other server I am getting 404 when I am accessing to URLs that placed in .vue files. It's seems that they can't be handled by the other server.
VueJS app is not NodeJS app.
VueJS app is interpreted by the browser.
You just have to build your app on computer and host files as any static website, so any server can serve html and files.
To build your app use e.g. Webpack (https://github.com/vuejs-templates/webpack )
NodeJs only use to build *.js files in front-end, your WebApp dosen't have to run on Nodejs.
1, You can create a index.html file that requires *.js file when webpack built it.
2, Use Chrome to open your index.html file so you can see it works.
You don't need to use vue-cli or other servers if you only want a static page.
But you have to know how to set your webpack.config.js, you can look that doc https://webpack.js.org/guides/getting-started/
Your starting point is wrong. Vue + node.js can build a complete site. Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.
In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.
Vue-cli
If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!
Vue Demo
Best way to develop Vue app is run dev server, and after all just build static assets. You don't need use vuex files, even better is use static template because you can easily integrate it with some back-end (WordPress or whatever).
Helpfully will be use some starter, for ex. Vue.js starter
It's true that vue will create static html pages when you run the build script. However, you will need to serve the files from a small server for the site to work. If you notice, when you run npm run build, the terminal will print a notice...
Tip:
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
You can create a simple http server in your /dist directory with express and then host your site somewhere like Heroku.
Take a look at this article https://medium.com/#sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0
TLDR;
write a super simple express server
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
add a postinstall script in a package.json within /dist
{
"name": "myApp",
"version": "1.0.0",
"description": "awesome stuff",
"author": "me oh my",
"private": true,
"scripts": {
"postinstall": "npm install express"
}
}
push only your /dist folder to heroku after you've compiled your site.
proof: I've followed these steps to host my vue.js project
using vue files without NodeJS (nor webpack) is possible with vue3-sfc-loader.
vue3-sfc-loader
Vue3/Vue2 Single File Component loader. Load .vue files dynamically at runtime from your html/js. No node.js
environment, no (webpack) build step needed.
vue3-sfc-loader will parse your .vue file at runtime and create a ready-to-use Vue component.
disclamer: author here
Could you try something as simple as an S3 bucket setup for web serving? How big is your project? How much traffic do you think you'll get? If it's very small, you may be able to host on S3 and use webpack, etc.
this seemed easy question now blocked my brain, hope to get your help.
I am now using webpack to start angular2 app, it is fine, just run npm start, in realty, it is running this command to boost angular2 project
webpack-dev-server --inline --progress --port 8080
Now everything is fine until I want to start actual development. Our actual development is using nodeJS, I want to use nodeJS to boost the whole angular2 project. I know I can use npm build to build angular project and then using static page inside nodeJS/express to loda that static page. This is ok for deployment or production enviornment. But for development, how can I do?
As above mentioned, I am using webpack-dev-server to boost ng2 project, which is reading a lot webpack.configuration, such as type script loader, sass loader, by default it is port 8080, but in my nodeJs project, it is using "node app" to start, and port is 3000. Obviously, this has caused cross domain issue here.
So is that possible to let nodeJS to boost my local development environment in ng2 so as to avoid the cross domain issue? If I use nodeJS, then where the webpack solution goes?
Hope to hear your suggestion
You can try two solutions. In both you need to have 2 servers: webpack and yours. Both work for any backend.
Enable CORS on your server responses. This might be tricky. Also, it does not really replicate the production behaviour (folder structure, URL paths, etc.)
Proxy all non-webpack output to your server. This is achieved by a couple of lines in a webpack config but it is really good because you still see your non-angular pages, content, static files etc as you would see them in production. What is also good, you can specify your production (stage, develop, whatever) server as a target and simply have no backend running on your machine at all.
This is how-to:
devServer: {
port: 8080,
proxy: { '**': { target: 'http://localhost:3000', secure: false, headers } }
},
This will start angular server on 8080 and redirect any non-webpack generated file to the target.