vercel + next — things i learned on the way

If you’re hoping for a Vercel/Next.js bash that’s the wrong post for it. I’m pretty much ❤in it. Coming from more monolithic architecture I faced a few problems though from which some I didn’t expect. In the post I tried to collect all the issues I faced over the last few months and the solutions I used to work around them.

Database

MongoDb connection delay

In a monolithic app db connection time is neglect able as you’ll never notice it. It happens once t startup and then you’ll just reuse the pool. On serverless connecting to MongoDb for me was relatively slow(>1s) and a re-connection might happen on every call. …

Image for post
Image for post

When using CIs for things like testing/linting/building you usually use either a Jenkins server or one of the various CIaaS providers. Both are reasonable choices, Jenkins gives you the opportunity to do whatever you want. Services like travis-ci (i’m not affiliated, replace travis with whatever CI you usually use) give you the possibility to focus on product development and not care about the ci setup at all. The thing that bugs me about CI service providers is that they are usually pretty expensive and require you to use an even more expensive plan when doing slightly advanced stuff. So if you want to end up cheap you might invest some time to roll your own jenkins and utilize e.g. preemptive gce instances to save some money. There’s a new competitor joining the party: google cloud-build. …

Things i wished i knew before

I recently had the pleasure to work with Intercom the first time in my life — and eventually decided to not use it in the end. That said, intercom is a great piece of software. It has a superior support team, fair pricing, a good documentation and is super easy to integrate — it just didn’t fit our requirements, but may fit yours. I started this article because I had a medium tab opened when I started integrating and basically dropped noted here whenever i faced a problem. Now there are enough of them to write an article about.

Integrating Intercom into a meteor/node app

I couldn’t find any up to date packages. There is meteor-intercom but it uses underscore and sessions. A lot of people integrate Intercom into their apps so it can not be that complicated, can it? …

Image for post
Image for post

Or: do no harm, write maintainable code

I currently have the glorious task at work to port a legacy react/jquery/materializecss codebase to react/material-ui.

It’s a pain, and quite a big one. When I started this a few weeks ago I didn’t really realize what I was getting into — now I’m more aware then I was before, but I still feel like it will take a while to get this finished.
A few days ago, after work, a coworker asked me why I was creating a
ButtonComponent, which was the inspiration for this story.

Modularization

In university, the lectures targeting code quality all promoted to practice modularization wherever possible. I could see the benefits of this approach, but I’ve never been fully aware of what happens if you start finding excuses for ignoring this basic coding practice. Writing small self contained components/functions has big advantages over writing monolithic `do it all` ones which I want to highlight in the following article. …

infinite scroll/ load more

I’m currently working on my first pure graphql/apollo + react application and had the glorious task to implement lists which initially loads some items and then load more data when reaching the end of the page or pressing a button. The Apollo docs for these kind of things are really good (like for almost everything I had to do with Apollo yet, they provide useful information an full examples ❤), but i had some problems at first implementing it properly, so I hope to save you some headache with it. The focus here is on the Apollo part.

Introduction

Please take a look at the docs as I won’t explain the different approaches, but I feel like it’s good to know the differences. We’re going for the cursor approach as we don’t want page numbers to click trough. Instead of using infinite-scroll we’re using a load-more button as we currently have a footer and we want it to be reachable (not automatically scrolling away). …

Image for post
Image for post

Episode 4 | protected routes and hosting

In process of writing the next.js meets firebase articles I got a lot of feedback and a few questions i want to answer in this article.

  1. how to implement protected pages
  2. how to host next.js applications outside of now

Protected pages

The concept of protected pages is easy: We do a client side redirect whenever a user tries to access a page which requires a valid authentication state. …

Image for post
Image for post
Lünersee

Episode 3 | validation rules and reading/writing data

Introduction

In the last two episodes we created a basic next.js application and authenticated our users via firebase oauth providers. It’s been pretty boring to far as we don’t even have any data in our firebase yet :’( So let’s change this!

Firebase is all client-side — but as we cannot trust users, we must define validation rules on the server to prevent malicious usage. The validation rules are somehow hard to read and write but firebase provides a tool to write rules in a better understandable language and compile it down to a big json file again. It’s called bolt and in beta like…forever. …

Image for post
Image for post

Episode 2 | Firebase auth

In the previous article we created a simple app which automatically shows a random welcome message. We only used mobx and next.js and did not yet touch on firebase.

In this article we’ll add authentication via firebases’ google oauth provider and track the user state in a mobx store. It’s pretty similar for all the other solutions offered by firebase (facebook, github, twitter, custom)— feel free to ask if you have any problems.

Creating the auth store

Enable auth providers in firebase

Authentication with firebase is extremely simple: by enabling your desired auth providers in the firebase console, you’re basically ready to go.

Image for post
Image for post

Episode 1 | next.js SSR fundamentals

Just recently I wrote about not using meteor any more as a “one size fits all” solution — not because meteor is bad — but because there’s other cool stuff which will no doubt convince you by giving it a chance. In this short tutorial series we are going to use the next.js shiny thing in combination with firebase as the database layer and mobx as state manager.

This is not a next.js, firebase promo tour :) I will certainly find things which are super annoying and I’ll also report them (until now next.js …

my journey of “leading” young developers

First of huge props to the students, this story is about. They managed to go from zero-web-development experience to a working Realtime-React app. If anything in this story sounds like it’s offending —I i’m sorry, because actually I’m pretty proud that you guys managed to survive this hell with me. Starting from zero and being exposed to the uncertainty of a young startup the same time is definitely a bad starting point.

Background

Technical University Darmstadt forces computer science students to do a non-payed practical project for a real company before they are technically allowed to write their bachelor thesis. As I’m currently working at a small startup in the need of developers and I had to do this internship myself two years ago I thought it would actually be fun to lead a small team of developers (4 students in their 5th semester) to do a little side project for us — so we applied and got accepted. …

About

sakulstra

doing node.js stuff

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store