In the current era of globalization, technology is an undeniable part of our daily life. Technology develops from time to time to give us the opportunity to grow and to learn in order to nurture the welfare of mankind. Nowadays, there are many web development frameworks available for helping us up-to-date with the latest trends of technology. People use technology such as websites for many different purposes. They use it for selling their products, to communicate with others, to search for information, and so on. Building websites and web applications have been a trend in the community nowadays. Many developers are competing in providing the best web development services using a tool called web development framework.

A web development framework is a software platform that is designed to support the development of web applications such as web services, web resources, and web APIs. By using the framework, the development becomes much simpler and faster because web frameworks provide a standard way to build and deploy web applications on the World Wide Web. Since most of all the web frameworks are open source which means the growth of the frameworks including the development resources and enhancement will be driven by following the latest trends of technology. Web frameworks aim to automate the overhead associated with common activities performed such as libraries for databases, framework templates, session management, and even code reuse. Mostly they target the development of dynamic websites but are also applicable to static websites.

Django

It was first created in 2005 by Adrian Holovaty and Simon Willison and since the leap of Python's popularity then directly affected the application of Django itself.
Django is a Python-based web framework that follows the model-template-views (MTV) architectural pattern. Django makes web development fast with less code. The main idea is to ease the creation of complex and database-driven websites.

Many large and well-known corporations such as Google, Youtube, and Instagram use this open-source web development framework due to one of the key points that Django has which is its security. It allows you to build a secure website with the security features implemented in the framework itself, like code execution prevention in the template layer. The convention over configuration will also keep the developers focusing on the essential part of developing a website rather than setting each configuration.

Are you interested to try the tutorial of this server-side web framework? Go on and click here!

Express.js

Express.js, or simply Express, is a back-end application framework for Node.js and open-source software under the MIT license. It provides a robust set of features for web and mobile applications. Express.js allows you to clarify the features of Node with some core framework functionalities and also provides the robust performance of the asynchronous Node.js. It is designed as flexible to support web building applications and APIs.

The original author, TJ Holowaychuk, created  Express.js inspired by the minimalistic Web Framework Sinatra in providing similar minimalistic features available as plugins. Express.js is so popular among big names like IBM, Uber, and many other companies. You can install it here.

Angular

Angular is an open-source web application platform built on TypeScript. It is used for building scalable web applications with a component-based framework. Angular also covers a wide variety of features which makes it a well-integrated library. It is suited for developers to develop, build, test, and update their codes.

Angular is now one of the most popular and well-known web application frameworks developed by Google. From single developer projects to industry-level applications, It provides you with an advantage with a scalable platform to cover all those applications. With an easy updating process, Angular is designed to help you to manage the latest development with a minimum of effort. It takes you further at the maximum speed possible on the web platform.

Ruby on Rails

Ruby on Rails, or Rails, is a server-side web application framework and open-source software written in Ruby under the MIT License. Rails is a model-view-controller (MVC) framework, providing default structures for a database, web services, and web pages. The high speed of development has been the main advantage of this framework determined by extensive RoR tools, a huge set of pre-created solutions, and simple coding.

Ruby on Rails is optimized with Convention over Configuration (CoC), don't repeat yourself (DRY), and active record pattern to make it easier for developers to develop web applications. There is also the statement "Optimizing for programmer happiness". Many big and popular companies use Ruby on Rails for their websites such as GitHub, Shopify, Airbnb, Twitch, SoundCloud, Hulu, and so on. Want to learn more about Ruby on Rails? You can click here!

React

React is actually an open-source, front-end, JavaScript library but developers treat it and compare it as a framework instead. It is for building user interfaces or UI components. React uses a component-based architecture to develop simple components to complex components. It can be used to render on the server-side or client-side. React was first introduced and is maintained by Facebook. Today many big names use it such as Instagram, eBay, Yahoo, Netflix, etc.
You can dig deeper about React here.

Interested in Top Developer Tools for React? Check here!

Laravel

If you are searching for an expressive and elegant syntax, you may want to consider learning more about Laravel. Laravel is a free, open-source PHP web framework created by Taylor Otwell initially in 2011. It is used for the development of web applications following the model-view-controller (MV) architectural pattern.

Laravel comes with API support out of the box. It also possesses a modular packaging system with a dedicated dependency manager and utilities to aid in application deployment and maintenance. Not like Django or Express, Laravel might be a drawback for huge projects due to its performance.

Vue

Vue.js (commonly referred to as Vue; pronounced /vjuː/, like "view") is an open-source framework for building user interfaces. It adopts a model-view-view-model front-end JavaScript framework to build single-page applications. It has some interesting features on Vue. Unlike other monolithic frameworks, Vue is designed to be incrementally adoptable which means you can adopt Vue for one portion of your existing projects. Vue was first created by Evan You and first released in 2014.

If you already know about HTML, CCS, JavaScript, it is a good choice to dig into Vue.

Flask

The initial intention is to build a small core and easy to extend web framework. Flask is a micro web framework written in Python. It is a microframework because it has no particular tools or libraries such as database abstraction layer, validation form, any other pre-existing third-party libraries that provide common functions. Flask is designed to scale up complex applications to make a quick and easy getting started.

It was first developed by Armin Ronacher in 2010. Now it has become a popular microframework among developers. Flask gives liberty to developers for choosing the tools and libraries they want to use since it doesn't impose any dependencies or project layouts.

Spring

The Spring Framework is an open-source application framework and inversion of the control container for the Java platform. It adopts a model-view-controller (MVC) framework. It delivers production-grade features for developers to use many extensions for creating web apps based on the Java EE platform. Spring Framework is a framework for fast, secure, and responsive web applications connected to any data store.

Meteor

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework using Node.js. It provides cross-platform (Android, iOS, Web) and rapid prototyping code. On the client, Meteor can be used with Vue, React, Svelte, Angular, Blaze, or any popular front-end JavaScript framework. Meteor provides a set of technologies for building connected-client reactive applications, tools, a set of packages from Node.js, etc.

Conclusion

And that's the list of our version for the website development frameworks which is happening today. All of them offer great services, great tools, and of course great performance. And if you’re a developer trying to develop yourself with the most up-to-date frameworks, you can cherry-pick from the list which one you want to equip yourself with.

Do you have your own choice of website development framework? Give feedback below and let’s discuss more!

As technology develops, so does the number of software engineers or developers. Many software engineers or developers strive to be the best coder. They try to prove themselves in so many ways and one of them is the coding challenge. Many software engineers or developers use coding challenges not only to test their coding skills and algorithms in solving the use case problem but also to improve their skills. The challenges provide a variety of problems across different difficulties and coding practices such as recursing, querying, manipulating, etc. When solving a problem, a developer needs to pay attention to the time consumed by the code to make sure it is a solid solution. By doing coding challenges, they also develop and practice their skills to get better.

Nowadays many job recruiters tend to use coding challenges to test developers when they apply for a job. To see whether the applicants are up for the challenges in their future job is one of many reasons for the recruiters to use coding challenges. So doing coding challenges can be very essential in enhancing your career as a software engineer or developer. Many competitions are also held for developers to compete with others to win rewards from the coding challenge platforms.

HackerRank

HackerRank is one of the leading platforms for competitive programming challenges that use several different domains such as algorithms, mathematics, SQL, functional programming, AI, etc. HackerRank is more suitable for intermediate-to-advanced programmers who already know a language basic and are ready for more complicated problems. A variety of programming languages such as C, Java, Python, Ruby, etc are available for developers to use in solving the challenges. HackerRank also provides developers with a massive collection of coding challenges adjusted with algorithms and data structures, along with a discussion board and a list of top user solutions. Developers can also submit applications and apply for jobs by solving coding challenges provided by sponsored companies. If you are interested in this coding challenge, you can click here.

TopCoder

TopCoder is actually a company with an open global community of designers, developers, data scientists, and competitive programmers. TopCoder runs regular competitive programming challenges, known as Single Round Matches where developers compete against others to solve challenges. And the best score with the best solution wins a cash prize from corporate sponsors. Founded in 2001 by Jack Hughes, TopCoder also provides algorithm challenges solving advanced topics like graph search and number theory for advanced developers.

CoderByte

Coderbyte is a web application that helps you to practice and improve your coding skills. Coderbyte provides a variety of coding challenges that developers can solve directly online. The challenges range from easy to difficult which makes it suitable for all levels of programming. By using Coderbyte, developers can also view other users' solutions for any challenge apart from the solutions already given by Coderbyte.

They also offer a collection of code challenges, web development courses, and interview preparation courses that can help you improve your career as a developer in these modern technology days. And if you have a business to run, they also provide you with a technical screening product as well which can help you recruit top talents more accurately.

CodinGame

If you are looking for a new way to improve your programming skills while having fun, CodinGame is the answer. CodinGame website allows you to actually play games while coding. It lets you write the code for games that you play directly online. It ranges from easy to difficult levels which makes it suitable for everyone who wants to try.

CodinGame is a technology company that offers an online editing platform for developers. It allows developers to explore programming by solving difficult puzzles, learning to code better with an online programming application supporting 20+ programming languages, and also competing in multiplayer programming contests including timed artificial intelligence or code-golf challenges.

LeetCode

LeetCode is a platform to help you enhance your programming skills by providing various coding challenges. The challenges offer weekly and biweekly programming competitions with a general duration of 90 minutes. They have their own online editor called Playground where developers compete to solve the challenges. LeetCode is best suited for intermediate-to-advanced programmers who already know the fundamentals of code writing.

LeetCode also offers technical preparation for candidates up for job interviews. For companies, LeetCode helps them to identify top technical talents by sponsoring contests, providing online assessments, and any other business service.

CodeChef

CodeChef is an Indian-based non-profit educational organization that provides challenges for aspiring programmers to practice and sharpen their programming skills. CodeChef is a place for a competitive programming community of programmers from across the globe that contribute to the forums, write tutorials, and take part in coding competitions.

CodeChef holds a programming competition every month and developers can submit their solutions through an online editor support tool in over 55+ programming languages such as C, C++, Java, Python, etc. And if you are looking for various algorithm tutorials and forum discussions, CodeChef is what you are looking for.

Codewars

CodeWars is an educational community that provides a platform for programming exercises. It is great for beginner-to-intermediate developers in training different types of coding challenges. The community provides a collection of coding challenges for developers to solve directly online using one of the 20+ programming languages.

In Codewars, software engineers or developers will face a large collection of coding challenges. Developers can challenge themselves on programming challenges called kata to sharpen different skills, master their own language of choice, or even expand into a new one. They compete in various difficulty levels to earn a higher ranking. The ranking is determined by the points called the kyu in solving problems.

Conclusion

Programming takes a lot of time and effort. To sharpen your skills and improve yourself are things that you want to do as a developer. Participating in competitive programming contests will help you develop and be a stepping stone for your career in the world of technology. We compile these top best coding challenges based on multiple sources from Freecodecamp.org, Medium.com by Daniel Borowski, Geeksforgeeks.com, Dev.to and our team come up with these top 7. If your coding challenges platform is not on this list and you think it should be there, comment below to let us know.

In this tutorial, I will share how to deploy React Application using Firebase Hosting. First of all, make sure that you already have React Application project. If not you can follow this tutorial.

Install Firebase tools and login to Firebase

Next step, go to your React Application project directory and inside the directory, you will need to install the firebase tools using:

And then after that login into Firebase using:

Initialize Firebase for React Application

After installing the Firebase tools and login into Firebase, proceed to initialize the Firebase inside your React Application project by using:

You will get some questions and choices in the process, just follow the steps below:

Choose Hosting: Configure and deploy Firebase Hosting sites.

Choose Use and existing project and then choose your firebase project.

Follow all the answers like what I did in the screenshot above. You can answer differently if you really know what you are doing.

Now that you have successfully initialized firebase in your React application, inside firebase.json make sure that it looks like the following:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Deploying your React Application to Firebase Hosting

Now all you have to do is deploy your React Application into Firebase Hosting using:

Firebase will give you a unique URL where your deployed React Application is hosted on. That is all, congratulations! You have successfully deployed your React Application using simple and secure (securely hosted using HTTPS) Firebase hosting. If you want to learn how to create Firebase Cloud Function you can follow the tutorial here.

This article will serve as a guide which outlines how to create a working Sanity project, a headless CMS.

Pre-requisites

• NodeJS

Before Starting

Register for a free-tier account on sanity.io to try it out. The account will be used for the project initialization, although it is also possible to register through the instructions from running sanity init. Sanity gives an option to register with Google, GitHub, or by email and password at https://accounts.sanity.io/signup/.

Installing and Setup

Simply execute the following commands as also shown in Sanity's website and guides. It installs sanity CLI globally through npm and then runs sanity init to start setting up the project.

npm i -g @sanity/cli
sanity init

After following the instructions and initialization is complete, go into the Sanity project's directory and run sanity start to start a local development server of Sanity Studio. The program should output the location of the server for browser access, which is usually at http://localhost:3333.

Schemas

The main focus of Sanity development is about schemas. Schemas defines how the data should be inputted. By default, the initialization of Sanity project generates a file named schema.js which should contain an example schema. A minimal Schema looks like this:

import createSchema from 'part:@sanity/base/schema-creator'
import schemaTypes from 'all:part:@sanity/base/schema-type'

export default createSchema({
  name: 'default',
  types: schemaTypes.concat([
    // Add your own types here
    {
      title: "My Example Document Type",
      name: "exampleDocumentType",
      type: "document",
      fields: [
        {
          title: "Greeting",
          name: "greeting",
          type: "string"
        }
      ]
    }
  ])
})

This schema enables us to input a document with one text field named greeting in Sanity Studio.

Though, for actual project implementations, it might require the document to have various fields or even multiple schemas with a different set of fields. More on Schemas here: https://www.sanity.io/docs/schema-types

GraphQL API

Sanity, being a headless CMS, is basically just the back-end of a web app. So in order to make a full-fledged web app there should be a front-end to pull the data from Sanity. One convenient method of that is by using Sanity's GraphQL API feature. To use the GraphQL API, it must be deployed with the following command:

sanity graphql deploy

Sanity will then automatically create GraphQL schemas and then deploy it to Sanity's hosted services. The command also gives an option to enable GraphQL Playground or not, which can be useful for development.

The GraphQL API endpoint has the following structure:

https://<yourProjectId>.api.sanity.io/v1/graphql/<dataset>/<tag>

And then there's a CDN version of this API:

https://<yourProjectId>.apicdn.sanity.io/v1/graphql/<dataset>/<tag>

Where:

• <yourProjectId> = The project ID found in the Sanity project management console.
• <dataset> = Dataset name to be queried.
• <tag> = The API tag, can be found fromsanity graphql deployoutput. (usually "default")

The whole URL for the deployed GraphQL API is also outputted by sanity graphql deploy command upon deployment process finishes.

Project ID can be found on the Sanity's management dashboard (https://sanity.io/manage) or in the project's sanity.json.

Deployment

Simply run the following command to upload the developed project:

sanity deploy

This requires a hostname to be provided by Sanity Studio if it has not been assigned to the project yet. This is so it can be accessed from the Internet.

After the deployment is done, congratulations! You have created a fully working Sanity.io project!

Caveat

There are a few things that need to watch out for when developing a Sanity CMS project.

Dataset Sharing

If not specified in sanity.json, the dataset that's being used in development mode and production (deployed) mode is shared by default. This means any data being posted from the development server will also be visible in the production environment. To use a separate dataset, create the development-only dataset through the management console or CLI, and then specify it in the project's sanity.json file:

{
  // ... project info etc
  "api": {
    "projectId": "<your_project_id>",
    "dataset": "example"
  },
  "env": {
    "development": {
      "dataset": "example-dev"
    }
  },
  // ...
}

Any specification in env.development will only be used during sanity start runs and not for the deployed ones. After this configuration, development runs will use example-dev dataset while the deployed production-mode Sanity Studio will use example dataset.

Reference: https://www.sanity.io/docs/sanity-json#933842c25dea

GraphQL Deployment

GraphQL changes that resulted from schema changes in development mode does not automatically get deployed. So, after finalizing changes to the schema in development mode, the GraphQL API needs to be redeployed. This is done by simply running the deployment command again:

sanity graphql deploy

In this article, I want to discuss some of the CMS (Content Management Systems) that we can find out there. Here I will discuss a list of headless CMS that I have researched before.

Directus

Directus is an open-source CMS that using 100% Javascript language (Vue - based) which has a huge community especially at Github and good documentation. It also supports Real-time GraphQL and has an intuitive admin app for non-technical users. Directus itself was already established in 2004 (17 years) and a well-maintained headless CMS. However, if you want the automatic backup and system monitoring features you need a paid subscription.

Prismic

Prismic is one of the open-source headless CMS that is compatible with a lot of frameworks such as ReactJS, Next.JS, Nuxt, Gatsby, Vue, Node.JS, PHP, and Laravel. This headless CMS also supports multi-languages and is trusted by over 4000 companies such as Netflix, Google, Digital Ocean, and many more. However, the free membership only can support 1 user and you also need a paid membership for backups and restore capabilities.

Kontent

Kontent provides features that are compatible with websites, mobile, chatbots, wearables, and IoT devices. This CMS is used by big companies such as Starbucks and Oxford University. This CMS looks very promising, however, if you want to use it you need to pay for it and it has a small community in Github.

Contentful

Contentful is an open-source headless CMS that used Advanced caching techniques that are tightly integrated with external CDNs to deliver API payloads efficiently. This CMS support microservices and have a good learning centre. However, no database backup and monitoring feature is mentioned in this CMS.

Strapi

Strapi is a headless CMS that is very popular on Github and have extensive documentation. It also supports i18n out-of-the-box. This headless CMS also seems really high customizable. However, this headless CMS only support self-hosting.

Netlify

Netlify is one of a headless CMS and also built as a Single Page React-App. This CMS is claimed to be fast, secure, and scalable in terms of a static site. Netlify CMS is editor friendly, have an intuitive workflow, and has instant access to GitHub account. This CMS also can be integrated with netlify.com which will add a lot more features. However, the documentation seems not good enough and there are some useful features that are still in beta.

Cockpit

Cockpit is an open-source headless CMS which using PHP and all of the features seems to be completely free. This CMS also has a simple installation step and is easy to use. However, the documentation is still really small and there is not much information there.

So, that's all CMS that We have researched on the web. You can go to each CMS to try it out because each CMS have their own strength and weaknesses.

Pre-requisites

Make sure your MacOS to be version 10.14 or higher, It's recommended that you upgrade the MacOS to the latest one. Make sure you have at least 4 GB of RAM. If all set, you can directly download the Docker Desktop for Mac here.

Install and Run Docker Desktop

Drag and drop the Docker icon to Applications folder after you double clicked the downloaded Docker.dmg file

To start the Docker, double click the Docker.app file inside Applications folder.

Check the docker menu in the top status bar to check if Docker application is up and running.

Congratulation now you have already successfully installed Docker application inside your MacOS.

Deploy FastAPI inside Docker

First of all install the FastApi and Uvicorn using:

pip install fastapi
pip install uvicorn[standard]

After that, create your FastAPI project directory with this structure:

Inside the app directory create main.py file and insert these line of codes:

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
async def root():
    return {"message": "Hello World"}

Next, run the live server using Uvicorn:

The result will be like this:

INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)

If you open the browser and go to http://127.0.0.1:8000/ it should appear like this:

If you go to http://127.0.0.1:8000/docs/ it will show Swagger UI for your API:

Congratulations! Now you have successfully installed FastAPI inside your machine. Now we proceed to deploy the FastAPI to the Docker app.

Deploy FastAPI to Docker Application

First of all, create Dockerfile inside your project directory and put these line of codes:

FROM python:3.7

RUN pip install fastapi uvicorn

EXPOSE 80

COPY ./app /app

CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "80"]

Your project structure now should be like this:

.
├── app
│   └── main.py
└── Dockerfile

To run the Docker directly you can use these commands:

docker build -t myimage .
docker run -d --name mycontainer -p 80:80 myimage

If you want to run the Docker via Docker Compose you can create docker-compose.yml file inside project root directory and put:

version: "3.8"

services:
  fastapi:
    build: "."
    ports: "8080:80"

After that run:

docker-compose up --build

Congratulations! Now you have succesfully deploy FastAPI inside Docker application. If you want to learn how to develop front end application using React JS you can follow this tutorial.

Windows 10, version 1903 or higher.

Setting Up WSL

There are two ways that we can use to enable WSL.

The GUI Method

Open Control Panel.

Click on Programs

Then click on "Turn Windows features on or off".

Alternatively, the Windows Features window can be searched and launched through the start menu search.

Check the box for Virtual Machine Platform and Windows Subsystem for Linux.

Click on Ok to apply the changes.

The CLI Method

Open PowerShell as Administrator and input the following commands to enable Windows Subsystem for Linux and Virtual Machine Platform:

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

Source: https://docs.microsoft.com/en-us/windows/wsl/install-win10#step-1---enable-the-windows-subsystem-for-linux

Enable WSL2

Download the WSL2 Kernel Update here: https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi. Double-click to run after download.

Then in PowerShell, input the following command to set the default WSL version to 2: wsl --set-default-version 2

Installing a WSL Distribution

The easiest way to install a WSL distribution is by going to Microsoft Store and find your preferred Linux distribution. For this example, we use Ubuntu 20.04:

Once you have found your preferred distribution, click on Install. And once the installation is done, launch PowerShell and execute the wsl command. It should now present you with the setup screen where you set up your Ubuntu's user name and password.

Extra: Manually install a WSL distro on a different drive

There is a way to install a WSL distribution on hard drives other than the default C: drive. To do this, manually download a distribution from here: https://docs.microsoft.com/en-us/windows/wsl/install-manual

Afterwards, use archive extracting programs like 7z and extract it to a directory of your preference, for example, D:\WSL\Ubuntu-20.04. Then launch Command Prompt or PowerShell in this directory and execute ubuntu2004.exe if using Ubuntu 20.04 like so:

.\ubuntu2004.exe

Follow the user name and password instructions.

Nice! Now we have Ubuntu 20.04 installed on WSL2. Do not forget to set your default distribution for the purposes of the next sections.

wsl --set-default Ubuntu-20.04

Installing Docker

Simply download Docker for Windows installer, then run it and follow the instructions. Download it here: https://desktop.docker.com/win/stable/amd64/Docker Desktop Installer.exe

This will automatically install the executables in the default WSL distribution you have set up previously.

Limiting Maximum RAM Usage

Without limitation, WSL2 can take up a lot of RAM. In the case of 32GB RAM machines, it could take up to 20GB+. To limit the maximum RAM usage, go to %USERPROFILE%, which should resolve to your user's C:\Users folder (something like C:\Users\Ben) and create a .wslconfig file. The following .wslconfig example limits WSL usage to 16GB:

[wsl2]
# kernel=<path>              # An absolute Windows path to a custom Linux kernel.
memory=16GB                  # How much memory to assign to the WSL2 VM.
# processors=<number>        # How many processors to assign to the WSL2 VM.
# swap=<size>                # How much swap space to add to the WSL2 VM. 0 for no swap file.
# swapFile=<path>            # An absolute Windows path to the swap vhd.
# localhostForwarding=<bool> # Boolean specifying if ports bound to wildcard or localhost in the WSL2 VM should be connectable from the host via localhost:port (default true).

# <path> entries must be absolute Windows paths with escaped backslashes, for example C:\\Users\\Ben\\kernel
# <size> entries must be size followed by unit, for example 8GB or 512MB

The memory assignment can be changed up to preference, for example 8GB.

See: https://docs.microsoft.com/en-us/windows/wsl/release-notes#build-18945

Development Usage Example

Here we try to create a simple and minimal FastAPI project and run it with docker-compose.

All of the commands below are executed under Ubuntu WSL machine and so they require WSL shell. It can be opened just by pressing "Win + R" button and input wsl and then press Enter or click on "Ok", or just by executing wsl command under Command Prompt or PowerShell. Though, setting up a Windows Terminal app is more recommended: https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701

System Dependencies Setup

Before starting development, let's install the system dependencies first. For this example, we use Python 3.

sudo apt update && sudo apt upgrade -y
sudo apt install build-essential python3-dev python3-pip

Using Visual Studio Code (VSCode) in WSL

Download VSCode: https://code.visualstudio.com/#alt-downloads
Install the "Remote - WSL" Extension: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl

Creating the Project

Create a directory for the project and (optionally) launch VSCode

cd ~
mkdir -p documents/docker-fastapi/
cd documents/docker-fastapi/
code .

To install FastAPI and Uvicorn as the server:

pip install fastapi
pip install uvicorn[standard]

Reference: https://fastapi.tiangolo.com/tutorial/

Then, create main.py under app directory (mkdir app && cd app) in the project directory with the following content:

from fastapi import FastAPI

app = FastAPI()


@app.get("/")
async def root():
    return {"message": "Hello World"}

You should now have a directory structure like the following:

.
└── app
    └── main.py

Then to run the API (with auto-reload):

uvicorn main:app --reload

When Uvicorn has completed loading, you should see the following output:

INFO:     Uvicorn running on http://127.0.0.1:8000 (Press CTRL+C to quit)

This means the API server is running and is accessible through the browser using the URL in the output (http://127.0.0.1:8000). Give it a try before proceeding to Dockerize this app!

Reference: https://fastapi.tiangolo.com/tutorial/first-steps/

To run the app in Docker, create a Dockerfile in the project root with the following content:

FROM python:3.7

RUN pip install fastapi uvicorn

EXPOSE 80

COPY ./app /app

CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "80"]

You should now have a directory structure like the following:

.
├── app
│   └── main.py
└── Dockerfile

To run without Docker Compose, simply run the following commands:

docker build -t fastapi-image .
docker run -d --name fastapi-container -p 8000:80 fastapi-image

Once the container is running, it should also be accessible at http://127.0.0.1:8000.

Reference: https://fastapi.tiangolo.com/deployment/docker/

Finally, to run with docker-compose, simply create a docker-compose.yml file in the project root with the following contents:

version: "3.8"

services:
  fastapi:
    build: "."
    ports: "8080:80"

Depending on actual project requirements, you might need to add database services like MySQL. Take a look at Docker Compose information here for more: https://docs.docker.com/compose/

Then, simply run:

docker-compose up --build

Once the build process is done and the service(s) goes up, it should be accessible at http://127.0.0.1:8080.

To clean up:

docker-compose down --rmi local

Install and Configure Capacitor

First of all, prepare your React application which you want to integrate with Capacitor JS. If you have not created one, you can see how to create React Typescript with Tailwind CSS in this tutorial.

If you already have a React application you can directly go to your React app project directory and install Capacitor JS using this command:

After the installation is finished, continue with initializing the Capacitor configs.

Build and Prepare Native Platforms

After finished with all the Capacitor configurations, build the React application using "npm run build" command first and then install the iOS and Android plugins for Capacitor JS using this command:

After finished installed the iOS and Android plugin for Capacitor JS, add the platform for iOS and Android in Capacitor using these commands:

After adding the native platforms, we can open and run the native platforms using these commands:

Congratulations! You have successfully adding capacitor to your React application. For more info, you can learn more here. If you want to integrate your React application with Firebase Cloud Functions you can check this tutorial.

Preparations

First of all you have to create Firebase project in Firebase Console, for more informations about Firebase project you can learn more here. In this tutorial I will be using Node.js environment. You can check the supported Node.js version for Firebase here.

Now, I assume that you already create the Firebase project and have Node.js environment installed. Next step is you need to install the firebase CLI using:

Initialize local Firebase Project

After that, login into Firebase.

Next, go to your local Firebase Project directory and initialize the firestore and cloud functions.

Creating and Emulating the Cloud Functions

After that, Import required modules and then initialize the app inside your index.ts file.

Now, you can create your public Firebase cloud functions using functions.https.onCall() and functions.https.onRequest() callback functions that can be used over https call inside your index.ts file.

Next, start the Firebase cloud function emulator in local environment using:

Check the output of this command to get the URL format to call the cloud functions it will be looks like this:

http://localhost:5001/MY_PROJECT_ID/us-central1/

The port may be vary according to your local machine environment.

Deploying Firebase Cloud Functions

Deploying Firebase cloud functions to productions is a quite simple process you can just directly run this command:

Congratulation! You have successfully creating and deploying your Firebase cloud functions, now you can access the cloud functions that you have created to your React application. If you don't have any React application yet you can follow this tutorial to create a React application using typescript and tailwind css.

React and Typescript Setup

First of all, make sure that Node JS is already installed. If not you can check the installation here. In this tutorial, I will be using typescript for the React application.

The simplest and fastest way to set up React is by using facebook's Create React App (CRA) site generator.

If you already have an existing React application and you want to add typescript inside you can use this command:

After the installation, the package.json file should show React and Typescript packages. Change the .js files to .tsx file to use the Typescript features.

Tailwind Setup

First, install Tailwind and all the dependencies using:

After Tailwind dependencies are installed successfully, we will configure the tailwind using CRACO by running:

After that, update your package.json instead of using "react-scripts", change that into "craco" except the "eject" part:

Next, create a craco.config.js file inside your root project and follow the content below:

If you want to explore further on PostCSS plugins you can check it here.

After that, generate the tailwind.config.js file:

To avoid unused styles in production builds you can add this to tailwind.config.js inside "purge" section:

Update the index.css that was created by default using Create React App command:

Ensure you have imported the index.css inside your index.tsx file.

Congratulations! You have finished the tutorial to create react typescript using Tailwind CSS! After this, you can run and test your React Typescript application using the npm run start command.

What is React? React is a JavaScript library for building user interfaces and one of the most popular JavaScript frameworks for creating front-end applications right now (based on here). If you want to learn the framework that will give you the best odds of getting a job in 2021, your best bet is still React and has been since 2017. Because of its popularity, we decided to make a list of the best React tools to use, so here is our version of React Tools for Developers and Researchers in 2021.

Package Manager (NPM / Homebrew)

Npm stands for the Node Package Manager. It is the package manager for Node.js. Npm was originally created in 2009 as an open-source project to enable JavaScript developers to share packaged modules of code. And now, npm is a tool to manage your application repository by using a simple command-line install, update, and uninstall has become an easy task, and you can just focus on using the library instead.

Open-source developers from all over the globe use npm to share and borrow packages since it is the largest software registry in the world. Many business corporations use npm to organize private development as well. So for you, open-source developers, who would like to build the user interface using React, it is a good idea to try on npm.

While Homebrew is a free and open-source software package management system that simplifies the installation of software on Apple's operating system macOS as well as Linux. In other words, Homebrew helps you to install the stuff you need that Apple or Linux systems didn't. Many developers have recommended Homebrew since it is easy to use as well as integrating into the command-line interface.

If you are using Windows you can install npm which comes with Node.js. Or if you are using a Mac (or any Linux-based OS), you should install homebrew.

Create React App

Starting a React project sometimes can be time-consuming. You have to spend time establishing the right build tools to set up a local environment, unit testing, and production build. But worry no more because the Create React App is the right tool to do all those things.

Create React App is a tool that provides a massive head start when building React apps. It saves you from time-consuming setup and configuration. You just run a single command and the Create React App prepares the tools you need to get started on your React project. It provides a modern, configurable build setup. CRA is ready to use boilerplate open source projects to get a fast start when using React; default configurations will be set automatically to get React running for your project needs.

The Create React App is a great environment for learning React and is a great way to get started with creating a new one-page application in React. So why don't you give it a try?

Eslint & Prettier

The idea of ESLint is for detecting and fixing code errors while Prettier is a tool for formatting your code but they'll make your development process easier when combined. ESLint scans your JavaScript file for common syntax and style errors automatically. Prettier performs scanning for style issues on your file then reformats your code automatically to assure consistent rules are followed.

ESLint is actually a linter for JavaScript code where it analyzes code for errors. ESLint also comes with a predefined best-practice configuration that is easy to set up. You can add other rules as you want to suit your needs.

When you're writing code and don't want to worry about the code formatting, Prettier will take care of it for you. It creates an abstract syntax and uses it to write new formatted code according to a set of rules. Developers will never have to go through inconsistent codebases looking for mistakes or to think about style while writing code.

Just make sure when using ESLint with Prettier, they do not conflict with each other's formatting code. You can check indepth.dev guide on ESLint and Prettier to learn more.

React Developer Tools

React Developer Tools is a Chrome DevTools extension for the open-source React JavaScript library. It allows you to view all of the React component hierarchies and the properties of a page in the Chrome Developer Tools.

The root of React components that are rendered on the page can be shown on the Components tab, as well as the subcomponents. You can explore and edit the current state and props in the panel on the right by selecting one of the components in the tree. And when you switch over to the React tab after inspecting a React element on the page using the regular Elements tab, the element will automatically be selected in the React tree.

React DevTools is also available for Firefox users.

React Proto

React Proto is a tool for prototyping React design, with easier design visualization to define the components or properties while creating the user interface. The main idea of this tool was to boil down the initial process of mocking up and developing client-side applications.

So whenever you need to grasp the design while also foreseeing all possible components needed, you can just quickly create, drag, and resize components to create a visual representation of your application.

Download React Proto for Windows, macOS, Linux.

Bit

It becomes so monotonous and time-consuming to rewrite the same logic for a similar component with a previous project every time we start a new project. So whenever you're looking for a way to have a high module and reusable codebase for a team project, Bit is everything you need from local development to cross-project integrations.

Bit allows you to share and sync components between different projects and applications in order to create reusable components in a scalable and collaborative way.

Belle

Belle allows you to browse a set of React components such as Toggle, ComboBox, Rating, TextInput, Button, Card, Select, etc. So that you do not need to create the components from scratch, instead you can just import and use them. All of the components are highly optimized to work both on mobile and desktop devices. The base styles of the components are highly customizable to let you configure and modify every one of them individually.

Belle provides configurable React components with great UX.

Gatsby

When you talk about building websites, Gatsby is what you need to build a website with React in a simple way. It is an open-source static website generator for React that manages the page creation on the server-side and HTML static server for the client browser.

Created in May 2015 by Kyle Mathews, the main idea of Gatsby is to build a website with React in a simple way. Gatsby is optimized to build static sites that are progressive web apps to follow the latest web standards with speed and security. By using Gatsby, the loading web performance is greatly improved because of static HTML that serves the client.

React Testing Library

React Testing Library allows developers to test the React DOM with best testing practices. It enables developers to modify and refactor the code in less time-consuming ways by letting the element or attribute of the React DOM be tested in React Testing Library.

The React Testing Library is a simple and complete solution for testing React components. React DOM testing utilities encourage good test practices, provide light utility functions on top of react-dom and react-dom/test-utils. But keep in mind that the React Testing Library should be used along with Jest.

Reactide

Reactide is the first dedicated IDE for React web development. It indicates the browser and the source code under one IDE application and when hot reloading is enabled, the traversing between IDE, browser, and server is not required that changes user behaviour when developing React.

It is a cross-platform desktop application that brings an integrated suite of development tools to streamline React development. Reactide offers a simulator, made for live reloading and quick React component prototyping.

Download Reactide for Windows, macOS, Debian & Ubuntu.

Next.Js

It is awesome to work on a modern JavaScript application powered by React until some problems related to content rendering occur. It takes longer for the page to load because all the JavaScript must load first before the content loads and your application needs to determine what to show on the page. Server rendering which is also called static pre-rendering is the solution for those problems. Next.js is the answer to serve the job for those problems.

What is Next.js? Next.js is an open-source React front-end development web framework that enables the React page to be rendered on the server-side (SSR) and generates static websites for React-based web applications. It is a production-ready framework that gives a quick static and dynamic JAMstack website creation and is often used by many big companies.

If you want to learn more about Next.js just click here!

Storybook

In general, Storybook is an open-source tool for UI components and page isolation development. It makes building, documenting, and UI testing easier.

Storybook helps to isolate the development of a component so won't be bothered by other unrelated components or the main app. This function helps you to develop UI components rapidly without concern about the app.

While documenting all the components for reuse, Storybook also helps you to automatically test your components visually to prevent bugs. There are some tools integrated with Storybook, like React, Vue.js, React Native, Percy, Applitools.

Want to learn more about Storybook? Just click here!

Conclusion

So here is our list of 12 Essential React Tools for Developers in 2021. As you already saw, each tool has its advantages. It roots down to every developer's needs and preferences to utilize whichever tools to use because there are still alternative tools for each solution in case of development.

Is your React Developer Tool not on the list above? Drop your comment below to discuss!