DEV Community: Fatih

How to bootstrap a Next.js + Tailwind CSS + TypeScript project

Fatih — Wed, 24 Mar 2021 06:25:59 +0000

Hey everyone! Hope you're all safe and well. It's been a while since my last blog post. It's been a productive weekend and I wanted to finish it with a blog post as a cherry on top.

In this blog post, I'm gonna explain how I've bootstrapped my twitter clone project which I started working on yesterday. But first, let's talk a little about why I've chosen Next.js and Tailwind for the project.

fatihcandev / nextjs-tailwindcss-twitter-clone

Twitter Clone with Next.js and TailwindCSS

🌐 Live

View on GitHub

Next.js is a React framework. It's been out there for years now and it increases its popularity day by day. It provides various features that solve various problems and improve the development experience. Some of them are:

hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, image optimization and more…

I used Next.js before but it's been a while and the library's been improved very much since then so I wanted to get my hands dirty with it.

Here is the cause of the civil war that's been going for a while now between front end devs. Let's see what Tailwind says in its docs.

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

So, basically, it allows you to write CSS rapidly in HTML by writing pre-defined classes. Some old-school folks claimed that this was no way to write css and it'd cause chaos and some other said "Just try it, man! You'll see."
So, I had tried it a while ago and it was really rapid, I mean, really. The only thing that slows you down is trying to remember some classes but otherwise your fingers are basically like Mr. Robot while hacking. And the solution for the chaos in your HTML/JSX is to export classes with but let's not get into detail and get distracted. I'll share the link to the docs at the end and you can get into it.

We're gonna use create-next-app for pre-installed dependencies and pre-created folders to save time. See the manual setup here if you like.
Run the command below.

yarn create-next-app nextjs-tailwindcss-twitter-clone

It'll install next, react and react-dom and create some directories for you.

TypeScript

Now, let's setup TypeScript. Create an empty tsconfig.json file in the root and install the dependencies.

yarn add -D typescript @types/react @types/node

Start the dev server and Next.js will write the configurations for you into tsconfig.json.

yarn run dev

Allright! Let's get to Tailwind.

# If you're on Next.js v10
yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
# If you're on Next.js v9 or older
yarn add -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

After the installation, let's create the configuration file for Tailwind and PostCSS.

yarn tailwindcss init -p

You'll see that two files named tailwind.config.js and postcss.config.js has been created. Those two files allow us to make configurations such as creating our own theme, using plugins and more.
For now, we're gonna add Purge CSS support to allow Tailwind to tree-shake unused styles and optimize our production build. Edit purge property in the tailwind.config.js as below.

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

You can learn more about configuring Tailwind in the configuration documentation.

ESLint

Ain't no project without ESLint. Let's install the dependencies.

yarn add -D eslint eslint-config-airbnb eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

You can use the config here

Prettier

It literally makes your code prettier so let's install it.

yarn add -D prettier

Create a .prettierrc file and paste the config below into it

{
  "singleQuote": true,  
  "semi": false,  
  "printWidth": 100
}

You can start cracking on Tailwind CSS and Next.js.

How did I publish my first React Native library to npm?

Fatih — Fri, 04 Dec 2020 16:44:07 +0000

Hi, everyone 👋 I'm Fatih. I'm a front end developer from Turkey and this is my first post about my first react native library that I published to npm 2 days ago.

First of all, if you wanna take a look at it:
NPM
GitHub Repo

It's a dropdown component that let's you pick a country dial-in code for your phone number input.

So, it's been 5 months since I started to work as a professional front end developer. I mainly work with React but I am relatively new in React Native development. I was working on OTP login with firebase and I built a phone number input. Everything was okay but something was missing, a country code picker. So I checked the dropdown/picker packages but since they were not customizable and and I had my own design on my mind, I decided to build my own. At the end, I built a nice, searchable country code picker with flags and everything and my boss liked it a lot and suggested that I should publish it to NPM.

It was a process that I've made some research to get it done and learned many things about creating a package and publishing it. So, I decided to share this steps with the community.

Initializing the project

Initialize a React Native bare workflow project with TypeScript:

npx react-native init AwesomeTSProject --template react-native-template-typescript

Dependencies and package.json configuration

The most important thing is to get the package.json right. It contains all the necessary information about your soon-to-be package. Now, don't copy paste the info below, take a look at your package.json and edit/add fields accordingly:

{
  "name": "@digieggs-rn-country-code-picker", // Your package's name
  "version": "1.0.0", // Keep it 1.0.0 for now. It will increase automatically when you patch the project
  "main": "lib/module/index.js", // Entry point of the package
  "module": "lib/module/index.js", // Entry point of the package
  "react-native": "src/index.ts", // Entry point of the project
  "types": "lib/typescript/index.d.ts", // Entry point of the type definitions
  "description": "A searchable dropdown component to select a country code for your phone number input.", // Description to show on npmjs.com
  "files": [
    "lib/",
    "src/"
  ], // Entry point of the necessary files
  "keywords": [
    "react-native",
    "country",
    "country-code",
    "dialing code",
    "picker",
    "mobile",
    "ios",
    "android"
  ], // Some keywords to make the package easier to be found
  "bugs": {
    "url": "https://github.com/DIGIEGGS/rn-country-code-picker/issues"
  },
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "prepare": "bob build" // The command to build our package's core
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.3",
    "react-native-svg": "^12.1.0"
  },
  "devDependencies": {
    ...
    "@react-native-community/bob": "^0.16.2", // The builder. I'll talk about it
  },
  "peerDependencies": { // Add the dependencies that you want the user to install manually here. In my case it react-native-svg for the icons in the component
    "react-native-svg": "^12.1.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/DIGIEGGS/rn-country-code-picker"
  }, // repository info to show on npmjs.com
  "author": "Fatih Can <contact@fatihcan.dev>", // author info to show on npmjs.com
  "license": "MIT", // license info,
  "@react-native-community/bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      "module",
      "typescript"
    ]
  } // Config for the builder bob
}

After you are done with the package.json, let's install our dependencies with yarn or npm:

yarn or npm install

The most important dependency here is:

callstack / react-native-builder-bob

👷‍♂️ Simple set of CLIs to scaffold and build React Native libraries for different targets

This library will compile the ts files to js files and build type definitions of our components into a lib folder.

TypeScript configuration

After that, let's get to the tsconfig.json. You can copy/paste it if you like:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true
  },
  "include": ["src/index.ts"],
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

Source folder and necessary files

After that, let's create a src folder. This folder will contain the source of our package:

After that, create an index.ts file and export the main component like this:

export { default as CallingCodePicker } from './CallingCodePicker';

It's almost done. Let's create the necessary ignore files and we will build our package.

.gitignore

...

# generated files by bob
lib/

.eslintignore

node_modules/

# generated files by bob
lib/

.npmignore

tsconfig.json
src

# Logs
*.log
npm-debug.log

# Dependency directory
node_modules

# Runtime data
tmp

Building the library

Now, let's run the following command to build our package with bob:

yarn run prepare

If you see the following logs, it means our package is ready to test:

Testing

Run the following command:

npm pack

builder-bob will compress our project into a .tgz file that allows us to install it with yarn/npm into another project to see if it being installed successfully.

Now, you should see a .tgz file in the structure. Move it to Desktop and initialize another React Native project. I know... 🥱 Bear with me 👊

After that project is initialized, change the following path with the path of your .tgz file and run:

npm install C:\Users\digieggs\Desktop\digieggs-rn-country-code-picker-1.0.4.tgz
or
yarn add C:\Users\digieggs\Desktop\digieggs-rn-country-code-picker-1.0.4.tgz

After a successfull installation, you can import the component like this:

import { CallingCodePicker } from '@digieggs/rn-country-code-picker'

GitHub configuration

We need a GitHub repo if you wish to share the code with everyone and maintain the project. Run the following commands with appropriate names:

git init
git add .
git commit -m “Initial commit”
git remote add origin https://github.com/<username>/<package_name>.git
git push -u origin master

Don't forget to edit the repository and bugs section in package.json.

Publishing to NPM

After that, we are ready to publish our package. Run the following command to define a user. It will ask you your username, password and email.

npm adduser

Make sure to confirm you email address before running the publish command:

npm publish

And congrats! 🥳 The package is live and ready to be installed from anywhere with the following commands:

npm install <package_name>
or
yarn add <package_name>

Conclusion

You've just built your first npm package. Publishing a package may seem hard but it's not. I hope it was a clear guide, it's my first tutorial blog post. Please feel free to ask questions if you got stuck anywhere.