DEV Community: Sharanappa

Deploying a Node.js Project with MySQL on Railway

Sharanappa — Sat, 19 Apr 2025 20:23:10 +0000

1. Create a Railway Account & Log In via GitHub

Go to the Railway website.
Create an account or log in using your GitHub credentials.

2. Deploy a New Project

After logging in, click on “Deploy a New Project”.
Choose MySQL as the first service you want to deploy. Select the MySQL image.
Once the MySQL container starts, you’ll see an option at the top-right corner of the page to configure your server.

3. Configure the Server with GitHub Repository

Railway will ask you “What do you need?”
Select GitHub repo to link your project from GitHub.
Click on Configure GitHub App, and it will show you your repositories.
Choose the repo that you want to deploy.

Wait for 2 minutes for Railway to configure your project. After the configuration is done, you will be able to see your repo name in the server image list. Click on it to continue.

4. Deployment and Configuration

After clicking the repo name, Railway will open a window with different menus:

Deployments - Variables - Metrics - Settings
Under Deployments, you’ll see logs showing the deployment status and success/failure messages.

5. Set Up MySQL Variables

Under the Variables section, add the following environment variables for MySQL:

MYSQLDATABASE
MYSQLHOST
MYSQLPASSWORD
MYSQLPORT
MYSQLUSER

Make sure these variables match the ones generated by Railway for your MySQL service.

Note: After adding the variables, Railway will automatically connect to MySQL. If it needs to create tables or connect, the server code will handle it.

6. Fixing Common Errors

Root Directory Issue: If you’re working with multiple projects (e.g., client and server), Railway may prompt you to specify the correct root directory for your server. If you have two directories, ensure that the server directory is set as the root directory in the settings.

7. Get Your Custom Domain

In the Settings tab, you’ll see an option for Networking.
Click on Generate Domain to get your custom domain name for the deployed service.

8. Server Code Setup: Create `.env` File

In your server project, create a .env file in the root directory and add the following environment variables (make sure to replace the values with your own generated ones):

# Server Configuration this for loacl
PORT=5000
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=Sharan@123
DB_DATABASE=people_pro

# Railway MySQL config
MYSQLHOST=tramway.proxy.rlwy.net
MYSQLPORT=17091
MYSQLUSER=root
MYSQLPASSWORD=RcMTiimLAURmUcweLMDtrgDwGvmZdFZw
MYSQLDATABASE=railway

9. Update `db.js` (Database Connection)

Update your database connection code (db.js) with the correct environment variables, and make sure it's configured to connect to the Railway MySQL service:


// This code for local
import mysql from "mysql2"

import dotenv from 'dotenv';
dotenv.config();

const con = mysql.createConnection({
    host:process.env.DB_HOST,
    user:process.env.DB_USER,
    password:process.env.DB_PASSWORD,
    database:process.env.DB_DATABASE

})

con.connect(function(error){
    if(error){
        return console.log("Connection error");

    }else{
        return console.log("Coonected");

    }
})
export default con;


// This code for server
import mysql from "mysql2";
import dotenv from "dotenv";

dotenv.config();

const con = mysql.createConnection({
  host: process.env.MYSQLHOST,
  port: process.env.MYSQLPORT,
  user: process.env.MYSQLUSER,
  password: process.env.MYSQLPASSWORD,
  database: process.env.MYSQLDATABASE,
});

con.connect((error) => {
  if (error) {
    console.log("❌ Connection error:", error);
  } else {
    console.log("✅ Connected to the MySQL database!");
  }
});

con.query('SHOW TABLES', (err, results) => {
  if (err) {
    console.log('❌ Error:', err);
  } else {
    console.log('✅ Tables:', results);
  }
});

export default con;

This code ensures that the server can connect to the MySQL database hosted by Railway.

10. Push Updates to GitHub

Commit and push the changes, including the .env file and the updated db.js file, to your GitHub repository.
Railway will automatically detect the changes and deploy the updated code.

11. Check Deployment Logs

Go back to the Deployments section on Railway to check the logs for any issues.
If everything is set up correctly, your MySQL service should now be connected, and your server will interact with the database seamlessly.

Conclusion

You’ve successfully deployed your Node.js project with MySQL on Railway. 🚀 By configuring environment variables, updating your code, and linking your GitHub repo, your app should now seamlessly connect to the MySQL service. You can monitor deployments 🛠️, manage variables 🔧, and set up custom domains 🌐 for your project.

How to Set Up Tailwind CSS v4 Using Tailwind CLI

Sharanappa — Thu, 06 Mar 2025 08:01:28 +0000

Tailwind CSS v4 is a powerful utility-first CSS framework that helps you rapidly build custom designs. If you're looking to set up Tailwind CSS v4 using the Tailwind CLI (Command Line Interface), this guide will walk you through every step of the process.

Step 1: Create Your Project Folder

The first step in setting up Tailwind CSS v4 is to create a project folder. You can do this by navigating to your desired location and running the following commands:

mkdir my-tailwind-project
cd my-tailwind-project

Replace my-tailwind-project with your desired project name.

Step 2: Initialize the Project with npm

Once inside your project folder, initialize it as a Node.js project by running:

npm init -y

This creates a package.json file, where all your project dependencies will be stored.

Step 3: Install Tailwind CSS v4 and Tailwind CLI

With your package.json file ready, install Tailwind CSS v4 and the Tailwind CLI tool by running:

npm install tailwindcss@4 @tailwindcss/cli

This installs the necessary dependencies, specifically Tailwind CSS v4 along with the CLI tool to compile your styles.

Step 4: Create the Input CSS File

Now, create a file for Tailwind to be imported into. First, make the src directory and then create the input.css file:

mkdir src
touch src/input.css

Open src/input.css and add the following line to import Tailwind CSS:

@import "tailwindcss";

This file will now include the Tailwind styles when compiled.

Step 5: Set Up Your HTML File

Create an index.html file inside the srcdirectory:

touch src/index.html

Open src/index.html and add this basic HTML structure:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
  <title>Tailwind Project</title>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
     Hey coders, it's Sharan here, diving into Tailwind CSS v4!
  </h1>
</body>
</html>

This structure links to the output.css file that will be generated once we compile the Tailwind styles.

Step 6: Compile Tailwind CSS Using the CLI

To compile the CSS, run the Tailwind CLI with the following command:

npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

This will:

-i ./src/input.css: Specify the input file (your input.css with Tailwind's imports).
-o ./src/output.css: Specify the output file (where the compiled CSS will be saved).
--watch: Automatically recompiles the CSS when changes are made.

Once the process runs, it will generate the output.css file in your src directory containing all of Tailwind’s utility classes.

Step 7: Open Your Project in a Live Server

Now that your CSS is compiled, you can open your index.html file in a live server. If you're using Visual Studio Code, you can install the "Live Server" extension to view your project in the browser with live reloading.

Step 8: Set Up IntelliSense for Tailwind CSS

To make it easier to work with Tailwind CSS, especially for autocompletion and suggestions, install the Tailwind CSS IntelliSense extension in your code editor (e.g., VS Code).

Additionally, create a tailwind.config.js file in your project folder to further customize your Tailwind configuration. Run the following command to generate the file:

touch tailwind.config.js
npx tailwindcss init

This configuration file allows you to extend or modify the default settings of Tailwind CSS.

Step 9: Enjoy the Tailwind Experience

That’s it! You have successfully set up Tailwind CSS v4 in your project using the Tailwind CLI. Now, you can start building your project using Tailwind’s utility-first approach to styling.

Conclusion

With Tailwind CSS v4 and the Tailwind CLI, you’re all set to create custom designs efficiently. 🚀 Customize your project with the configuration file, and enhance your workflow with Tailwind CSS IntelliSense. 🎨
Happy coding! 👨‍💻👩‍💻

Understanding React Router: A Step-by-Step Guide for Beginners

Sharanappa — Sat, 21 Dec 2024 07:30:19 +0000

#React Router is one of the most popular libraries for handling navigation in React applications. It enables developers to build single-page applications (SPAs) with dynamic routing, creating a seamless and responsive user experience. In this guide, we'll explore the fundamentals of React Router and how to use it to build navigation in your React app.

What is React Router?

React Router is a library that allows you to manage navigation and routing in React applications

Why Use React Router?

1. Dynamic Navigation:

Enables smooth transitions between views without reloading the page.

2. Declarative Routing:

Routes are defined using JSX, making them easy to read and manage.

3. Nested Routes:

Allows for complex routing hierarchies.

4. Supports URL Parameters:

Enables dynamic content rendering based on the URL.

Getting Started with React Router

Installation

To use React Router, install the library via npm or yarn:
npm install react-router-dom
or
yarn add react-router-dom

Basic Setup

Here’s how to set up React Router in a simple React application:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function App() {
  return (
    <Router>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

BrowserRouter : Wraps the application and provides routing functionality.
Routes : A container for defining multiple routes.
Route : Defines a path and its associated component

Key Features of React Router

1. Dynamic Routes

React Router supports dynamic routes using URL parameters.

import React from 'react';
import { BrowserRouter as Router, Routes, Route, useParams } from 'react-router-dom';

function User() {
  const { id } = useParams(); // Access the dynamic URL parameter
  return <h2>User ID: {id}</h2>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </Router>
  );
}

export default App;

2. Navigation Links

Use Link or NavLink components instead of <a> tags for better performance.

import { Link } from 'react-router-dom';

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

Link : Prevents full page reloads, making navigation faster.
NavLink : Provides active styles for the currently active route.

3. Lazy Loading

Optimize performance by lazy loading components.

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </Suspense>
    </Router>
  );
}

export default App;

Conclusion

React Router simplifies navigation in React applications by providing a declarative and dynamic way to manage routes. Whether you’re building simple SPAs or complex nested applications, mastering React Router will significantly enhance your development skills.

Unlocking ES6-Essential Features Every Developer Should Know

Sharanappa — Sun, 08 Dec 2024 07:32:32 +0000

The arrival of ECMAScript 2015 (ES6) revolutionized JavaScript with several groundbreaking features. Whether you're a beginner or an experienced developer, understanding these features is essential for writing modern and efficient JavaScript. Let's explore the top 10 ES6 features every developer should know

01. Arrow Functions:

Arrow functions are a concise syntax for writing anonymous functions.

For instance, instead of writing this:

const square = function (value) {
  return value * value;
}

You can write the same code with an arrow function:

const square = (value) => value * value;

02. Spread Operator:

The spread operator allows you to spread elements of an array or properties of an object into a new array or object. This is useful for merging arrays or objects, or for spreading an array into function arguments.

For Example:

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];

03. Default Parameters:

Default parameters allow you to specify default values for function parameters in case no value is passed. This makes it easier to handle edge cases and reduces the need for conditional statements.

For Example:

const greet = (name = "Sharan") => {
  console.log(`Hello, ${name}!`);
};

04. Template Literals:

Template literals allow you to embed expressions in string literals. They use backticks instead of quotes and can be multi-line as well.

For Example:

const name = "Sharan";
const greeting = `Hello, ${name}!`;

05. Destructuring

Destructuring allows you to extract data from arrays or objects into separate variables. This makes it easier to work with complex data structures.

For Example:

const numbers = [1, 2, 3];
const [first, second, third] = numbers; //Array destructure

const person ={
  name: "Sharan",
  age: 25,
}
const {name, age} = person; // Object destructure

06. Rest Parameters:

Rest parameters allow you to collect an indefinite number of arguments into an array. This is useful for writing functions that can accept any number of arguments.

For Example:

const sum = (...numbers) => {
  let result = 0;
  for (const number of numbers) {
    result += number;
  }
  return result;
};

07. Promise:

Promises are a way to handle asynchronous operations in JavaScript. They provide a way to handle errors, and can be combined to create complex asynchronous flows.

For Example:

const getData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched");
    }, 1000);
  });
};

getData().then((data) => {
  console.log(data);
});

08. Class Definitions:

Class definitions provide a more object-oriented way of defining objects in JavaScript. They make it easier to create reusable objects with inheritance and encapsulation.

For Example:

class Person {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

09. Modules:

Modules allow you to organize your code into smaller, reusable pieces. This makes it easier to manage complex projects and reduces the risk of naming collisions.

For Example:

// greeting.js
export const greet = (name) => {
  console.log(`Hello, ${name}!`);
};

// main.js
import { greet } from "./greeting.js";
greet("Sharan");

10. Map and Set:

The Map and Set data structures provide an efficient way to store unique values in JavaScript. They also provide a variety of useful methods for searching and manipulating the data.

For Example:

// Creating a Map
const map = new Map();
map.set("name", "Sharan");
map.set("age", 25);

// Accessing values in a Map
console.log(map.get("name")); // Output: Sharan
console.log(map.get("age")); // Output: 25

// Iterating over a Map
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

// Output:
// name: Sharan
// age: 25

// Creating a Set
const set = new Set();
set.add("Sharan");
set.add("Basava");
set.add("Raju");

// Iterating over a Set
for (const name of set) {
  console.log(name);
}

// Output:
// Sharan
// Basava
// Raju

Conclusion

These ES6 features not only make JavaScript more powerful but also enhance code readability and maintainability. Mastering them is crucial for modern JavaScript development.

What’s your favorite ES6 feature? Let me know in the comments 💬!

DEV Community: Sharanappa

Deploying a Node.js Project with MySQL on Railway

1. Create a Railway Account & Log In via GitHub

2. Deploy a New Project

3. Configure the Server with GitHub Repository

Wait for 2 minutes for Railway to configure your project. After the configuration is done, you will be able to see your repo name in the server image list. Click on it to continue.

4. Deployment and Configuration

Deployments - Variables - Metrics - Settings

5. Set Up MySQL Variables

Note: After adding the variables, Railway will automatically connect to MySQL. If it needs to create tables or connect, the server code will handle it.

6. Fixing Common Errors

7. Get Your Custom Domain

8. Server Code Setup: Create .env File

9. Update db.js (Database Connection)

10. Push Updates to GitHub

11. Check Deployment Logs

Conclusion

How to Set Up Tailwind CSS v4 Using Tailwind CLI

Step 1: Create Your Project Folder

Step 2: Initialize the Project with npm

Step 3: Install Tailwind CSS v4 and Tailwind CLI

Step 4: Create the Input CSS File

Step 5: Set Up Your HTML File

Step 6: Compile Tailwind CSS Using the CLI

Step 7: Open Your Project in a Live Server

Step 8: Set Up IntelliSense for Tailwind CSS

Step 9: Enjoy the Tailwind Experience

Conclusion

Understanding React Router: A Step-by-Step Guide for Beginners

What is React Router?

Why Use React Router?

1. Dynamic Navigation:

2. Declarative Routing:

3. Nested Routes:

4. Supports URL Parameters:

Getting Started with React Router

Installation

Basic Setup

Key Features of React Router

1. Dynamic Routes

2. Navigation Links

3. Lazy Loading

Conclusion

Unlocking ES6-Essential Features Every Developer Should Know

01. Arrow Functions:

For instance, instead of writing this:

You can write the same code with an arrow function:

02. Spread Operator:

For Example:

03. Default Parameters:

For Example:

04. Template Literals:

For Example:

05. Destructuring

For Example:

06. Rest Parameters:

For Example:

07. Promise:

For Example:

08. Class Definitions:

For Example:

09. Modules:

For Example:

10. Map and Set:

For Example:

Conclusion

8. Server Code Setup: Create `.env` File

9. Update `db.js` (Database Connection)