Forem: Rogelio Samuel

Modern Next.js starter + folder architecture

Rogelio Samuel — Tue, 21 Mar 2023 18:49:43 +0000

A modern Next.js starter fully configured with a solution for Tailwind, ESLint, Prettier, file structure, paths aliases, and more

Github template: https://github.com/sam-621/nextjs-starter

This template is designed to maintain medium and large frontend applications thanks to modularization by concepts and entities which allows us to have the business logic, the internal logic of the application, and the markup organized by entities or concepts of our system making easier the files searching, naming and system understanding.

There is a deeper explanation in the README and also in each directory with examples of folder structure and files

Svelte with Webpack 5 and Babel

Rogelio Samuel — Sat, 13 Feb 2021 23:04:07 +0000

In this tutorial, you are going to learn how to set up a Svelte project from 0.

If you just want the code, here is the repo

Tutorial

First of all, we create our folder

mkdir webpack5-svelte
cd webpack5-svelte
npm init --yes
mkdir src public

Now we install the following dependencies

Babel This lets us convert modern javascript into javascript which all browsers support

npm i @babel/core @babel/preset-env @babel/polyfill babel-loader svelte-loader --save-dev

Webpack Webpack is the tool that is going to convert all our svelte files to javascript files

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin css-loader mini-css-extract-plugin file-loader dotenv-webpack --save-dev

Svelte

npm i svelte

Config files

After this, we create babel and webpack files in our src folder

touch .babelrc webpack.config.js

.babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

Webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  // This says to webpack that we are in development mode and write the code in webpack file in different way
    mode: 'development',
  //Our index file
    entry: './src/index.js',
  //Where we put the production code
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/',
    },
    module: {
        rules: [
      //Allows use of modern javascript
            {
                test: /\.js?$/,
                exclude: /node_modules/, //don't test node_modules folder
                use: {
                    loader: 'babel-loader',
                },
            },
      //Allows use of svelte
            {
                test: /\.svelte$/,
                use: {
                    loader: 'svelte-loader',
                },
            },
      //Allows use of CSS
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
      //Allows use of images
            {
                test: /\.(jpg|jpeg|png|svg)$/,
                use: 'file-loader',
            },
        ],
    },
  //this is what enables users to leave off the extension when importing
    resolve: {
        extensions: ['.mjs', '.js', '.svelte'],
    },
    plugins: [
    //Allows to create an index.html in our build folder 
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'public/index.html'),
        }),
    //This gets all our css and put in a unique file
        new MiniCssExtractPlugin(),
    //take our environment variable in .env file
    //And it does a text replace in the resulting bundle for any instances of process.env.
        new Dotenv(),
    ],
  ////Config for webpack-dev-server module
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, 'dist'),
        hot: true,
    },
};

Create a Svelte app

We are going to create 5 files

public/index.html is the skeleton of our project
.env to test that dotenv-webpack works
./src/index.svelte the entry point
./src/app.svelte our application file
./src/global.css to test that css config in webpack works

touch ./public/index.html
touch .env
touch ./src/index.js
touch ./src/App.svelte
touch ./src/global.css

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--This is the node that svelte is going to take to make the magic-->
  <div id="root"></div>
</body>
</html>

.env

foo=bar

index.js

import App from './App.svelte';
import './global.css';

const app = new App({
    target: document.getElementById('root'), // entry point in ../public/index.html
});

export default app;

App.svelte

<script>
    let name = 'world';
  let envVariable = process.env.foo;
</script>

<style>
    h1{
        color: tomato
    }
</style>

<h1>Hello {name}!</h1>
<p>env variable: {envVariable}</p>

global.css

body{
  background-color: #EEEEEE
}

Run our project

We add the following scripts in our package.json

"scripts": {
  "start": "http-server ./dist/ --cors -o -c-1 --proxy",
  "build": "webpack --mode production",
  "dev": "webpack serve --open chrome"
},

Then we just run npm run dev and see the magic :)

After this, you can start making your svelte application with all features you will need.

If you'd like to contact me, here is my website

5 git commands you should know

Rogelio Samuel — Sat, 16 Jan 2021 01:22:59 +0000

Here I'm going to list some git commands you should know, explain what they do, and use cases

git diff
git checkout
git reset
git stash
git commit --amend

git diff

git diff shows changes between commits, files, commit, etc.

See what changes have you done since the last commit

you can use git diff (these changes have to be untracked)

See changes between 2 commits

git diff <commit id> <commit id> recommend you to put the commitid's in this order: <older commit> <newer commit>

Use cases

See what has changed between 2 commits
compare what changes you have done since the last commit

git checkout

git checkout allows you to move through the history of your repository, read, write, and come back, also you can use it to change between branches

go to a specific commit

git checkout <commit id> to come back you just need to write git checkout <actual branch>, if you are in the development branch, you use git checkout development and you are on the HEAD of your branch

Use cases

see the state of your project in a specific commit

git reset

git reset allows you to move through the history of your repository, like git checkout but you can't come back

go to a specific commit hard

git reset --hard <commit id> this is going to change your HEAD position to your commit id, removing all commits above that.

you can use it on your computer and see that the commits above are no longer.

Use cases

delete changes that you did that have a bug quickly

git stash

git stash, stash the changes in a dirty working directory away, you can use it when you want to remove changes haven't you commit or just see how the directory was without that changes

see how the directory was without that changes

git stash to save you changes in a temporary space and to bring them back use git stash pop

remove changes haven't you commit

git stash and then git stash drop

Use cases

delete changes have you done since the last commit

git commit --amend

git commit --amend allows you to add changes to the last commit without making another one and change the commit message.

git add . to add your changes to staging and the git commit --amend after this, you'll be able to change your commit message, after that, there is no new commit and your changes are committed

Use cases

You were wrong writing the commit message and want to change it
you forgot made little changes that belong to the last commit

I recommend you to prove these commands on your own computer to get more familiar with them, I hope you learned something :).

Tell us if you know another git command that could be useful and everyone should know.

React without create-react-app Webpack 5

Rogelio Samuel — Wed, 30 Dec 2020 17:16:08 +0000

We are going to create a react app with webpack 5.

Here is the code if you just want to copy and paste here is the webpack config file and the babel config file

If you like to know why these modules, read dawn there.

Tutorial

We create our folder

mkdir webpack5
cd webpack5
npm init -y

and we install the following modules

npm i react react-dom

npm i @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader file-loader html-webpack-plugin mini-css-extract-plugin react-hot-loader webpack webpack-cli webpack-dev-server --save-dev

@babel/core @babel/preset-env @babel/preset-react Allows compile modern javascript
babel-loader Allows transpiling JavaScript files
clean-webpack-plugin Allows remove/clean your build folder
css-loader mini-css-extract-plugin Allows use CSS in our projects
file-loader Allows the use of images in our project
html-webpack-plugin Allows creating an index.html in our build folder
webpack webpack-cli webpack-dev-server We are using webpack so we need to use webpack modules xd. webpack-cli let us use webpack commands and webpack-dev-server let us create a server with webpack for mode development
react-hot-loader Allows update react components in real-time

After installing all dependencies we create webpack file and babel file

touch webpack.config.js .babelrc

Now we create our template, this is our HTML file, which React is going to take to pint him in the DOM

mkdir public
cd public
touch index.html

And then we create the basic HTML file structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
        <!--this is the div that React is going to take-->
    </body>
</html>

in webpack file we write this:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { HotModuleReplacementPlugin } = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    //our index file
    entry: path.resolve(__dirname, "src/index.jsx"),
    //Where we put the production code
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.[contenthash].js",
        publicPath: "/",
    },
    // This says to webpack that we are in development mode and write the code in webpack file in different way
    mode: "development",
    module: {
        rules: [
            //Allows use javascript
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/, //don't test node_modules folder
                use: {
                    loader: "babel-loader",
                },
                resolve: {
                    extensions: [".js", ".jsx"],
                },
            },
            //Allows use of CSS
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    "css-loader",
                ],
            },
            //Allows use of images
            {
                test: /\.(png|jpg|svg)$/i,
                loader: "file-loader",
            },
        ],
    },
    plugins: [
        //Allows remove/clean the build folder
        new CleanWebpackPlugin(),
        //Allows update react components in real time
        new HotModuleReplacementPlugin(),
        //Allows to create an index.html in our build folder
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public/index.html"), //we put the file that we created in public folder
        }),
        //This get all our css and put in a unique file
        new MiniCssExtractPlugin({
            filename: "styles.[contentHash].css",
        }),
    ],
    //Config for webpack-dev-server module
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, "dist"),
        hot: true,
        port: 8000,
    },
};

Now we write this in .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

And finally, we write our commands

"scripts": {
    "dev": "webpack serve --open chrome",
    "build": "webpack --mode production",
    "start": "npm run dev"
},

And that's it, we have the configuration.

Now the only thing that we are going to do is check if the configuration that we did works (it works) creating a simple hello world with react so you can stop reading or keep reading.

It works?

short answer: yes

long answer:

We create the folders and file (in the root folder) that we are going to use

mkdir src
cd src
touch index.jsx App.jsx styles.css
cd ..

We write the next code

index.jsx

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

module.hot.accept();

App.jsx

import React from "react";
import "./Styles.css";

const App = () => {
    return (
        <div>
            <h1>Hello world</h1>
        </div>
    );
};

export default App;

Styles.css

body {
    background-color: black;
}
h1 {
    color: white;
}

we run the command

npm run dev

And we have this application

Bonus

If you want to add more functionalities to your react apps, here there are some modules that can help you.

dotenv-webpack, to use it you just need to require in webpack file and add it as a plugin.

//some code...
const Dotenv = require('dotenv-webpack');
//some code...

plugins: [
  //plugin...
  new Dotenv(),
  //plugin...
],

A reusable dark mode with Reactjs and pure CSS

Rogelio Samuel — Mon, 14 Dec 2020 16:08:41 +0000

we are going to make a dark mode with a smooth effect.

Main idea

The idea is; we are going to have a state

const [theme, setTheme] = useState(true);

and a variable named which is going to have the color of the theme

const color = theme ? "White" : "Dark";

we are going to put the color variable in the CSS classes that need to know in which mode is the application

className={"SomeClass-${color}"}

Then we create a class for each color with this line at the beginning transition: all 0.25s linear;

.SomeClass-White {
    transition: all 0.25s linear;
    background-color: white;
}
.SomeClass-Dark {
    transition: all 0.25s linear;
    background-color: black;
}

Tutorial

First of all, we have to create a react app, for practical purposes we are going to use the command:

npx create-react-app darkmode

in the src folder, we just need the App.js, App.css, index.css, and index.js files, the other ones you can delete or just omit.

in App.js we have this code

import React, { useState } from "react";
import "./App.css";

function App() {
    const [theme, setTheme] = useState(true);
    const color = theme ? "White" : "Dark";

    if (theme) {
        document.body.classList.remove("DarkMode");
        document.body.classList.add("WhiteMode");
    } else {
        document.body.classList.remove("WhiteMode");
        document.body.classList.add("DarkMode");
    }

    return (
        <div>
            <h1 className={`App-h1-${color}`}>Dark mode</h1>

            <button onClick={() => setTheme(!theme)}>Change theme</button>
        </div>
    );
}

export default App;

We have a state named theme, and a variable named color which has the word White or Dark; That variable we are going to use in each class that needs to know the state of the application

the conditional if is used to change the body class.

Now we add this code to index.css (classes for the body tag)

.DarkMode {
    transition: all 0.25s linear;
    background-color: black;
}
.WhiteMode {
    transition: all 0.25s linear;
    background-color: white;
}

Then we add this code to App.css

.App-h1-White {
    transition: all 0.25s linear;
    color: black;
}
.App-h1-Dark {
    transition: all 0.25s linear;
    color: white;
}

Here we can see the different classes for dark mode and white mode, the line of code that makes the smooth animations is transition: all 0.25s linear;

And that's it, now to have the theme state accessible to all your components you can pass it as a prop or create a context.

You can see a website that uses this strategy for dark mode website
and the code of this website is here Github repo

If you'd like you can follow me on Twitter or see my
Github