I'm trying to make a simple app that parses a blob of tweets.

First, the basic file structure is:

On the front page (index.html), the user enters a Twitter user name in a text input field:

<input type="text" id="user-input" maxlength="25">
<button id="grabInput" onclick="storeInput()">Submit</button>

The storeInput() function lives in my app.js file in the back end where it has access to the Node modules I'm using to hit the Twitter API.

I've tried changing the file path in my script element to <script src="../app.js"></script> but it doesn't work.

Can anyone help me understand how the front end municates with the back end in a Node/Express app? I'm very frustrated because each 'half' of my app tests out okay, but I can't connect them.

Thanks!

I'm trying to make a simple app that parses a blob of tweets.

First, the basic file structure is:

On the front page (index.html), the user enters a Twitter user name in a text input field:

<input type="text" id="user-input" maxlength="25">
<button id="grabInput" onclick="storeInput()">Submit</button>

The storeInput() function lives in my app.js file in the back end where it has access to the Node modules I'm using to hit the Twitter API.

I've tried changing the file path in my script element to <script src="../app.js"></script> but it doesn't work.

Can anyone help me understand how the front end municates with the back end in a Node/Express app? I'm very frustrated because each 'half' of my app tests out okay, but I can't connect them.

Thanks!

• javascript
• node.js
• twitter

Share Improve this question Follow asked Jun 30, 2017 at 17:49 sims226sims226 511 gold badge11 silver badge55 bronze badges 4

• Might as well show your app.js code here. – Rax Weber Commented Jun 30, 2017 at 17:53
• A frontend application is run in the user's browser and has no knowledge of the functions in your backend. To municate with the backend, you need to use an ajax call (window.fetch, $.ajax, xmlHttpRequest, etc) to talk to an API Endpoint on your backend server that will then reference your backend function. – SethWhite Commented Jun 30, 2017 at 17:53
• please move app.js to the public folder of the Express.js. Express will not serve any files that are not in the public folder. you can test this through the browser by http://<path-to-the-server>/app.js – Shanil Fernando Commented Jun 30, 2017 at 17:54
• @SethWhite is correct. Based on your question details, you included the 'app.js' file to your code through the <script> tag. What happens is that it simply pulls out the code from app.js and executes it on the browser. It's still front-end code. So, if your 'app.js' contains code that's only for back-end, then it will not work. – Rax Weber Commented Jun 30, 2017 at 17:57

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

Execution example that should applies generic form post + express

HTML

<form method="POST" action="/foo-route">
   <input type="text" id="bar" name="bar" />
   <button type="submit">Send</button>
</form>

Express route

router.post('/foo-route',(req,res) => {
  if(typeof req.body.bar === 'undefined'){
    // The parameter is missing, example response...
    res.status(400).json({ error: 'missing parameter bar', data: null }); // Only an  example
    return;
  }

  let bar = req.body.bar;

  res.status(200).json({ error: null, data: bar }); // We received the value and only to show the example, returns it in a json within the key 'data'

});

The above example shows you how to handle input text from the form, and handle properly in the back-end. Adapt to your trouble should be easy. Let me know if not. And remember that add the field name=".." in your inputs. <input type="text" id="something" name="myGreatName" />, then access it with req.body.myGreatName.

you need to understand the basics of the web applications.

you can't call a server side storeInput() JavaScript function directly from the browser.

your web application has two parts. Server side and client side.

your existing storeInput() is trying to execute in the client side, Eg. In the browser. So you need it to make a request to the server and configure the server to redirect that request to the app.js. Then app.js will use nodeModule Twitter API to get data and respond to the request accordingly. Then you can render the client side according to the respond sent by your server.

But you don't have to do all of these, if you only want to simply show the posts from the Twitter without any server side manipulation. Twitter has a API that you can directly call from the client side and extract the data.I strongly remend you to use Twitter API if you want to simply show the posts since it is faster, simple and secure.

Why not use an HTML get form?. This way you can send the user input back to your server where you could have a route to process this input, interact with the twitter API and then render back the results.