DEV Community: Daniel Schmitz

Creating a Mock REST Server with only one command

Daniel Schmitz — Mon, 06 Apr 2020 11:47:05 +0000

This tip is intended for frontend developers who need to quickly create a REST Backend server.

It is necessary to have Node installed, version 8 or higher. First, create a file with the .json extension containing the content you want to provide on the server.

The file has a structure similar to this one:

{
   "users":[
      {
         "id":1,
         "name":"daniel"
      }
   ]
}

You can create any kind of structure, for example:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

Now that we have this structure, we will use a single command to provide a REST server:

$ npx json-server data.json

As a result, we have the server running on port 3000. In the browser, we have:

All HTTP methods of the REST service are available, such as Get, Post, Delete, etc. For example, to create a new row you can use the HTTP POST method:

Enjoy!

Creating Node Applications using SOLID principles

Daniel Schmitz — Thu, 02 Apr 2020 14:08:40 +0000

It's easy to create a Node application (using for example the Express framework). The following example is generated by express-generator and works perfectly:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

The problem with an application built this way is maintenance. Adding new features or fixing a bug may seem easy when we are in the project development phase. After several months without seeing the project, a simple addition of functionality can take several hours.

Design patterns were created to solve this problem: Maintenance! Don't think that a pattern will make you write less code, we always write more code or create more files.

Among the hundreds of existing standards, we have one in particular called SOLID, which is a mnemonic acronym for five design principles intended to make software designs more understandable, flexible and maintainable.

Among these 5 principles, we will use the first two to write a Node application in a more organized way.

The first is called Single Responsibility Principle (the letter S) and has the following concept: A class should have one, and only one, reason to change. That is, a class or file should do only one thing, and have only one responsibility. A class/file that performs several distinct tasks should be avoided as much as possible.

The first example code displayed at the beginning of this article does not follow the SRP (Single Responsibility Principle) rule since the code performs several distinct functions.

The second principle is called Open Closed Principle (the letter O) and has the following concept: A class or file should be open for extension but closed for modification. In other words, when writing a new feature in the application, the ideal is to create a new file or class instead of editing the existing code.

Using just these two rules, we will create a Node application using the Express framework, in a structured way.

Project creation

With Node 8 or higher installed, run the following command on your favorite terminal.

$ mkdir solid-express-app
$ cd solid-express-app
$ npm init -y

The npm init -y command will create the package.json file with some initial settings:

Install the Express framework with the following command:

$ npm i -s express
+ express@4.17.1added 50 packages
found 0 vulnerabilities

The npm i (acronym for npm install) command installs a node package, and the -s attribute will record the package in the package.json file. The package.json file now has the following structure:

Create the index.js file and use your favorite text editor to open the solid-express-app folder. In this article we will use the Visual Studio Code.

$ touch index.js
$ code .

Initially create the following code:

const express = require('express')
const app = express();

app.get('/', function(req,res) {
    res.send('Hello Wolrd dev.to')
})

app.listen(3000, function () {
    console.log('Server running...')
})

To run this code, we will use the nodemon package which has the feature to restart the node service whenever the file changes.

$ npm i -D nodemon

We installed the nodemon with the -D option, which will save this package to the devDependencies of package.json. If you don't know this option or aren't familiar with Node, see more information at this link.

Edit the package.json file and add the start script, according to the code below:

{
  "name": "solid-express-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "nodemon index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.2"
  }
}

To run the start script, execute the following command:

With the server running, open in the browser the following address: http://localhost:3000

Reviewing the project

The application created so far has only the index.js file, and this contains two distinct features. The first uses the command app.get to create a route, answering with the message "Hello World dev.to". The second uses the app.listen command to start the web server.

To use the SOLID pattern, we have to isolate each functionality in files, and make the index.js file run these features.

First, it is necessary to separate the functionalities of the application. If you have no experience with Node development, the important thing is to understand how it will be created. We will add each feature in a folder called "libs".

const express = require('express')
const app = express()

const libs = require('./libs')
libs.forEach(lib => require(`./libs/${lib}`)(app))

The require('./libs') code will fetch from the file ./libs/index.js, and on the next line we use the forEach command to run each file, passing the app constant.

Create the libs directory, and add the index.js file with the following code:

module.exports = [
    'helloWorld',
    'start'
]

Add the file libs/helloWorld.js, with the following code:

module.exports = app => {
    app.get('/', function(req,res) {
        res.send('Hello Wolrd dev.to')
    })
}

Add the file libs/start.js, with the following code:

module.exports = app => {
    app.listen(3000, function () {
        console.log('Server running...')
    })
}

So far, we have the following files on the project:

The result of this refactoring is the same for the user. In the browser, there is no change. Now, we are respecting the Single-responsibility principle because each functionality is properly separated into files, and the Open-closed principle because when creating a new functionality, we must create a new file.

Adding new features

For example, if we want to add a new feature, like the cors module, we should do the following:

$ npm i -s cors

Change the libs/index.js file:

module.exports = [
    'cors',
    'helloWorld',
    'start'
]

Add the libs/cors.js file:

const cors = require('cors')

module.exports = app => {
    app.use(cors({
        exposedHeaders: 'Authorization'
    }))
}

When adding the cors module, see that we created a new http header in the request called `exposedHeaders'. To check if this change worked, use the Google Chrome Dev Tools (F12 key) and on the network tab search for "Access-Control-Expose-Headers".

Conclusion

The use of design patterns can slow down the pace at which you write software a little. Whenever you create a new feature you should create a new file, this can be boring or tedious at first, but it will help you maintain the software over time.

For example, if from this moment on you assume that all software will follow the SOLID standard, you will know in the future that no matter what project you are carrying out maintenance, when creating a new feature you should create a new file or class.

To access a more complex project, check this github project

If you found an error in my English, please let me know at danieljfa at gmail dot com

Everything you need to know about Environment Variables in Vue.js

Daniel Schmitz — Wed, 01 Apr 2020 22:20:38 +0000

In this post, we’ll learn how to work with distinct configurations between the development and production mode.

In a Vue project, we have to access the backend server through a URL. This URL can be http://localhost:8080/api, while we’re developing the project and http://site.com/api when the project is published. It’s necessary to find a way to change this URL automatically, according to the current state of the project.

A solution to this problem is the .env files concept.

.env files

The files with extension "env" (environment) are responsible for storing information that is sensitive to the environment (development, testing and production).

Using .env files in Vue

To use .env files in Vue, we can create an application that already supports environment files. Let’s install the vue-cli and create a simple project.

With Node 8 or higher installed, run:

$ vue create hello-world-env

To use vue create command, you need to install the vue-cli tool, through the command:

$ npm install -g @vue/cli

The vue create command will create an application with several files ready for use, like the above image:

In this post, we’re focused only on the environment configuration. The first thing to do it is to create a .env file at the project folder, with the following content:

VUE_APP_MODE=development

This file contains a pair of key/value entries, and you must start your key with "VUE_APP_". Only keys starting with "VUE_APP_" will be available in the Vue application. The VUE_APP_MODE key can be used in the Vue application through proccess.env.VUE_APP_MODE entry, like the code above:

export default {
  name: 'App',
  mounted() {
    console.log(`Working on '${process.env.VUE_APP_MODE}' mode`)
  },
}
</script>

This code produces the following response (in the ChromeDev Tools console):

Now let's simulate the production mode. First, create the .env.production file, with the following code:

VUE_APP_MODE=production

Build the vue project with npm run build:

After building, the dist directory was created. To run this project, use the following command:

$ npx http-server dist

The npx command will run the http-server package, with the parameter "dist". The result is below:

When opening the url in the browser, the result will be the following:

Now we see "Working on production mode" message. The .env.production file was used instead .env. This way, we can have different values for each build (development and production).

Tips

1- It's possible to get the project version stored in package.json file. First, open or create the Vue configuration file called vue.config.js (at the root of the project) and add this code:

process.env.VUE_APP_VERSION = require('./package.json').version

module.exports = {
    // config
  }

2- To show environment values inside <template> tag, you must use computed vars. The following example will fail:

<template>
  <div> {{ process.env.VUE_APP_VERSION }} <div>
</template>

Use computed vars to display the value of "VUE_APP_VERSION" correctly:

<template>
  <div>App Version: {{version}}</div>
</template>

<script>
export default {
  computed: {
    version () {
      return process.env.VUE_APP_VERSION
    }
  },
}
</script>

3- If you change something in the .env file, remember that you need to restart the server for the changes to take effect.

4- You can find the github project project here