checking installation
Strategy

Using NGINX to Serve .NET Core, Nodejs, or Static Contents


Introduction

NGINX is a high-performance HTTP server as well as a reverse proxy. Unlike traditional servers, NGINX follows an event-driven, asynchronous architecture. As a result, the memory footprint is low and performance is high. If you’re running a Node.js-based web app or .NET Core Web Application, you should seriously consider using NGINX as a reverse proxy.

NGINX can be very efficient in serving static assets as well. For all other requests, it will talk to your Node.js back end or .NET Core Web Application and send the response to the client.

I have setup an Ubuntu VM on Azure. I will be using this VM for the demos in this post. However, you can use your local Ubuntu machine as well. For Bash commands, you can check my article on DZone on this link.

The post can be broken down in the following sections:

  • Installing Node and NGINX on Ubuntu.
  • Serving static website content from NGINX.
  • Nginx as Reverse Proxy for NodeJS application.
  • Nginx as Reverse Proxy for .NET Core Web Application.

Although the focus of this article is NGINX. But we will be dealing with a little bit of bash commands, NodeJS, and .NET Core. I have written about all of these topics on DZone, so you check my other articles for background information on these topics if needed.

Installing Node on Ubuntu

Executing the following bash commands will setup NodeJS and npm on your Ubuntu machine:

sudo apt-get update 
sudo apt-get install nodejs 
sudo apt-get install nodejs-legacy 
sudo apt-get install npm

We can check the installation as shown below:

checking installation

Installing NGINX on Ubuntu

Based on your requirement, you can check the official website for installation instructions. Here, I will be installing it on Ubuntu:

sudo apt-get update 
sudo apt-get install nginx

We can query the version to confirm that the installation went through:

Confirming installation of nginx

On Ubuntu, NGINX will start automatically once it’s installed.

Serving Static Contents

Let’s start simple and first, we will use NGINX to serve a static website in our first demo.

Configuring NGINX

Configuration files can be found on /etc/nginx/. NGINX comes with a default site config file and we can open it using nano:

sudo nano /etc/nginx/sites-available/default

As you scroll down, you’ll find a server block. It looks something like the following server block:

server block

We leave it as it is and scroll a little bit down (note, the structure of the configuration file can be different for different versions):

Scrolling a bit down

root: the root is set to /var/www/html, but you can choose a different directory if you like.

server_name: _ allows the use of any domain name (another option is localhost).

location /: this is an indication of the route and in this case, it is the very root level route.

As a result, whenever there’s a request on the default URL http://localhost/somepath/file.html, NGINX will serve the file from /var/www/html/somepath/file.html directly.

We will not change anything in this file yet but if we do, we have to restart the NGINX server afterward to make these changes take effect.

sudo service nginx restart

Also, we can check that there is some default HTML file on the root path:

for this demo, this file will be served. So there is a default configuration of NGINX which is pointing to the default HTML file. This is ok for our first test.

I created this Ubuntu VM on Azure cloud and it has a public IP address. I also created an inbound rule to allow traffic on port 80:

Allowing traffic on port 80

Now, if I enter the public IP address in the browser, the default website shows up confirming that NGINX is serving the HTML: 

NGINX serving the HTML

Of course, in reality, we want to serve our own content, but this is just to show you how to start and next, we will upload our own content using this learning.

SSH and SCP

Ok, I have another website, which I want to serve instead of the default NGINX HTML page. The Ubuntu server with NGINX installed is on the cloud and I now need to transfer my website contents files from my windows development machine to that particular HTML directory on the Ubuntu server. We can use git or ftp or something else, but for now, I will use scp for this.

For simply transferring files from one machine to another, Ubuntu comes with the scp command, which uses the SSH protocol to copy files between computers. We can use this tool to send our website configuration files and also website content files.

First, let’s grant permissions to write to the HTML directory:

Granting permission to write to HTML directory

Next, open a bash shell on my development machine and copy the files from the source computer to the target Ubuntu machine:

scp -r ~/Documents/GitHubProjects/Public/c3jsdemo 
jawadhasan80@13.80.248.51:/var/www/html

Next, I cd to the c3jsdemo directory on Ubuntu VM run npm install.

I also updated the config file of NGINX for the following root:

Because the config file is updated, we need to restart NGINX.

And now we can access the website via a public IP address:

Accessing website via public IP address

Once again, this is a very simple website but it has a little bit more contents than the default one we saw earlier. You can read more about the charting library used on this website at this link.

Setting Up a Node.js Server

For our next demo, I will be using an existing simple Node.js application. The application uses an in-memory array to store data and provide a basic API to perform CRUD operations. You can read about this application in this post on DZone.

Once again, I used scp tool to copy the source-code to Ubuntu VM as discussed earlier (Maybe I should set up a git client on VM to simplify this process).

copying source code

I also run npm install to install packages.

I can now run node application as follows:

running node application

Next, I updated the config file by adding a location block for the node-express application:

(Please note that the end of the location URL and the proxy_pass URL must be a forward slash when referring to directories rather than pages. If you don’t have those, you will get page-not-found error).

So, the server is listening on port 3000 and the location is setup for this server. Now, if I browse to this path I can see the response from the Node application:

Response from the node application

Using ASP.NET Core With a Reverse Proxy (NGINX)

A reverse proxy server is a web server that accepts requests and sends them to another web server which actually creates the responses for those requests. The responses are sent back to the proxy server who forwards them to the clients who issued the corresponding requests.

Nginx is a web server that can act as a reverse proxy for ASP.NET Core applications and which is also very good at serving static content.

With Nginx acting as a reverse proxy it would look something like this:

Browser <----> Nginx <----> Kestrel

We can breakdown the process in the following three steps:

  • Build and Publish .NET Core Web Application.
  • Copy published application to Ubuntu machine.
  • Serve published application using NGINX.

Building and Publishing .NET Core Application

I have a very simple .NET Core application that is built using the default visual studio template and it has a simple WeatherController.

DotnetCoreApiExample

Now, a .NET Core Web application is capable of serving static content as well (e.g., you can serve an angular application from within your .NET Core web application) but to keep things simple, our application only exposes REST endpoints for web-API calls.

.NET Core is cross-platform and I published the web-application using the following command:

dotnet publish "Web.csproj" -c Release -r ubuntu.16.04-x64

This will generate a published folder on our machine and now we can copy this published folder to our ubuntu machine as follows:

Copy Published Application to Ubuntu

I copied the published folder on a different directory on my windows machine, so it is easier to transfer it to the Ubuntu machine on the cloud.

scp -r /c/workspace/netcoreapp jawadhasan80@13.80.248.51:/var/www/netcoreapp/

Command within code

Now open the Ubuntu machine terminal (CLI) and go to the project directory. Provide execute permissions and run the application as follows:

chmod 777 ./Web 
./Web

our .NET Core web application is running in Ubuntu

Cool, our .NET Core web application is running in Ubuntu.

Nginx Configurations

This process is similar to what we have already done for the Node.js application. Open the NGINX config file using nano and add a location entry for .NET Core Web API as shown below:

sudo nano /etc/nginx/sites-available/default

sudo service nginx restart

Now, if we browse to ‘weatherforecast’ endpoint, we see our .NET Core application is returning the JSON data as expected:

Returning the JSON data as expected

Summary

In this post, we saw how to serve static, NodeJS, and .NET Core web applications using NGINX. If you like you can read more about bash commands, Linux, and .NET Core web applications deployments in my other articles. Let me know if you have any questions. Till next time, Happy Coding.



Source link

r/webdev - Project Critique
Strategy

Project Critique : webdev


Hello! I am a waiter who is trying very hard to make a professional leap and become a web-developer. I am using the current lock-down to learn as much as possible about development, and more specifically React, since it seems like the most accessible and widespread tool that could help me get that proverbial “foot in the door” professionally speaking. Below you’ll find the project I managed to put together over past few weeks while learning React.

The amount of knowledge out there can be quite overwhelming so any form or critique would be absolutely invaluable! Let me know what you honestly think of my project and what steps I should take to increase my chances of becoming a junior (testing and Typescript are the things I plan on tackling next btw.)

Here are the Repo and a live Demo. Cheers!

r/webdev - Project Critique



Source link

r/webdev - Any suggestion on a Expression Builder library for JavaScipt?
Strategy

Any suggestion on a Expression Builder library for JavaScipt…


Hello, I am looking for a library to build function like expressions in JavaScript. The idea is that the library shall allow me to define the user functions and the user shall be able to choose the different functions. I found 2 libraries that match partially my requirements, one of them meet my functional requirements and the other my UI design requirement. So I would like to ask you if you know any library that may fit better.

The libraries that I found are JQuery Expression Builder and JQuery Query Builder.

On one hand, the JQuery Expression Builder meets my functional requirements, as it allows to define easily the different functions and variables that the user can use. The data is defined as follows:

var options = {
  functions: {
    Add: function (x, y) {
      return x + y;
    },
    Sub: function (x, y) {
      return x - y;
    }
  },
  varaibles: [
    {
      variableId: 1,
      name: 'FirstName'
    },
    {
      variableId: 2,
      name: 'Age'
    }
  ]
};

And then it is possible to use it as Add(Add(2,FirstName), Sub(2, Age)), which is the functionality I want, it has autocompletion but it does not have a more guided UI to select the operations to perform, just plain text validation. A live demo can be found here.

On the other I found JQuery Query Builder whose functionality focuses on building SQL queries, which is not my use case, but which has a design based on tree structured selectors that guides the user while building the query

r/webdev - Any suggestion on a Expression Builder library for JavaScipt?

JQuery Query Builder Example

The problem with this library is that it focuses on building SQL queries, then, every field shall have at least an operator, and they are joined by AND/OR logical expressions. Check a live demo here.

In this case I would expect to have SUM/DIV/SUB/SUM_IF instead of AND/OR, and to have a selector to choose between the different predefined fields, creating a tree like structure to define the struct.

Do you know any other expression builder library which can meet both requirements? To create flexible function like operations and to have a guided UI that can help the user to decide what he can do or else.

Thank you! 😀



Source link

r/webdev - I built a free website which lists remote dev jobs with social impact! Find meaningful work in companies tackling the UN
Strategy

I built a free website which lists remote dev jobs with soci…


r/webdev - I built a free website which lists remote dev jobs with social impact! Find meaningful work in companies tackling the UN's Sustainable Development Goals. New roles added daily!

https://www.remoteimpact.io/

Remote Impact lists 600+ roles spanning 17 impact categories including poverty, healthcare, education and climate action.

With this site we hope to support people all over the world to find employment in meaningful jobs tackling some of the worlds most pressing problems.

You can find out more about the UN’s Sustainable Development goals here . By far one of the most rewarding parts of the project has been discovering so many innovative companies using tech for good. I hope it helps you to find some too!



Source link

Post image
Strategy

‘Esoteric’ Poster Design V2 : graphic_design


Link to first post if you want to see previous versions of the poster: https://www.reddit.com/r/graphic_design/comments/lhrhym/esoteric_poster_design/

Challenge: Design a poster with the word ‘Esoteric’

(if your wondering this is my first attempt for a submission for the https://blankposter.com/ weekly challenge)

I haven’t ever heard that word till now so I ran with what I thought of.

I have gone through a few previous iterations but I kept losing track of the designs relation to the word.

I decided to do a bit more planning and sort of settled on a tarot-card/pyramid scheme theme which I think (hopefully) suit the word.

I stuck with the bold lines, dropped the RGB theme and re-purposed what I though was a good part of the previous posters-the mystery bald men.

Don’t be shy, give me the beans!

Post image



Source link

r/graphic_design - Educational Banner Design
Strategy

Educational Banner Design : graphic_design


Hello folks,

This banner is designed for a freelancer contest. They are building an online educational website for English vocabularies. The website will have a translation into the Somali language. So they want me to design a banner that they can use for their social media, like Facebook. This banner is blue colored and the blue color is the symbol of positivity and also gives us an energetic feel.

r/graphic_design - Educational Banner Design

This is for Dribbble Post



Source link

r/webdev - PostgresHR - Simple GUI to manage PostgreSQL grants
Strategy

Simple GUI to manage PostgreSQL grants : webdev


Hey guys,

I was looking for a simple interface to manage permissions for users in a database, and could not find one. Solutions like pgAdmin4 or phpPgAdmin didn’t have what I was looking for, so I made this.

https://github.com/butttons/postgres-hr

I’ve been using this internally for my hobby projects for quite a while to get started on the roles/permissions. This is not intended to be used on production.

Feedback appreciated!

r/webdev - PostgresHR - Simple GUI to manage PostgreSQL grants

PostgresHR



Source link

r/graphic_design - Need help with art design school work!
Strategy

Need help with art design school work! : graphic_design


Hey people, so I need help/advice with my design homework… This is the first time have done design in school and I’m struggling with it. I usually paint/digital and have a lot of freedom so when doing design I feel restricted and limited… (feels like problem-solving) This is the homework; our teacher wants us to draw our name on A3 in whatever style (font) we want and that part I have done… (don’t know if it’s good) but I did it, the problem is she asked us to add on top of our name (what makes me) ex. one girl in the class transformed some letters into plants cause she loves plants… So I’m not really sure what to do, what represents me… I don’t know, I like creating art, I like soccer and that’s about it… How am I supposed to create an interesting design with my name (Elliott) and that describes me… help! I need advice

r/graphic_design - Need help with art design school work!

I created my name using a “free” hand-drawn fish eye grid…



Source link