DEV Community: Kyle Jung

How to build frontend on Flask view directly

Kyle Jung — Thu, 11 Aug 2022 21:34:00 +0000

In the past, when I first learned Flask to create an Instagram clone, I used Flask to purely create the backend. That meaning I created a bunch of api endpoints on Flask so that I could fetch them from my frontend, at the time, React.
And yes, Flask is mainly used for backend development. However, in Flask, we usually create templates that are html files. If my application does not require a huge frontend and if I want to build my frontend directly on the view, wouldn't that be great?

For those who are not familiar with Flask, Flask is a micro web framework written in Python. Flask is popular over other python-based web libraries/frameworks since it is very light and the users can create a webapp with just a single page of code. I am not getting into what Flask is in this article--you can find great blog posts online to see how powerful Flask is.

So, How?

Setup
So, this is how your simple Flask app would look like.

> Folder (Flask App)
 > templates 
  > index.html
 > app.py

The templates folder includes the index.html file, which is view for the Flask app. This is equivalent to the view folder in Express. Technically, you're done setting up, since you can just write a bunch of html in your index.html file. However, we all know that pure html is not the way to go.
If you want to add JavaScript in your index.html, then create a folder called static in your root directory.

Your final Flask app should look like this.

> Folder (Flask App)
 > static
 > templates 
  > index.html
 > app.py

Add JavaScript
Now, we are going to add some JavaScript files inside the static folder. Let's first start by adding one JavaScript file called main.js as such.

> Folder (Flask App)
 > static
  > main.js
 > templates 
  > index.html
 > app.py

Now, open your index.html file. I will assume that you have only the bare skeleton html.

<!DOCTYPE html>
<html>
<head>
    <title>Flask App!</title>
</head>

<body>
</body>
</html>

You would normally add a JavaScript file by using the <script> tags as such.

<script type='text/javascript' src='main.js'></script>

In your Flask app, that is not possible. However, there is a very simple fix. Assuming that you have your main.js in your static folder, embed the following code in your src attribute of the <script> tag.

src={{ url_for('static', filename='main.js') }}

Your final index.html will look like this.

<!DOCTYPE html>
<html>
<head>
    <title>Flask App!</title>
</head>

<body>

...

<script type='text/javascript' src={{ url_for('static', filename='main.js') }}></script>
</body>
</html>

Great! But how about multiple JavaScript files?
That's when bundling comes into play.
JavaScript Bundling
In the user's perspective, having multiple JavaScript files for different functionalities is preferred. But from the DOM's perspective, it doesn't care. Rather, it is preferred to render one JavaScript file over multiple JavaScript files. Thus, we will bundle all of our JavaScript files together and pass in one main.js file to our index.html.

First, install flask_assets on your command line.

pip install flask_assets

Next, in your Flask app, in this case app.py, import Bundle and Environment.

from flask_assets import Bundle, Environment

We will assume that we have the following folder structure. We have three JavaScript files that we want to bundle up.

> Folder (Flask App)
 > static
  > file1.js
  > file2.js
  > file3.js
 > templates 
  > index.html
 > app.py

Now, create a bundle of our JavaScript files.

# your imports
...

app = Flask(__name__)

files = Bundle('file1.js', 'file2.js', 'file3.js', output = 'gen/main.js')

Next, create an assets variable that creates an environment of our app and register it.

...

files = Bundle('file1.js', 'file2.js', 'file3.js', output = 'gen/main.js')
assets = Environment(app)
assets.register('main_js', js)

That's it for our app.py.

Navigate to your `index.html' and add the following code.

And that's it!
You would have noticed that you have a new directory called gen that has your JavaScript bundle or main.js for us.
Bundling CSS is analogous as well, so if you need to pass in multiple css files to your index.html, follow the steps above again.

Hope this helps, and happy webdev!

React map libraries overview + react-leaflet complete installation debugging guide

Kyle Jung — Thu, 28 Jul 2022 20:44:00 +0000

While I was looking for some good map libraries for React, react-leaflet caught my eye.
react-leaflet is a react library that is a complete rewrite of leaflet, which is an open-source JavaScript library for mobile-friendly interactive maps.

React Map Libraries

Besides react-leaflet, I had a few other options. Why did I not opt to use these libraries?

React Simple Maps
Great library in general. It is very easy to use and has decent documentation with some examples as well. Also as the name goes, it is very lightweight. However, it did not suit my purpose of needing to display precise locations with markers. Yes, it is possible to do so by using React Simple Maps, but I would need to redesign the whole map template which was not worth putting in my effort and time while there are already existing libraries that have maps with great default templates.
React Mapbox GL
A decent library, but not recommended. The original library of Mapbox is well made with great examples, but the rewrite for React is not well maintained. It barely has any examples, and there are not that much resource online. The documentation is not adequate as well. Unless you're an advanced, skilled developer, not the best option.
React Google Maps
Seemed to be great. However, I haven't had the chance to really feel it out since activating the API key requires subscription. If you could afford the subscription, definitely go for it!

Why react-leaflet?

I wouldn't say react-leaflet is the most robust library compared to its competitors (i.e. react google maps). However, it has little of everything, and that was enough to serve my purpose.

Good map template. By template I mean the actual map design. I needed a map with precise street annotations with good color scheme. I would say it is subpar to Google Maps API or Mapbox GL when it comes to the actual design, but it did the job.
Good documentation with good examples. Honestly speaking, the documentation is not the best, but it was decent enough to get away with. The existing examples did lack explanation, but the code itself was pretty easy to understand even at first glance. Even though the quality of the documentation and examples were not paramount, since my second-most compelling option, react mapbox gl, was far behind when it came to examples, I had to choose react-leaflet.

Installation

Unfortunately, even with its pros, react-leaflet does not have the best documentation for beginners. Even from the installation and the map setup, there are a lot that are not mentioned in the documentation. So I thought I would provide a installation debugging guide for potential problems/glitches.

Installation
If you have the time, read through the installation page, but if not, just run these commands on the terminal. If you don't even have a react app, start a react app first.

npm install leaflet
******install react-leaflet after installing leaflet******
npm install react-leaflet

After installing these modules, import the basic components.

import { MapContainer, TileLayer, useMap } from 'react-leaflet'

Setup
Copy paste the following code in your react app to render a simple map with a marker.

<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  <Marker position={[51.505, -0.09]}>
    <Popup>
      A pretty CSS3 popup. <br /> Easily customizable.
    </Popup>
  </Marker>
</MapContainer>

If it worked fine for you, great!
But if you're running into any of these problems, read through the debugging guide down below.

Debugging Guide

Module Error
If you're getting an error like below, do not worry!

 ./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|   useEffect(function updatePathOptions() {
|     if (props.pathOptions !== optionsRef.current) {
>       const options = props.pathOptions ?? {};
|       element.instance.setStyle(options);
|       optionsRef.current = options;

Here's a solution.
Open your package.json and change

 "browserslist": {
   "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
},

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

Map Not Rendering Properly

Solution 1

Add the following line to your code.

import 'leaflet/dist/leaflet.css';

Not working? Solution 2 should work!

Solution 2

Navigate to your index.html.
In the <header>, add the following code.

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

Add the following code to App.css.

.leaflet-container {
  width: 100wh; 
  height: 100vh;
}

If anyone runs into any other problems in the installation step, I will be willing to help. Please drop down your problem in the comments section. Happy debugging!

React Router V6 Tips+Examples

Kyle Jung — Tue, 26 Jul 2022 23:42:00 +0000

While I was working on a personal project recently using React, I realized that I could not find much up-to-date information on one of the most common things that every website would need: routing.

Here is the official documentation of React Router, but I thought I might as well provide some real-life applicated examples of the React Router and some small, useful tips.

To start off, React Router is a library that allows you to add routes to your React App. A website usually has multiple pages. For instance, let's say you're building a personal website to show off your projects. The main page would have a short introduction of yourself with some nice, professional pictures. Then you might want a separate page to put down your portfolio of your projects and work experiences. You also might want to add a contact page so that people can reach out to you.

In HTML, you would normally create a navigation bar that contains all of the links to your different pages with an <a> tag with scripts for each page. That's cool too, but in React, there is a much simpler way of organizing your routes: using the React Router.

Installation

First, install the React Router library using the following command.

npm install react-router-dom

You can always confirm your dependencies in your package.json.
Your package.json should have react-router-dom as a dependency as such.

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",

Adding Routes

The next step is to add your Routes. There are multiple ways of structuring your routes. You could create a file for all of your routes, but since my application does not need a lot of routes, I opted to add my routes in my App.js.

Import BrowerRouter as the following.

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

If you have directly imported the above in your App.js as I did, wrap your app in <Router>. Then, wrap all of your Route in Routes. The following is how I did it.

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

Now you have two pages!

The exact prop in the <Route /> component serves to avoid confusion for the React Router. What does this mean?

Let's say you have two different routes as such without exact in neither of the routes.

<Route path="/about/1" element={<AboutMe />} />
<Route path="/about/2" element={<AboutYou />} />

This could potentially cause partial matching problems. For example, the URL /create/user/123 will match the routes /create or /create/user/. Therefore, to avoid any room for bugs, I would suggest that you include exact in most of your routes.

The path prop specifies your route. For example, / would be equivalent to http://localhost:3000/, and /about would be equivalent to http://localhost:3000/about.

The element prop determines what to display. For me, in my / route, I wanted to display my <Home /> component and my /about route my <About /> component.

What about nested routes?
For me, I had to have different links for my posts, so I thought the structure of /posts/idNumber would be suitable for my post routes.

<Route path="/posts" element={<Post />}>
  <Route path="/posts/:postId" element={<Post />} />
</Route>

Rather than using the self-closing tag, nest your children routes inside your parent tags.

Linking

So where does the actual linking happen?

Navigate to the file that you want the actual link in.
Import Link.
Create the link!

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

....

<Link to={`/posts/${id}`}>See More</Link>

The to prop is the route in this case. It serves the same purpose as ref of the <a> tag.

But what if you want to pass information to the link?

Simply create an object with the information that you want to pass to the link. Then pass the object through the state prop of <Link />
For me, I had to pass the props so this is how I did it.

const restaurantData = {
        id: id,
        name: name,
        location: location,
        zipCode: zipCode,
        coordinates: coordinates,
        phone: phone,
        price: price,
        rating: rating
}

...

<Link to={`/posts/${id}`} state={restaurantData}>See More</Link>

That's it! One tip I would give is that plan out your routes before actually implementing your webapp. Of course you always run into situations where you have to modify your original plan, but having a general structure of your website and lining our your routes beforehand always helps.

How to use Yelp-Fusion Library on React and Express (CORS Policy)

Kyle Jung — Mon, 25 Jul 2022 17:51:00 +0000

I was recently working on a personal project that involved displaying restaurants and YELP API was definitely one of the best options to choose from. Besides the official documentation, when you are trying to play around with API responses, I recommend that you refer to this post and test the endpoints with postman.

My project is not a big project so I tried to get away with not creating a server and just fetching the API only on the client side. To cut to the chase, it did not work out for mainly one reason. The CORS Policy.

One way to temporarily avoid the CORS policy and fetching on the client side was to use heroku anywhere, but this was not a stable way to fetch the api for the following reasons.

Not having a server is not stable. Even though the backend of my project did not require a database nor any user information, not having a server could end up being a mere frontend template.
Everything would have worked out even though not having a server is not preferred if heroku anywhere was supported as it was, but the heroku team decided to limit the usage of heroku anywhere for various reasons. This link provides a comprehensive analysis to why the heroku dev team decided to limit the usage of the heroku anywhere. Thus, the only way to get around the CORS policy on the frontend side was using heroku anywhere for my project, and if they only grant me access for a limited amount of time, my webpage will basically be useless after a certain amount of time. For further reference, please take a look at this github discussion.
Last but not least, why not build a server if it is not complicated? All I had to do was to create an API endpoint for my client, and this endpoint simply fetches business from the YELP API business endpoint.

The frameworks I have chosen for my project were React for the client side, and Express for the server side. Simple as that.

I started out by creating a simple Express app.

const express = require('express')
const app = express()
const port = 3001
const cors = require('cors');
const yelp = require('yelp-fusion');
const apiKey = 'YOUR-API-KEY';
const client = yelp.client(apiKey);

Just for clarification, I am using the yelp-fusion library.
To avoid the CORS policy, I installed the cors library.
This is my package.json file.

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "devStart": "nodemon app.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "cors": "^2.8.5",
        "express": "^4.18.1",
        "request": "^2.88.2",
        "yelp-fusion": "^3.0.0"
    },
    "devDependencies": {
        "nodemon": "^2.0.19"
    }
}

Now to use the cors library, all you have to do is call the app.use() function on your app.

app.use(cors());

Afterwards, just create your API endpoint using app.get(). I did not need any views so I decided to send() my res.

app.get('/api', (req, res) => {
    client.search({
        location: 'PUT-ANY-LOCATION',
        // offset: '0',
        // limit: '50'
    }).then(response => {
        console.log(JSON.stringify(response.jsonBody));
        res.send(response.jsonBody.businesses);
    }).catch(e => {
        console.log(e);
    });
})

This code snippet should now send your desired data to the server.
On the frontend, I fetched from my API endpoint but had to parse the data as such.

const fetchData = () => {
        fetch('YOUR-API-ENDPOINT')
        .then(response => response.json())
        .then(data => JSON.stringify(data))
        .then(stringifiedData => JSON.parse(stringifiedData))
        .then(parsedData => {
            setRestaurant(parsedData);
            setRestaurantName(parsedData[0].name)
        })
        .catch((error) => {
            console.log(error);
        });
    }

This is it! Since I'm relatively new to web development, I struggled to figure out a way to get around the CORS policy, and this was one simple way to do so. I hope this article helps who are getting into webdev and are struggling with any pertinent issues.

Any other suggestions would be greatly appreciated as well.

Finding Bounding Box using Mapbox GL on React Native

Kyle Jung — Sat, 16 Jul 2022 20:57:03 +0000

Recently at work, I have been using Maps SDK for React Native to implement a map feature for our app.
My task was mainly to get the bounding box to determine the pins to display on the screen since there would be performance issues if I load all the pins even outside of the viewport. I have struggled and wrapped my head around this task for a few days and I hope others have a better time figuring out this issue of the bounding box not rendering at all due to promise issues. This is also a Relevant Issue.

Maps SDK for React Native is based on Mapbox GL JS. Here is the documentation for Mapbox Maps SDK for React Native which is a community-maintained React Native library that provides reusable JS components for integrating Mapbox maps into iOS and Android apps. Since it is just maintained by volunteers and is constantly updating, some examples of the props or the functions of the existing components were not clear enough.

The function I was trying to use was getVisibleBounds() of the MapView component. getVisibleBounds() returns the coordinate bounds(ne, sw) visible in the users’s viewport.
This is the example usage in the documentation:
const visibleBounds = await this._map.getVisibleBounds();
I have rendered my MapPage as a functional component, which did not allow me to make use of this._map.

My initial attempt was to create an async function that would return the bounding box as such:

   const renderBox = async () => {
      try {
        const visibleBounds = await MapboxGl.MapView.getVisibleBounds();
      } catch(e) {
        return e
      }
        return visibleBounds
    }

However, this function threw an error message like this: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). This turned out to be a promise issue, and the following is a way to get around it.

I first created a region state that has an initial state of a location like this: const [region, setRegion] = useState(location). location is an array that represents a coordinate as such [longitude, latitude].

By making use of the useEffect hook, I logged all the properties of the region in the user's viewport as such.
useEffect(() => console.log(region), [region])
The following was the log.

[Sat Jul 16 2022 15:40:42.298]  LOG      {"geometry": {"coordinates": [-87.58876641738603, 42.53691705896288], "type": "Point"}, "properties": {"animated": false, "heading": -0, "isUserInteraction": true, "pitch": 0, "visibleBounds": [[Array], [Array]], "zoomLevel": 4}, "type": "feature" }

So I inspected the properties property of this object by logging region.properties and got the following log.

[Sat Jul 16 2022 15:40:58.570]  LOG      {"animated": false, "heading": -0, "isUserInteraction": true, "pitch": 0, "visibleBounds": [[-78.56114431259272, 51.56343338258], [-96.64150070383894, 32.005443763933826]], "zoomLevel": 4}

Thus, by getting region.properties.visibleBounds, I was able to get the two coordinates of the user's viewport [[ne],[sw]] in every region change.

I hope this article helps others who have been running into similar issues. If there is a better fix by using the getVisibleBounds() function directly, it would also be greatly appreciated!