<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Apu Chakraborty</title>
    <description>The latest articles on DEV Community by Apu Chakraborty (@apuchakraborty).</description>
    <link>https://dev.to/apuchakraborty</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F361892%2Fd9e522cc-f022-4b88-9751-23575e35047b.jpeg</url>
      <title>DEV Community: Apu Chakraborty</title>
      <link>https://dev.to/apuchakraborty</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/apuchakraborty"/>
    <language>en</language>
    <item>
      <title>The Ultimate Guide to Running n8n with Ollama LLM Locally Using Docker</title>
      <dc:creator>Apu Chakraborty</dc:creator>
      <pubDate>Tue, 10 Jun 2025 14:24:10 +0000</pubDate>
      <link>https://dev.to/apuchakraborty/the-ultimate-guide-to-running-n8n-with-ollama-llm-locally-using-docker-m5f</link>
      <guid>https://dev.to/apuchakraborty/the-ultimate-guide-to-running-n8n-with-ollama-llm-locally-using-docker-m5f</guid>
      <description>&lt;h3&gt;
  
  
  Would you like to automate tasks using AI locally—without relying on the cloud, incurring API costs, or risking data leakage?
&lt;/h3&gt;

&lt;p&gt;This guide will demonstrate how to operate n8n, a robust open-source workflow automation tool, in conjunction with Ollama, a high-speed local LLM runtime (similar to LLaMA, Mistral, or others)—all facilitated through Docker on your personal computer.&lt;/p&gt;

&lt;p&gt;Indeed, it is possible to establish a completely local AI automation system at no cost whatsoever. &lt;br&gt;
Let us explore this further.&lt;/p&gt;
&lt;h3&gt;
  
  
  📁 1. Create a folder structure
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;mkdir &lt;/span&gt;n8n-ollama
&lt;span class="nb"&gt;cd &lt;/span&gt;n8n-ollama
&lt;span class="nb"&gt;touch &lt;/span&gt;docker-compose.yml
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  🧾 2. Create &lt;code&gt;docker-compose.yml&lt;/code&gt;
&lt;/h3&gt;

&lt;p&gt;Create a file named &lt;code&gt;docker-compose.yml&lt;/code&gt; with:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;
&lt;span class="na"&gt;services&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;ollama&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;image&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ollama/ollama&lt;/span&gt;
    &lt;span class="na"&gt;ports&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;11434:11434"&lt;/span&gt;
    &lt;span class="na"&gt;container_name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ollama&lt;/span&gt;
    &lt;span class="na"&gt;networks&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;n8n-network&lt;/span&gt;
    &lt;span class="na"&gt;volumes&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;ollama_data:/root/.ollama&lt;/span&gt;

  &lt;span class="na"&gt;n8n&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;image&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;n8nio/n8n&lt;/span&gt;
    &lt;span class="na"&gt;container_name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;n8n&lt;/span&gt;
    &lt;span class="na"&gt;ports&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;5678:5678"&lt;/span&gt;
    &lt;span class="na"&gt;networks&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;n8n-network&lt;/span&gt;
    &lt;span class="na"&gt;environment&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;N8N_HOST=localhost&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;N8N_PORT=5678&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;N8N_EDITOR_BASE_URL=http://localhost:5678&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;WEBHOOK_URL=http://localhost:5678&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;NODE_FUNCTION_ALLOW_EXTERNAL=*&lt;/span&gt;
    &lt;span class="na"&gt;volumes&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;n8n_data:/home/node/.n8n&lt;/span&gt;

&lt;span class="na"&gt;networks&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;n8n-network&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;

&lt;span class="na"&gt;volumes&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;ollama_data&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;n8n_data&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This puts both containers in the &lt;strong&gt;same Docker network&lt;/strong&gt; so &lt;code&gt;n8n&lt;/code&gt; can reach &lt;code&gt;ollama&lt;/code&gt; using the hostname &lt;code&gt;ollama&lt;/code&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  ▶️ 3. Start both services
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker-compose up &lt;span class="nt"&gt;-d&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;you will get response like this -&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="o"&gt;[&lt;/span&gt;+] Running 2/2
 ✔ Container ollama  Started                                                                                        0.6s 
 ✔ Container n8n     Started           
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  ✅ Verify container
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="c"&gt;#verify containers&lt;/span&gt;
docker ps
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;CONTAINER ID   IMAGE           COMMAND                  CREATED      STATUS         PORTS                                           NAMES
0d99d7a06ff9   n8nio/n8n       &lt;span class="s2"&gt;"tini -- /docker-ent…"&lt;/span&gt;   3 days ago   Up 2 minutes   0.0.0.0:5678-&amp;gt;5678/tcp, :::5678-&amp;gt;5678/tcp       n8n
c5eabfa39b70   ollama/ollama   &lt;span class="s2"&gt;"/bin/ollama serve"&lt;/span&gt;      3 days ago   Up 2 minutes   0.0.0.0:11434-&amp;gt;11434/tcp, :::11434-&amp;gt;11434/tcp   ollama
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should see both &lt;code&gt;ollama&lt;/code&gt; and &lt;code&gt;n8n&lt;/code&gt; containers running.&lt;br&gt;
n8n - &lt;a href="http://localhost:5678" rel="noopener noreferrer"&gt;http://localhost:5678&lt;/a&gt;&lt;br&gt;
ollama - &lt;a href="http://localhost:11434" rel="noopener noreferrer"&gt;http://localhost:11434&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🎉 Great! That means &lt;strong&gt;n8n successfully connected to Ollama&lt;/strong&gt;, and now the only issue is:&lt;/p&gt;

&lt;blockquote&gt;
&lt;/blockquote&gt;


&lt;h2&gt;
  
  
  ⛓️ Pull the correct model inside the &lt;strong&gt;Ollama container&lt;/strong&gt;
&lt;/h2&gt;
&lt;h3&gt;
  
  
  Open a terminal inside the Ollama container:
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-it&lt;/span&gt; ollama bash
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;blockquote&gt;
&lt;p&gt;You're now inside the container.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;
  
  
  Pull a valid model (e.g., &lt;code&gt;llama3&lt;/code&gt;):
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;ollama pull llama3
&lt;span class="c"&gt;# ---&lt;/span&gt;
ollama pull llama3.2
&lt;span class="c"&gt;# ---&lt;/span&gt;
ollama pull deepseek-r1:1.5b
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;root@c5eabfa39b70:/# ollama list
NAME                ID              SIZE      MODIFIED   
deepseek-r1:1.5b    e0979632db5a    1.1 GB    3 days ago    
llama3.2:latest     a80c4f17acd5    2.0 GB    3 days ago    
llama3:latest       365c0bd3c000    4.7 GB    3 days ago 
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;blockquote&gt;
&lt;p&gt;⭐ This will download the official llama3 model.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;
  
  
  Exit the container:
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;exit&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  In n8n, update your model name:
&lt;/h3&gt;

&lt;p&gt;When setting up the &lt;strong&gt;Ollama node in n8n&lt;/strong&gt;, use:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;llama3
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;blockquote&gt;
&lt;p&gt;✌🏻 This matches the model you pulled.&lt;/p&gt;


&lt;/blockquote&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl http://localhost:11434/api/generate &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-X&lt;/span&gt; POST &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Content-Type: application/json"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s1"&gt;'{
    "model": "llama3.2",
    "prompt": "5+5 ?",
    "stream": false
}'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;From outside, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker &lt;span class="nb"&gt;exec&lt;/span&gt; &lt;span class="nt"&gt;-it&lt;/span&gt; ollama ollama list
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fusqs4f304sytnvb58ksd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fusqs4f304sytnvb58ksd.png" alt="step1" width="800" height="424"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh60qaoznmqj43xk2oo5u.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh60qaoznmqj43xk2oo5u.png" alt="Image step2" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foz3zkvrdcnxxsfvhivv8.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Foz3zkvrdcnxxsfvhivv8.png" alt="n8n-ollama connection setup" width="800" height="448"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsgo14l3wwnyfc8f3z7m5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fsgo14l3wwnyfc8f3z7m5.png" alt="Image last" width="800" height="641"&gt;&lt;/a&gt;&lt;/p&gt;




&lt;h3&gt;
  
  
  🛑 stop the container:
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker-compose down
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;You Did It! Now Build AI Agents Locally—Fast &amp;amp; Free.&lt;/strong&gt;  &lt;/p&gt;

&lt;p&gt;With Ollama + n8n, you can:  &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Run AI like Llama offline&lt;/strong&gt; (no APIs, no costs)
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Automate content, support, or data tasks&lt;/strong&gt; in minutes
&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Own your AI workflow&lt;/strong&gt; (no limits, no middlemen)
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Your turn—launch a workflow and see the magic happen.&lt;/strong&gt; 🚀  &lt;/p&gt;

</description>
      <category>n8n</category>
      <category>llama3</category>
      <category>agents</category>
      <category>docker</category>
    </item>
    <item>
      <title>How to add Ckeditor5 in your Next JS, react App</title>
      <dc:creator>Apu Chakraborty</dc:creator>
      <pubDate>Sun, 06 Jun 2021 11:08:43 +0000</pubDate>
      <link>https://dev.to/apuchakraborty/how-to-add-ckeditor5-in-your-next-js-react-app-1be7</link>
      <guid>https://dev.to/apuchakraborty/how-to-add-ckeditor5-in-your-next-js-react-app-1be7</guid>
      <description>&lt;p&gt;I am creating a fresh CRA &amp;amp; here is my project directory&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh1b1drfq7g5d1ioxc2o2.PNG" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh1b1drfq7g5d1ioxc2o2.PNG" alt="Alt Text" width="177" height="165"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Before we going started, you need to add this npm package first, to install please paste the below code into your terminal.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm i @ckeditor/ckeditor5-react
npm i @ckeditor/ckeditor5-build-classic
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;create a components folder under src folder and create a Editor component under components/Editor.js &amp;amp; use this code&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, { useEffect, useRef } from "react";

function Editor({ onChange, editorLoaded, name, value }) {
  const editorRef = useRef();
  const { CKEditor, ClassicEditor } = editorRef.current || {};

  useEffect(() =&amp;gt; {
    editorRef.current = {
      CKEditor: require("@ckeditor/ckeditor5-react").CKEditor, // v3+
      ClassicEditor: require("@ckeditor/ckeditor5-build-classic")
    };
  }, []);

  return (
    &amp;lt;div&amp;gt;
      {editorLoaded ? (
        &amp;lt;CKEditor
          type=""
          name={name}
          editor={ClassicEditor}
          data={value}
          onChange={(event, editor) =&amp;gt; {
            const data = editor.getData();
            // console.log({ event, editor, data })
            onChange(data);
          }}
        /&amp;gt;
      ) : (
        &amp;lt;div&amp;gt;Editor loading&amp;lt;/div&amp;gt;
      )}
    &amp;lt;/div&amp;gt;
  );
}

export default Editor;



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Now go to your app.js or wherever you want to use this editor just import Editor Component and use this&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import React, { useState, useEffect } from "react";
import "./styles.css";
import Editor from "./Editor";

export default function App() {
  const [editorLoaded, setEditorLoaded] = useState(false);
  const [data, setData] = useState("");

  useEffect(() =&amp;gt; {
    setEditorLoaded(true);
  }, []);

  return (
    &amp;lt;div className="App"&amp;gt;
      &amp;lt;h1&amp;gt;ckEditor 5&amp;lt;/h1&amp;gt;

      &amp;lt;Editor
        name="description"
        onChange={(data) =&amp;gt; {
          setData(data);
        }}
        editorLoaded={editorLoaded}
      /&amp;gt;

      {JSON.stringify(data)}
    &amp;lt;/div&amp;gt;
  );
}


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;visit ckEditor5 documentation to add more features - &lt;a href="https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html"&gt;https://ckeditor.com/docs/ckeditor5/latest/examples/builds/classic-editor.html&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;you can clone repo &lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag-github-readme-tag"&gt;
  &lt;div class="readme-overview"&gt;
    &lt;h2&gt;
      &lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A9-wwsHG--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"&gt;
      &lt;a href="https://github.com/apuchakraborty"&gt;
        apuchakraborty
      &lt;/a&gt; / &lt;a href="https://github.com/apuchakraborty/ckEditor5-implement"&gt;
        ckEditor5-implement
      &lt;/a&gt;
    &lt;/h2&gt;
    &lt;h3&gt;
      Created with CodeSandbox
    &lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="ltag-github-body"&gt;
    
&lt;div id="readme" class="md"&gt;
&lt;div class="markdown-heading"&gt;
&lt;h1 class="heading-element"&gt;ckEditor5-implement&lt;/h1&gt;

&lt;/div&gt;

&lt;p&gt;Created with CodeSandbox&lt;/p&gt;

&lt;p&gt;go to  - cd /projectdir&lt;/p&gt;

&lt;p&gt;npm install &amp;amp; npm start to run&lt;/p&gt;

&lt;/div&gt;
&lt;br&gt;
&lt;br&gt;
  &lt;/div&gt;
&lt;br&gt;
  &lt;div class="gh-btn-container"&gt;&lt;a class="gh-btn" href="https://github.com/apuchakraborty/ckEditor5-implement"&gt;View on GitHub&lt;/a&gt;&lt;/div&gt;
&lt;br&gt;
&lt;/div&gt;
&lt;br&gt;


&lt;p&gt;You can use this code in codesSandbox&lt;br&gt;
Here is your editor -&lt;/p&gt;

&lt;p&gt;&lt;iframe src="https://codesandbox.io/embed/76ftq"&gt;
&lt;/iframe&gt;
&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>ckeditor5</category>
      <category>nextjs</category>
      <category>react</category>
    </item>
    <item>
      <title>Laravel 7 API authentication for beginners</title>
      <dc:creator>Apu Chakraborty</dc:creator>
      <pubDate>Tue, 25 Aug 2020 15:22:02 +0000</pubDate>
      <link>https://dev.to/apuchakraborty/laravel-7-api-authentication-for-beginners-496o</link>
      <guid>https://dev.to/apuchakraborty/laravel-7-api-authentication-for-beginners-496o</guid>
      <description>&lt;p&gt;Nowadays, API is becoming the most essentials for modern applications. In this article, we will see how can we create APIs using Laravel 7 easily.&lt;br&gt;
We are not going to cover what API is and why we should use it. So if you don't know What API is? then google it first and then come here. &lt;/p&gt;

&lt;p&gt;Let's come to the Point&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;First of all, let's create a fresh Laravel project&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;composer create-project --prefer-dist laravel/laravel laravelApi&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;We are going to use Laravel sanctum to get token so, let's install sanctum&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;composer require laravel/sanctum&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Now publish the configuration files and migrations&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;Now, it's time to add EnsureFrontendRequestsAreStateful middleware to your API middleware group in your &lt;strong&gt;app/Http/Kernel.php&lt;/strong&gt; file&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;

'api' =&amp;gt; [
    EnsureFrontendRequestsAreStateful::class,
    'throttle:60,1',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Configure your database in &lt;strong&gt;.env&lt;/strong&gt; file&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=yourdatabasename
DB_USERNAME=username
DB_PASSWORD=password

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;let's migrate&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;php artisan migrate&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;it is responsible for creating the user table in your application.&lt;/p&gt;

&lt;p&gt;Next, go to User Model in App/User.php and add this code&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, Notifiable;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Next, go to the routes folder and open api.php&lt;br&gt;
and add this line of routes&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Route::post('/register', 'RegisterController@register');
Route::post('/login', 'LoginController@login');
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and change the default middleware to sanctum&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Route::middleware('auth:sanctum')-&amp;gt;get('/user', function (Request $request) {
    return $request-&amp;gt;user();
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now create two controller RegisterController and LoginController&lt;br&gt;
&lt;/p&gt;

&lt;p&gt;&lt;code&gt;php artisan make:controller LoginController&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;?php

namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\ValidationException;

class LoginController extends Controller
{
    public function login(Request $request)
    {
        $request-&amp;gt;validate([
            'email' =&amp;gt; 'required|email',
            'password' =&amp;gt; 'required',
        ]);

        $user = User::where('email', $request-&amp;gt;email)-&amp;gt;first();

        if (!$user || !Hash::check($request-&amp;gt;password, $user-&amp;gt;password)) {
            throw ValidationException::withMessages([
                'email' =&amp;gt; ['The provided credentials are incorrect.'],
            ]);
        }

        return $user-&amp;gt;createToken('x-key')-&amp;gt;plainTextToken;
    }

}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;p&gt;&lt;code&gt;php artisan make:controller RegisterController&lt;/code&gt;&lt;br&gt;
&lt;/p&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;&amp;lt;?php

namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;

class RegisterController extends Controller
{
    public function register(Request $request)
    {
        $request-&amp;gt;validate([
            'name' =&amp;gt; ['required'],
            'email' =&amp;gt; ['required', 'email', 'unique:users'],
            'password' =&amp;gt; ['required', 'min:8', 'confirmed']
        ]);

        User::create([
            'name' =&amp;gt; $request-&amp;gt;name,
            'email' =&amp;gt; $request-&amp;gt;email,
            'password' =&amp;gt; Hash::make($request-&amp;gt;password)
        ]);
    }
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;let's register a user using postman&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F96p44ww6bo5aeterxnkn.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F96p44ww6bo5aeterxnkn.png" alt="Alt Text" width="800" height="443"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;and try to login&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Futg6avxr71zcw1mv95l1.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Futg6avxr71zcw1mv95l1.png" alt="Alt Text" width="800" height="484"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You are ready to go, cheers.&lt;/p&gt;

</description>
      <category>laravel</category>
      <category>beginners</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
