CODEWITHSUNDEEP
javascriptnode.jsvue.js
Funkberater
Funkberater

Reputation: 805

Upload JSON File to my server with vue and node js

I'm new to node js and vue development and I want to create a process where I can create and upload a JSON file to my server when the user saves data in a form. This process should be done in the background. Later I want to read and update that file from the server when the user changed something.

So my first idea was to use fs.writeFile() this doesn't work very well and I think this only works for local stuff is that correct? 

var fs = require('fs')

export default {
  methods:{
    send(){
      fs.writeFile("/test.json","Hello World!",function(err){
        if(err){
          throw err;
          } 
      });
    }
  }
}

Furthermore it looks like fs.writeFile doens't work with vue because it throws this error:

TypeError: fs.writeFile is not a function at VueComponent

So my second idea was to use express js with the app.post('/api/apps',...) and app.get() method. Here I have no idea how to implement that into the vue framework because I have to call the api like mydomain.com/api/apps but this doesn't work too.

So what is the best way to create, read, upload, delte files into a specific folder on my server? And how it works with vue? I tend to express js.

I'm using vue cli :)

Thanks in advance :)

EDIT

Now what I do is:

I created a new folder in my vue project root and named it "backend". In this folder I created a file named index.js and put this code 

    app.post('/appjson',(req,res) => {
        fs.writeFile("/appjson/myJson.json",req.body,function(err){
           //handle error
        });
    });

on the client side I put this code 

axios.post('myDomain.com/appjson', {
  JSONdata: myJSONdata,
})

My project looks like:

enter image description here

So when I build I get the dist folder and this I can upload on my server and it works fine. But I can't do the call to my backend? Whats wrong do I call the wrong link? Or how can I access my backend? Is the project struture correct or do I need to add the backend to a specific folder?

Upvotes: 0

Views: 1674

Answers (1)

exloser
exloser

Reputation: 37

Vue is client side, your code is trying to write something to the filesystem of the user thats using your website. what you want to do is send this data to your NodeJS server, this requires using a package like Axios to send data to and from the server without refreshing the page. Axios is pretty straight forward to use, what you need will look similar to the function below.

  saveJSON (myJSONData) {
const url = myNodeJSURL/savescene
return axios.post(url, {
  JSONdata: myJSONdata,
})

Read some tutorials on ExpressJS, It's a pretty painless framework to use. You'll get the data stored in the body of the HTTP request and then you can use fs.writeFile to save data to the local filesystem of your server. Let me know if you need more help.

EDIT: Your front end needs to be access a domain or IP address associated with your back end in order to communicate with it. Add the snippet below to your ExpressJS application and then when you run the server any requests to localhost:3000 will be handled by your app. You'll also have to update the URL in your Axios call.

app.listen(3000, function () {
  console.log('my server is listening on port 3000!')  
})

this setup only works for testing purposes because client and server will have to be on the same machine for localhost to mean the same to both. If you want this project to be public then you need to get your own domain for your site and host the ExpressJS application through there. Google compute makes this pretty easy to do, I'd look into that if I were you.

Upvotes: 1

Related Questions