A few months ago, I made a lorem ipsum app that would jumble together technology related words into sentences and paragraphs. After watching the latest season of , I decided to change my application to use quotes from the Stranger Things series and I renamed the app . Stranger Things Stranger Ipsum The application is built with and . It’s a simple application that only has one page, but I thought I’d explain the main pieces of the application, since it may be helpful for those learning Node and Express. If you follow along with the steps outlined below, you should be able to create your own simple lorem ipsum application. Node.js Express For those who aren’t already familiar, is a and is a . Basically, Express makes using Node a bit easier since you don’t have to write as much code to get things working the way you want. Express also has some great documentation . Node.js server framework Express web framework for Node you can reference If you’d like to view the final version of my lorem ipsum app which includes all of the code described below and more, you can or you can take a look at the . view it live code on Github Getting started Before doing anything, make sure you’ve got npm and node installed on your computer. Then create a project directory ( ) naming it whatever your heart desires. Once you’ve done that, navigate inside your project directory using your terminal ( ) and initialize a file with the command . The command initializes a new file and the option accepts all the default parameters. mkdir project-name cd project-name **package.json** npm init -y init **package.json** -y Before creating any files, make sure to install Express from npm with the following command: . npm install express Once you’ve done that, create your main application file inside of your project directory and name it . Below is all the code that goes into your file: **app.js** **app.js** I’ve got comments in the code to help with understanding, but I’ll explain it further. The variables and defined at the top of are necessary in order to create an Express application. The variable is an object created by Express and it has many different methods we can call. express app **app.js** app The variable holds our application routing logic, which is defined in . I’ll go over that later. routes **router.js** The and variables include information about where the application server can be found. refers to your localhost and is a port number I chose to serve my application on. hostname port 127.0.0.1 3000 tells Express where to look when serving static assets (such as images, html, and css files). In this case, static assets will be saved in the folder. app.use(express.static('public')) **/public** tells Express to use the routes defined in the variable we defined earlier. app.use(routes) routes Finally, is used to specify the port on which our application is running and begin accepting connections to the application. In our case, this allows us to view the application at in a browser window. app.listen() localhost:3000 index.html Next, let’s create the file. Since we specified our static assets directory as , make sure to create a directory named and add in a blank and file in the folder. **index.html** **/public** **public** **index.html** **styles.css** Your project directory should now look like this: /project-name /public - index.html - styles.css - app.js - package.json Alright, we need 5 main things in our file: **index.html** A link to our stylesheet ( ) **styles.css** A title A description A form that will accept the number of paragraphs to be generated A that will contain the generated lorem ipsum text <div> Here is what the file looks like with all those pieces in place. **index.html** I’m not going to go over the styling of the app with CSS. You can add whatever styles you’d like so your app has its own bit of flair. Application Routes Our app routes will be organized in . We will need to setup 2 routes: **router.js** a for the main application web page GET route a when the user inputs the number of paragraphs they would like to generate POST route The GET route will serve our page and our POST route takes the user input and passes it into a function that will generate the required number of paragraphs of text. Here is how the file should look like: **index.html** **router.js** The variable defined at the top is an object that is created by a constructor function we will define later in . The module is required to parse strings to key/value pairs in the POST route and the module is required to get the contents of different files in our application ( stands for ). loremIpsum **generator.js** querystring fs fs file system Variable declarations in router.js We are creating a instance from the class in order to properly manage our routes and their handlers (a route is the function that gets executed for a specific route). Our first route definition is the GET route to our main application page (i.e. the root or route). The router handler for the root route sends the contents of to the client. router express.Router handler / **index.html** GET route defined in router.js Our second route definition is the POST route which deals with the input value submitted by the user. The input value is an integer that specifies the required number of paragraphs to generate. The callback to gets called once data is received from the client and that data is stored in the variable. Once the data comes in, we convert it to a readable string using the method. We then store the numerical value of the user input in a variable called with the help of . request.on() inputValue .toString() numberOfParagraphs querystring Next, we generate and store lorem ipsum text in a variable called . The generation of the lorem ipsum text will be explained in the next section. Once we’ve got the text, we load the contents of index.html into a variable and replace the placeholder with the lorem ipsum text. The modified file then gets sent to the client and Voila! loremIpsumText <div> **index.html** POST route defined in router.js Don’t forget to add the statement at the bottom of . This allows us to require the file inside of . module.exports = router; **router.js** **app.js** Generating the Lorem Ipsum The way I’ve setup my lorem ipsum application is to have a bunch of quotes stored in an array and then form a paragraph by randomly selecting quotes from the array. Create a file and add the following code to that file: **generator.js** What’s going on in this file is that I am creating a constructor function called which will create an object with a property called and methods called , , and . An object called is created from the constructor function and it is exported at the bottom of the file so it can be required in . GenerateNewText() sentences getRandomSentence getParagraph getAllParagraphs loremIpsum GenerateNewText() **router.js** The property contains an array of quotes that will be used to build up a paragraphs of text. sentences The sentences property stores the strings that will be generated in our lorem ipsum app I’m not going to explain what each method in does, since the names I’ve assigned to the methods explain their function. The method is called in with the number of paragraphs passed in as an argument. GenerateNewText() getAllParagraphs **router.js** Run the App Alright, you should have everything in place to run your own application in the browser. In your terminal, navigate inside of your project folder and run the application using . If all goes according to plan, you should be able to go to your browser at and see your app running. Try inputing a number of paragraphs and hit . You should see your page refresh with the randomly generate text appearing at the bottom! node app.js localhost:3000 Generate Here’s what my page looks like when I follow the steps I’ve outlined above (with a few styles applied to the app): The result of following the above steps to create your own lorem ipsum app Conclusion As you can see from the picture above, the result could use some more styling to make the app look better. The app could also use more variety in the sentences that are outputted. You would have to add more items to the array of strings inside of . There’s a bunch of other stuff that could be done to improve the application. There is that lists a whole bunch of popular lorem ipsum apps you can check out to draw inspiration from. **generator.js** a great site If you’ve created a lorem ipsum app, please share it in the comments since I’d love to check it out! If you found this article interesting and web development interests you, consider following me on , , or . Twitter Github LinkedIn
