Translate Chapter 3 of JavaScript everywhere web application with node and express (^ ^)

Time:2021-7-30

Translate Chapter 3 of JavaScript everywhere web application with node and express (^ ^)

Write at the beginning

Hello, I’m Mao Xiaoyou, a front-end development engineer. Is translating an English technical book.

In order to improve everyone’s reading experience, the structure and content of the sentence are slightly adjusted. If you find any flaws in this article, or you have any comments or suggestions, you can leave a message in the comment area or add my wechat: code_ Maomao, welcome to communicate and learn from each other.

( σ ゚∀゚) σ..:* ☆ ouch, good

Chapter 3 web applications with node and express

Before implementing our API, we will build a basic server-side Web application as the basis for our API back-end. We will useExpress.js framework, the “minimalist web framework of node.js” means that it does not have many functions, but can be highly configured. We will use express.js as the basis for the API server, but express can also be used to build fully functional server-side Web applications.

User interfaces, such as web sites and mobile applications, communicate with web servers when data needs to be accessed. These data can be any data from the HTML required to render the page in the web browser to the user’s search results. The client interface uses HTTP to communicate with the server. Data requests are sent from the client over HTTP to the web application running on the server. The web application then processes the request again over HTTP and returns the data to the client.

In this chapter, we will build a small server-side Web application, which will become the basis of our API. To do this, we will use the express. JS framework to build a simple web application that sends basic requests.

Hello World

Now that you know the basics of server-side Web applications, let’s get started. In the SRC directory of our API project, create a file named index.js and add the following:

const express = require('express');
const app = express();
app.get('/', (req, res) => res.send('Hello World'));
app.listen(4000, () => console.log('Listening on port 4000!'));

In this example, first we need the express dependency and use the importedexpress .jsThe module creates an app object.

Then, we use the get method of the app object to direct our application to send a response when the user accesses the root URL (/)“Hello World”

Finally, we direct the application to run on port 4000. This will allow us to pass through the URLhttp://localhost: 4000 viewing applications locally.

Now to run the application, enter the following command on your terminalnode src/index.js

After this operation, you should see a log in the terminal, which reads and listens on port 4000.

If so, you should be able to open a browser window inhttp://localhost: 4000 see results

Figure 3 – 1.

Translate Chapter 3 of JavaScript everywhere web application with node and express (^ ^)

Figure 3-1. Results of our Hello world server code in the browser

Nodemon

Now, suppose that the output of this example does not properly express our excitement. We want to change the code to add an exclamation point to the response. Continuing with this operation willres.sendChange the value of toHello World!!Now the complete line should be:

app.get('/', (req, res) => res.send('Hello World!!!'));

If you go to a web browser and refresh the page, you will notice that the output has not changed. This is because any changes we make to the web server require us to restart it. To do this, switch back to your terminal and pressCTRL + CStop the server.

Now restart it by typing it againnode index.js

Now, when you switch back to the browser and refresh the page, you should see the updated response.

You can imagine how tedious it would be to stop and restart our server for each change.

Thankfully, we can use the node package nodemon to automatically restart the server when changes occur. If you see this projectpackage.jsonFiles can be found inscriptsObjectdevCommand, which indicatesnodemonMonitor the index.js file:

"scripts": {  ...  "dev": "nodemon src/index.js"  ...}

package.json Scripts

There are other auxiliary commands in the scripts object. We will discuss it in later chapters.

Now, to start the application from the terminal, enter:

npm run dev

Switch to the browser and refresh the page, and you will see that everything is normal. To confirm that nodemon automatically restarts the server, let’s update our server againres.sendValue to display as:

res.send('Hello Web Server!!!')

Now, you should be able to refresh the page and see the update in the browser without manually restarting the server.

Expansion port options

Currently, our application runs on port 4000. This is very useful for local development, but when deploying the application, we need to flexibly set it to other port numbers. Let’s take steps to replace it immediately. We’ll add one fromport Variable start:

const port = process.env.PORT || 4000;

This change will enable us to dynamically set the port in the node environment, but go back to port 4000 without specifying a port. Now let’s adjust

app.listenCode to use this change and useconsole.logTo output the correct port:

app.listen(port, () =>  console.log(`Server running at http://localhost:${port}`));

Now our final code should be:

const express = require('express');

const app = express();
const port = process.env.PORT || 4000;

app.get('/', (req, res) => res.send('Hello World!!!'));

app.listen(port, () =>
  console.log(`Server running at http://localhost:${port}`)
);

In this way, we now know the basics of the code that can start and run the web server. If everything is normal, make sure there are no errors in the console, and thenhttp://localhost:4000Reload the web browser.

conclusion

Server side web application is the basis of API development. In this chapter, we useExpress.jsThe framework builds a basic web application. When developing node based web applications, you can choose a variety of frameworks and tools. The flexibility, community support and maturity of express.js are a good choice. In the next chapter, we will turn our web application into an API.

Translator’s language and book details

If there is a lack of understanding, you are welcome to correct it. If you think it’s OK, please like your collection or share it. I hope it can help more people.

Is there anything to see? Is there anything to see? Is there anything to see?

If so, can you like it? Let me know someone is watching( ಥ_ ಥ)

English Title:《JavaScript Everywhere: Building Cross-Platform Applications with GraphQL, React, React Native, and Electron》

Chinese Translation:JavaScript everywhere: building cross platform applications with graphql, react, react native, and electron

Author:Adam D. Scott

translator: Maomao

Publication time: February 6, 2020.

Translation time: October 10, 2020

Book cover:

Translate Chapter 3 of JavaScript everywhere web application with node and express (^ ^)

catalogue

  • preface
  • Chapter 1 our development environment
  • Chapter 2 Introduction to API
  • Chapter 3 web applications with node and express
  • Chapter 4 our first graphql API
  • Chapter 5 database
  • Chapter 6 crud operation
  • Chapter 7 user account and authentication
  • Chapter 8 user operation
  • Chapter 9 details
  • Chapter 10 deploying our API
  • Chapter 11 user interface and react
  • Chapter 12 building a web client using react
  • Chapter 13 setting application styles
  • Chapter 14 using Apollo client
  • Chapter 15 web authentication and status
  • Chapter 16 create, read, update and delete operations
  • Chapter 17 deploying web applications
  • Chapter 18 desktop applications with electron
  • Chapter 19 integrating existing web applications with electron
  • Chapter 20 electron deployment
  • Chapter 21 creating mobile applications using react native
  • Chapter 22 mobile application shell
  • Chapter 23 graphql and react native
  • Chapter 24 mobile application authentication
  • Chapter 25 mobile application Publishing
  • Postscript
  • Appendix A. running API locally
  • Appendix B. running web app locally

Translate Chapter 3 of JavaScript everywhere web application with node and express (^ ^)