Creating a server-side web API with Javascript or Typescript means solving two objectives with one single action. You don't have to learn other backend programming languages like C#, Python, etc. to create a web application.
Deno is a secure runtime environment for Javascript and Typescript where you can run your Javascript/Typescript code. To create REST API we are going to use a Deno middleware web framework called Oak.
<h2>What is Middleware in Deno?</h2>
Middleware makes web development easier for developers so they can focus on the specific purpose of their applications. For example, the Oak framework was created for Deno's Http server where a client can send a request to a server and get a response from the server.
Let's say you want to upload files on google drive or somewhere on the internet and you clicked the upload button after selecting files. By pressing that button you send a request to the web-server and when it says "Your files uploaded successfully" or something like that, that is the response from the web server.
You will understand much better when you will create the REST API.
<h2>Prerequisites</h2>
To follow this post, you should have basic knowledge of <a href="https://www.typescriptlang.org/">Typescript</a>.
Also, I recommend you to learn <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Messages">HTTP Messages</a> like Http request, response, etc. That way you can understand how data is being exchanged between a server and client.
<h2>Getting Started</h2>
If you haven't installed Deno on your computer, check out the <a href="https://alhaqi.com/blog/install-deno-on-windows-mac-linux-operating-systems">Deno Installation on Windows, Mac, and Linux Operating Systems</a> article.
I am going to use the most popular text editor VS Code for this project. You have to install the Deno official plugin to work with the Deno project otherwise it will give you some errors. I recommend you to read the <a href="https://alhaqi.com/blog/deno-intellisense-on-vscode">Deno IntelliSense on VS Code</a> article to setup your Vs Code for Deno.
In any case, If you are stuck at following this post, you can check the completed code in this <a href="https://github.com/MejanH/web-api-deno">github repository</a>.
<h2>Building backend web API with Deno</h2>
Create a folder and open it on the VS Code and enable Deno extension on the project folder by creating <code>.vscode/settings.json</code>.
Now, create a <code>server.ts</code> file on the project directory and paste the code from below.
<pre><code class="language-typescript">import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

app.use((context) => {
 context.response.body = "Hello World!";
});

await app.listen({ port: 8000 });
</code></pre>
In this code above, we exported the <code>Application</code> from the Deno Oak module. If you visit the link that class imported from, you will see the export statement of the <code>Application</code> class there.
Then we created a new instance of the <code>Application</code> using the <code>new</code> operator which creates a new object with <code>Application</code> shape and runs the constructor to initialize it. Read the <a href="https://www.typescriptlang.org/docs/handbook/classes.html">Classes in Typescript</a> documentation to understand with more examples.
The <code>Application</code> has two methods called <code>.use()</code> and <code>.listen()</code>. The <code>.use()</code> method register the middlware and the <code>.listen()</code> method first start the server then start processing requests with the registered middleware.
If you look at the code, first we registered the middleware by using <code>app.use()</code> method then we used <code>app.listen()</code> method to start the server and process the requests from the middleware.
In the <code>.use()</code> method we passed an object called <code>context</code>. Now, What is <code>context</code> in the Oak middleware framework? The <code>context</code> provides information about the current state of the application. For example, We are sending an Http response message(<code>Hello World!</code>) to the client via <code>context</code>.
<h2>Why is there no <code>async</code> keyword before <code>await</code> in Deno?</h2>
You might notice that there is an <code>await</code> keyword before <code>.listen()</code> method but no function starts with the <code>async</code> keyword. So, does <code>await</code> work without <code>async</code> function in Deno? Yes, because Deno supports <a href="https://github.com/tc39/proposal-top-level-await">Top-level <code>await</code></a> feature but that does not mean you can use <code>await</code> in everywhere without <code>async</code> functions. Let me explain in more detail.
<h4>What is the Top-level <code>await</code> feature in Deno?</h4>
Top-level <code>await</code> enables the capability to use the <code>await</code> keyword outside of async functions which act like big async functions. But you can't use the <code>await</code> keyword in regular functions without the <code>async</code> keyword like the code below.
<pre><code class="language-javascript">function something(){
 // you have to add async before the function
 await wrong()
}
</code></pre>
Top-level <code>await</code> only works at the top level of modules like the <code>await</code> before <code>.listen()</code> method above. So, it will wait until the Promises of <code>app.listen()</code> are resolved.
<h2>Starting the API</h2>
As you saw there is a value we passed called <code>port</code> in the <code>listen()</code> method. So, What is <code>port</code> in the <code>.listen()</code> method? It's a unique port of your local testing server which will start by the <code>.listen()</code> method. But why inside curly braces? Because we are Destructuring. We are passing an object as a function parameter.
Let's start the server to understand more.
Save the file, open the terminal on your VS Code and run:
<pre><code class="language-bash">deno run --allow-net server.ts
</code></pre>
<code>--allow-net</code> grant the permission to access the network. In Deno, you need to explicitly permit programs to do certain actions, such as access to the network.
Now, open your browser and visit <code>http://localhost:8000/</code>. You will get the <code>Hello World!</code> message in your browser.
<h3>What is localhost in Deno?</h3>
Localhost means your local computer where your server or program is running on. Developers run their programs on the localhost to test their applications working or not.
And, Ports are used to be able to run multiple servers so you can work with other application servers without closing your existing server. You can try other numbers as port too like <code>5000</code>, <code>3000</code> etc.
So, This is how you create a REST API with Deno and run it. But how can you test it? How can you send a request to the server or get the response from the server? Let's see how to do that.
<h2>How to test your web API?</h2>
There are a lot of tools to test web API. I am going to use the most popular and simple app called Insomnia Core.
Download and install the <a href="https://insomnia.rest/">Insomnia Core</a> on your computer then open it.
To create a new request click on the plus icon from the left side then click New Request. It will Popup a window to name your Request. Name whatever you want to name, I am naming it Default for now. Click Create to create your request.
<img src="/images/insomnia-creating-requests.png" alt="Creating New Request With Insomnia">
<img src="/images/naming-request-insomnia.png" alt="Naming Requests Insomnia">
Now, Paste your localhost URL(<code>http://localhost:8000</code>) on the URL bar of insomnia. There is a dropdown menu on the left side of the URL bar. Click on the menu to see all the available Http request methods like <code>GET</code>, <code>POST</code>, etc. Based on our source code, we are retrieving data from the server so we will select the <code>GET</code> method.
Finally, click on the Send button to send the <code>GET</code> request to the server. You will see the <code>Hello World!</code> message will appear on the right side.
<img src="/images/sending-requests-insomnia.png" alt="Sending Requests Insomnia">
<h2>Passing an array from Deno server to client</h2>
Let's say we want to send a list of blog posts to the client. So, we should have an array of every blog post where the blog posts will be in JSON Objects format.
So, let's create an array and pass it on <code>context</code> in the <code>.use()</code> method like the code below. Also, write a <code>console.log()</code> message to display server information on your terminal.
<pre><code class="language-typescript">import { Application } from "https://deno.land/x/oak/mod.ts";

const app = new Application();

const posts = [
 {
 id: 1,
 title:
 "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
 body:
 "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
 },
 {
 id: 2,
 title: "qui est esse",
 body:
 "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
 },
 {
 id: 3,
 title: "ea molestias quasi exercitationem repellat qui ipsa sit aut",
 body:
 "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut",
 },
 {
 id: 4,
 title: "eum et est occaecati",
 body:
 "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit",
 },
];

app.use((context) => {
 context.response.body = posts;
});

app.listen({ port: 8000 });

console.log("Server running on http://localhost:8000");
</code></pre>
Save the file, press <code>Ctrl+C</code> on your terminal to close the current running server. Because every time you change your code you need to restart the server to see changes. Now, run the <code>deno run --allow-net server.ts</code> command again to restart the server.
Go to insomnia and click the send button again. The posts data should appear on the right side like the screenshot below.
<img src="/images/terminal-message-of-deno-server.png" alt="colsole message of server runniing">
<img src="/images/get-resuest-for-array-insomnia.jpg" alt="array of posts in insomnia">
That's it, now you have learned how you can create, run, and test your web API with Deno.
<h2>Conclusion</h2>
In this whole post, I talked about only the <code>GET</code> request method which was basic of a REST API. You should make your next goal to create a crud API with Deno if you want to learn more.
If you don't understand any part of this post make sure to comment below. Also, If you learn something good from here don't forget to share the link to others.

Create a REST API With Deno Oak Framework

Using the Tailwind CSS framework with Next.js means getting rid of CSS modules, Styled Components, and writing Vanilla CSS code by calling HTML element classes in CSS, etc.
Also in Next.js production mode, you only get the CSS code your page needs and no more unused CSS from hundreds of CSS styles.
Just to clear up any confusion, This method also works with Typescript and If you get stuck following the instructions or looking at the source code is enough for you to implement Tailwind CSS in Next.js, visit the <a href="https://github.com/MejanH/tailwindcss-with-nextjs.git">GitHub repository</a>.
<h2>Getting Started</h2>
First, you need to create a project with <code>create-next-app</code>.
Run the <code>npm</code> or <code>yarn</code> command from below. It will ask you to type your project name. Name anything you want and hit enter.
<pre><code class="language-bash">npx create-next-app
# or
yarn create next-app
</code></pre>
Try running <code>yarn dev</code> or <code>npm run dev</code> command to check if your project was created successfully.
Now, delete the CSS import from <code>/pages/_app.js</code> and CSS files from styles folder and also replace the <code>/pages/index.js</code> file with the code below.
<pre><code class="language-JSX">// index.js
import Head from 'next/head'

export default function Home() {
 return (
 &#x3C;div>
 &#x3C;Head>
 &#x3C;title>Tailwind CSS with Next.js&#x3C;/title>
 &#x3C;link rel="icon" href="/favicon.ico" />
 &#x3C;/Head>
 &#x3C;h1>Creating a project with Tailwind CSS, NextJS &#x26; Typography&#x3C;/h1>
 &#x3C;/div>
 )
}

</code></pre>
<h2>Installing Tailwind CSS in Next.js with PurgeCSS &#x26; PostCSS</h2>
We are going to install Tailwind CSS npm packages in <code>devDependencies</code>. Because in production mode there will be only the CSS code we will use from Tailwind, not the whole Tailwind CSS file which will make our web app load slower.
Now, let me explain why use other packages.
<h3>Why should you use PurgeCSS with Tailwind CSS?</h3>
Based on <a href="https://tailwindcss.com/docs/controlling-file-size/">docs</a>, the uncompressed size of Tailwind CSS is 1680.1K and the compressed size is 133.3K.
This will make our web application heavy and we also don't want to import the unused CSS code on our website. That is the reason most people PurgeCSS.
PurgeCSS removes the unused CSS code from Tailwind at production build time.
So, whenever we will run <code>npm run build</code> it will keep only the CSS code we used from Tailwind.
It won't run at development mode so that we can apply Tailwind CSS classes in our browser developer tools.
<h3>Why should you use PostCSS Preset Env with Tailwind CSS?</h3>
PostCSS Preset Env convert our modern CSS with polyfills for old browsers support.
It's not the fault of Tailwind, It's just we don't use the old CSS code anymore like using <code>flexbox</code> not <code>clearfix</code>.
You can check out their GitHub <a href="https://github.com/csstools/postcss-preset-env">docs</a> for more information and options.
Let's add the npm packages, run:
<pre><code class="language-bash">npm install --save-dev tailwindcss postcss-preset-env
# or
yarn add -D tailwindcss postcss-preset-env
</code></pre>
We also need to configure Tailwind to use PurgeCSS and add new features.
Run the next command. It will create a config file(<code>tailwind.config.js</code>) in your project folder.
<pre><code class="language-bash">npx tailwindcss init
</code></pre>
Next, create a file called <code>postcss.config.js</code> in your project folder and paste the code from below.
<pre><code class="language-javascript">// postcss.config.js
module.exports = {
 plugins: ["tailwindcss", "postcss-preset-env"],
};
</code></pre>
I am going with the default setting, You can read the GitHub docs to change the default options.
Now, open the <code>tailwind.config.js</code> file and add the PurgeCSS <a href="https://tailwindcss.com/docs/configuration/">configuration</a> like below.
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
 purge: ["./components/**/*.{js,ts,jsx,tsx}", "./pages/**/*.{js,ts,jsx,tsx}"],

 theme: { extend: {} },
 variants: {},

 plugins: [],
};
</code></pre>
Then, go to the styles folder and create a CSS style sheet called <code>styles.css</code> and paste the code from below.
<pre><code class="language-css">/* /styles/styles.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
</code></pre>
Next, open the <code>pages/_app.js</code> file and import the <code>styles.css</code> file which will be the global CSS of your Next.js web application.
<pre><code class="language-jsx">// /pages/_app.js
import "../styles/styles.css";
</code></pre>
That's it. You have implemented the Tailwind CSS framework in your Next.js application.
Let's add a button in <code>pages/index.js</code> to check if it's working.
<pre><code class="language-jsx">import Head from "next/head";

export default function Home() {
 return (
 &#x3C;div>
 ...
 &#x3C;button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
 Button
 &#x3C;/button>
 &#x3C;/div>
 );
}
</code></pre>
<img src="/images/tailwind-with-next-js.png" alt="Tailwind with Next JS">
Yep, it's working.
I assume you already noticed that heading styles are gone. Because all headings, Lists are unstyled by default in Tailwind.
You have to manually style the headings, lists, pre, blockquote elements like the code below or you can add a responsive and customizable typography plugin in Tailwind or you can disable <a href="https://tailwindcss.com/docs/preflight/">Preflight</a> to bring the default HTML style back.
<pre><code class="language-css">/* /styles/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* custom styles */
h1 {
 @apply text-2xl;
}
h2 {
 @apply text-xl;
}
h3 {
 @apply text-lg;
}
a {
 @apply text-blue-600 underline;
}
</code></pre>
<h2>How to add typography in Tailwind CSS</h2>
It's easy. Just like styling a <code>&#x3C;div></code> element with a <code>className</code>.
First, let's install the Tailwind CSS plugin from the terminal.
<pre><code class="language-bash"># Using npm
npm install --save-dev @tailwindcss/typography

# Using Yarn
yarn add -D @tailwindcss/typography
</code></pre>
Next, Open the <code>tailwind.config.js</code> and add the plugin like below.
<pre><code class="language-javascript">// tailwind.config.js
module.exports = {
 theme: {
 // ...
 },
 plugins: [require("@tailwindcss/typography")],
};
</code></pre>
Then open <code>index.js</code> and add the <code>prose max-w-none</code> class in the parent div element.
Add some headings, lists, blockquote, etc. HTML tags in <code>index.js</code> to test if the typography plugin is working or not like the screenshot below.
<img src="/images/typography-with-tailwindcss-reactjs.png" alt="typography with tailwindcss and nextjs">
<code>prose</code> class added the beautiful typography style and the <code>max-w-none</code> class override the default max-width of the typography plugin.
You can also modify the default styles and make typography more responsive with this <a href="https://github.com/tailwindlabs/tailwindcss-typography">plugin</a>.
Try running <code>yarn build</code> or <code>npm run build</code> then run <code>yarn start</code> or <code>npm run start</code> to run your application.
Open the developer tools in your browser and go to Network tab and refresh the page. Click on CSS stylesheets type to filter only CSS files from the list.
You will see a very low sized CSS is generated like the screenshot below.
<img src="/images/purgcss-checking-with-tailwind-css-next-js.jpg/" alt="purgecss with tailwind">
Now, If you getting warning on your terminal like <code>risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, purgeLayersByDefault</code> or <code>defaultLineHeights, standardFontWeights</code>, You should check out the <a href="https://tailwindcss.com/docs/upcoming-changes">Upcoming Changes</a> tailwind documentation to update the <code>tailwind.config.js</code> file or check out the <code>tailwind.config.js</code> file from the <a href="https://github.com/MejanH/tailwindcss-with-nextjs">github repository</a>.
<h2>Conclusion</h2>
Tailwind CSS is more flexible and simple than bootstrap and other CSS frameworks. The combination of Tailwind CSS and React JS is awesome.
If you use Tailwind CSS as your primary framework I suggest you install Tailwind CSS Intellisense Plugin in vs code. This was helpful for me not to look at the docs every time. You just press <code>Ctrl+space</code> and it will show you every snippet with original CSS code.

Nav-Tree

#typescript

Create a REST API With Deno Oak Framework

Tailwind CSS With Next JS and Typography

No More Posts Available...