Upload JSON File to my server with vue and node js

Question

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:

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?

You should start here Take a long look at the picture that shows the client and the server and read every bit of the article. — Randy Casburn
– Randy Casburn, Commented Mar 11, 2019 at 1:28

exloser · Accepted Answer · 2019-03-11 19:54:42Z

1

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.

edited Mar 11, 2019 at 19:54

answered Mar 11, 2019 at 3:22

exloser

371 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Funkberater Over a year ago

thanks for your help exloser :) I edited my question maybe you can have a look because I'm troubling a little bit..

exloser Over a year ago

@Funkberater project structure doesn't matter when it comes to client/server communication. You should start thinking of them as two completely different entities that can only talk to each other via HTTP. I edited my post to answer your new questions.

Funkberater Over a year ago

It works after some tries :) I can call my api and I get responses. So I'm using heroku for testing and host my api there. My last problem is how to upload a file to the server? I wrote the fs.writeFile() into my app.post() function but nothings happened. Is heroku the correct service to upload files? So can I upload files to the api server and if this a good idea? Or do I need another server like from Amazon aws for files?

exloser Over a year ago

I've never used heroku but it looks like that is an ephemeral file system so every time the dyno is reset all of your files are erased. I did a little research and it looks like you can get around this by using Amazon S3 . I'm not gonna be of much use if the problem is with heroku but if it's something related to the NodeJS server post your code and error messages and I can help you get it running.

Collectives™ on Stack Overflow

Upload JSON File to my server with vue and node js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related