How to fix “Refused to connect to xxx because it violates the following Content Security Policy directive” on Heroku I’ve deployed a MERN stack app to Heroku: Mongo DB, Express.js, React.js, Node.js. The app uses Google Fonts and Stripe Checkout. I’ve built the React app via Create React App. My last deploy went wonkers. The app didn’t load any JavaScript because of Content-Security-Policy failures. In this post I’ll show you how to fix those errors and how to successfully re-deploy your MERN app to Heroku.

Here are some links for this weekend. I hope you’ll enjoy them! Full Stack Serverless - Building a Real-time Chat App with GraphQL, CDK, AppSync, and React: a concise tutorial by Nader Dabit Build A Confirmation Modal in React with State Machines: learn more about state machines with Dave Ceddia Building Microservices with Deno, Reno, and PostgreSQL: by James Wright Show your latest dev.to posts automatically on your GitHub profile readme: a GitHub action that automatically fetches blog posts from dev.

Here are some resources for you: Testing React Apps: a guide for testing React applications with the Jest framework How to Code in Go: free ebook for learning Go How to get started with the 11ty (Eleventy) Blog Starter: a tutorial on using Eleventy and Sanity.io (a content management system) Your First Tailwind Website: a YouTube video on using TailWind CSS Node Auth Tutorial (JWT): a video series on authentication with Node.

Let’s say I have some static files I want to serve. For example, a React app or a Svelte app. Create Svelte App Let’s use the Svelte template: npx degit sveltejs/template svelte-app cd svelte-app npm install Now we need to create a production build: npm run build The command will create an optimized build in the public folder. Create Deno Server Install Deno. We’ll use the third-party module Abc to create a simple web server.

Here are some links: Code Tetris: JavaScript Tutorial for Beginners - learn the basics of JavaScript by coding a Tetris game from scratch Beginner’s Guide to React w/ Hooks (2020) Free Course - a 2-hour free YouTube video by popular instructor Colt Steele Go GraphQL: Introduction to building GraphQL API in Golang #1 - a multi-part tutorial series Design Resources For Developers - a curated list of free design and UI resources by Brad Traversy [AskJS] Has anyone used GraphQL for a large project and regretted it?

You’ve set up react-testing-library with Jest and react-router. You want to check that a component successfully redirects to another page. But how? Your React application comes with a protected route. If a user is not authenticated, the app should redirect the user to the login screen. You’ve managed to set up react-router-dom for your component. For example, here’s an excerpt from a UserStatus.jsx component that only an authenticated user should be able to access:

A few days ago, I updated a React application that uses Jest and Enzyme for testing. The new tests yielded errors like cannot find module ‘react-test-renderer’. Solution: Install react-test-renderer and enzyme-to-json as dev dependencies, and re-factor tests to use enzyme-to-json. npm i –save-dev react-test-renderer enzyme-to-json In your package.json file, add the serializer to your jest config: { "jest": { "snapshotSerializers": [ "enzyme-to-json/serializer" ] } } Example test file before update:

Today I’ve tried to update one of my Docker apps that uses React, Enzyme, and Jest. This lead me on a wild goose chase about react-test-renderer and best practices for Docker builds for Node.js. I’m still not sure where the problem is (Enzyme, maybe?). But I found three useful resources for Docker and Node.js: Docker and Node.js Best Practices Node + Docker Hello World, for Showing Good Defaults for Using Node.

Here are some sweet Black Friday Deals. Wes Bos Wes Bos creates high-quality courses about JavaScript and React. Now all of those courses are on sale. I bought the FullStack Advanced React & GraphQL course. Wes glosses over some concepts, but overall the quality is quite high, and the course was well worth the money. Find an overview over all courses at wesbos.com/courses. Talk Python The Mega-Bundle Deal is $50 off: $149 for the whole course catalog.

Here are some useful links for you: Colors And Fonts: a curated library for front-end developers and designers RxJS with React Hooks for state management: a beginner-friendly tutorial Barebones AWS Amplify + React + GraphQL App: get started quickly with this tutorial Building a payments system with React and Stripe: this tutorial shows you how to use Stripe in your React.js application React, Redux and JavaScript architecture: a post from 2018 that’s still helpful in understanding the basic concept of Reat.

Today I finished my first TypeScript experiment with React. Here are some thoughts after using ReasonReact first, and now TypeScript second. Setup Is Not Better Than ReasonReact I used Create React App to bootstrap the app. npx create-react-app <project-name> –typescript But then I had to setup ESLint and Prettier with TypeScript. ReasonML & BuckleScript: npm install -g bs-platform bsb -init <project-name> -theme react-hooks After that you’re done. It’s JavaScript

A few days ago I started preparing for my first tech talk. One of the common questions about ReasonML and ReasonReact is: Why not TypeScript? If you’re looking for a statically typed alternative for JavaScript, TypeScript seems like the obvious choice. I did a TypeScript workshop with FrontEnd Masters (online) a while ago, but I have to admit that I didn’t use TypeScript in practice. The last few days I started creating a simple TypeScript React app.

Raise your hand ✋, if you’ve seen this error in your React application: Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. The Problem This error often happens when you make an asynchronous request for data, but the component unmounts. For example, some logic in your app tells React to navigate away from the component.

I wrote about my Gatsby build time woes yesterday. Unfortunately, Netlify and Gatsby rebuild my site completely with every update. I use the gatsby-plugin-netlify-cache but build times are still high. While searching for ways to optimize my Netlify build I stumbled upon an issue on the Gatsby repository. The issue was merged into master and published to gatsby@2.17.0. Before: At the moment this hash changes if anything within ./src has changed between builds.

When I started the blog, I wanted a quick solution that simply works. That’s why I’m using a Gatsby Starter. I didn’t want to fiddle around with my blog too much. I chose Gatsby because it’s build with JavaScript and React.js. There are other candidates like Hugo, but I’m not familiar with the programming language it’s built with (Golang). Gatsby offers great features out of the box, and it was easy to deploy to Netlify.

I’m a big fan of Dave Ceddia’s blog for bite-sized overviews of React Hooks. For example, the articles A Simple Intro to React Hooks or How the useContext Hook Works are excellent short introductions to a complex topic. Yesterday, I found this gem: Thinking in React Hooks The article compares class-based React components to React hooks in a concise, and visually appealing way. I recommend checking out the article, even if you’re already familiar with React hooks.

A few weeks ago, I started learning ReasonML and ReasonReact. After doing a basic tutorial, I decided to tackle a form with validation. Building a simple form is not too hard, but it offers some interesting challenges. Some examples include getting user input and storing it locally, adding validation logic, and displaying the validation messages. Thus Reason Form was born. It takes inspiration from James King’s Using Custom React Hooks to Simplify Forms and a (deprecated) course about TDD with React, Flask, and Docker.

Learning the fundamentals of React was reasonably straightforward. React.js adds a lot of abstraction over JavaScript. But after you’ve got the basic building blocks down, you can get quite far. You can profit from the vast ecosystem, and the tons of available material (tutorials, StackOverflow, blog posts, etc.). But the more you work with state, props, you realize that there are a lot of pitfalls. You probably don’t need derived state, but sometimes you do.

State management in React.js and ReasonReact proves to be challenging. I have two pieces of state with useReducer, which I can’t get synchronized. Another problem is to conditionally setup useReducer depending on a prop. It probably results from a limitation of ReasonReact because Reason is stricter than JavaScript. It keeps being exciting to learn new things. Addendum: Kent C. Dodds wrote an excellent blog post about this topic today: Don’t Sync State.

I started the Microservices with Docker, Flask, and React a while ago. The course proved to be quite challenging, as I’m not familiar with Docker and Flask. It also uses advanced features of React. It was very fascinating for me to see how to develop a modern application with TDD, using Docker. While the React part is a bit outdated (it still uses deprecated methods like getDerivedState) - everything works and teaches you useful concepts.

The problem with ReasonReact is - it’s still React. (No kidding.) Today I tried fixing a bug in my ReasonReact form app. After some debugging, I realized that I have a problem with derived state which I receive from a custom hook. I now have to find out how to best synchronize my state. The good thing about ReasonReact is - it’s still React. Easily search for solutions, and utilize your previous React knowledge.

The problem: You have a bunch of JavaScript and .jsx files that you wish to parse with Prettier and ESLint. Why? You would like to make sure that ESLint analyzes your code for problematic patterns. You would like to have consistent formatting, and don’t worry about code style while writing the code. In this post, I’ll show you how to recursively fix and format all your JavaScript files with one command.

In the last few days, I’ve been working hard on learning ReasonReact by creating a small project. I’ve learned a lot, but it has been quite frustrating, too. At the moment, I’m trying to set up form validation logic. ReasonReact is giving me the stink eye. I recently bought the book Learn Type-Driven Development by Yawar Amin. He is a helpful member of the community and seems to know his stuff.

The last few days, I’ve spent a lot of time learning ReasonReact. It has been a frustratingexperience so far. Even simple tasks like creating forms prove to be quite hard for me. I’m quite familiar with React. Of course, I’m no expert by far. But I can use the new Hooks API, useReducer, useContext, etc. With ReasonReact, even easy tasks get more complicated. You have to learn how to use the type system with the ReasonReact API.

Let’s continue from yesterday’s post and build the skeleton for our application: a simple form with ReasonReact and hooks. Go to the src folder. The main App.re file should just render a Form component: [@react.component] let make = () => <Form />; The syntax looks unfamiliar. What is [@react.component]? It is a decorator attribute and tells ReasonReact that you’re writing a React component. Duh! The latest ReasonReact version uses React hooks under the hood.

I’m currently working on three different toy apps/learning projects: a Meetup clone in Svelte.js, an online store in React (with Redux, GraphlQL, etc.), and a simple todo with ReasonReact. It’s interesting to see how different framework tackle state management, UI rendering and the complexity of front-end development. So far, I’ve found Svelte the easiest to grasp. React has the best documentation and the best ecosystem. ReasonReact is functional (OCaml with React bindings under the hood) and typed.

In the last few days, I’ve taken a look at Reason. I’m interested in ReasonReact as an alternative to using JavaScript on the front-end. I enjoy the style and patterns of functional programming languages. While I can write vanilla JavaScript in a functional style, it’s very brittle. If you want to have immutable data structures, and better library support for a functional style, you have to shove in a ton of libraries like Immutable.

Last weekend I took a peek at Reason, a JavaScript-like-syntax for OCaml. Ocaml is a multi-paradigm language from 1996 which also supports a functional programming approach. It is also typed and compiled. Reason is an alternative syntax and toolchain for OCaml with better JavaScript interop and convenience features (via BuckleScript, the compiler). Reason also has pattern-matching. When I first learned Elixir, I was blown away by the power of pattern-matching. I’m happy to see that Reason offers it, too.

I’m trying to wrap my head around React’s render props and Svelte’s slots. Not much to write here, I still try to understand how it works. State Management in SPAs is quite complicated. There are a lot of solutions: passing props down, the Context API, the new useContext hook, state management libraries like Redux or MobX, state machines, etc. But you can also use component composition by rendering the children props.

I’m expanding my React knowledge so that I can build better apps. One of my learning resources is the Udemy course Complete React Developer in 2019 (w/ Redux, Hooks, GraphQL). I’ve been familiar with the basic setup of React’s Context API. But there are some nuances, of course. Below are some blog posts to get you started on the topic. Further Reading How the useContext Hook Works by Dave Ceddia Redux vs.

Today it took me over one hour to debug an error with Docker and Nginx. Every time I tried to submit a form with a POST method, NGinx gave me a 405 error: “405 Not Allowed”. I originally thought that Nginx overrode React Router settings and tried to troubleshoot my production NGinx config. StackOverflow had some ideas: POST request not allowed - 405 Not Allowed - nginx, even with headers included.

Today I reviewed my progress with the Microservices with Docker, Flask, and React by Michael Herman. I’m not familiar with Flask, but I wanted to learn how to build a microservices app with TDD. The testdriven.io course was the best course I could find which uses Docker, and React and teaches testing principles. The parts about Docker proved already useful. I used the setup to dockerize a simple Django app.

Yesterday I finished Introduction to Gatsby, a beginners course by Jason Lengstorf, hosted by Frontend Masters. Gatsby is a static site generator for JavaScript/React.js. It pre-builds your website and serves static images. Thus, it’s very fast. But it can also load dynamic data because it also is a fully fledged React app. The Gatsby team just released a big feature: Gatsby Themes. Gatsby Themes are similar to Wordpress plugins. They are pre-configured and you can load them into your Gatsby configuration.

Today I listened to a React Podcast episode where Michel Weststrate was a guest. He talked about state management, MobX, and Immer, his new library. Listening to talk like these, and the ideas behind JavaScript libraries and software architecture make me insanely happy. I’m excited about learning such concepts and how they play out in web development. It’s also humbling to realize how much I still don’t know. I’ve been thinking about how to build and structure a front-end React app.

Here are some things I’ve found useful this week or that I enjoyed: TypeScript Weekly - a newsletter for TypeScript How YOU can use Nest to build a GraphQL API - a tutorial that walks you through building a GraphQL endpoint with CRUD functionality Forget about component lifecycles and start thinking in effects - about React Hooks Build a Todo App in React Using Hooks - simple tutorial for beginners One simple trick to optimize React re-renders - without using React.

Here are some things I’ve found useful this week or that I enjoyed: You don’t need passport.js - Guide to node.js authentication - Santiago Quinteros explains how authentication in Node.js applications work Implementing DTOs, Mappers & the Repository Pattern using the Sequelize ORM [with Examples] - DDD w/ TypeScript - how to handle data access with TypeScript and Domain-Driven Design What’s the best documentation you’ve ever seen? - reddit thread: I like the DigitalOcean Tutorials Using Typescript in Node.

Just a short note: Today I learned that you shouldn’t pass props to React Router with the component attribute, but with render. From the Docs: When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component.

At the moment, I’m going through Reed Barger’s course Serverless React with AWS Amplify - The Complete Guide. I’m learning a lot about serverless JavaScript/React development with AWS. But wow, does it get ugly. Code duplication, wrangling with the AWS back end, fetching data several times, etc. I don’t have a lot of confidence in AWS Amplify. It makes it relatively easy to create a back-end API with GraphQL. But the documentation is lacking, the AWS web console confusing, and the pricing (after the free trial months) steep.

AWS Amplify offers an Authentication API that allows you to manage and store users. Here is an example for a custom React Hook with useReducer and useEffect that fetches the current user data from AWS Amplify: import { useReducer, useState, useEffect } from 'react' import { Auth, Hub } from 'aws-amplify' const amplifyAuthReducer = (state, action) => { switch (action.type) { case 'FETCH_USER_DATA_INIT': return { …state, isLoading: true, isError: false, } case 'FETCH_USER_DATA_SUCCESS': return { .

You can do a lot of nifty things with React when you think about how you can use functions in JavaScript. At the moment, I’m learning more about reusable components and composing components together. When I see these patterns, I always think: “Of course, it’s function composition” - but I would never have come up with this pattern on my own. Luckily, there are great teachers that can help me with that:

I’ve decided to dial back my interests and to focus on JavaScript/React.js, front-end tech, and clean code/architecture. Maybe I’ll throw in some ClojureScript… Work has picked up and I have limited time I can spend on coding. Although I love Elixir and functional programming languages, it will be better to double down on one tech stack - for now. JavaScript is beginner-friendly and offers tons of tutorials and other material for a web-dev newbie.

I’ve spent tons of hours trying to understand how the React Hook useEffect works and how I can avoid memory leaks. At this point, my best guess is that it’s a bug. Related issues: setState hook inside useEffect can cause unavoidable warning Can’t perform a React state update #14369 setState in useEffect causing a “React state update on an unmounted component” warning #15057 In my case, I created a custom Hook that interfaces with the GraphQL endpoint and pulls data with useEffect.

I’m still trying to figure out what causes a memory leak with my useEffect custom React Hook. I read tons of articles (I recommend Dan Abramov’s) but I haven’t found the solution. My custom data fetching hook (with an asynchronous API call) messes with state although the component is unmounted. The obvious solution is to add a cleanup function. But my implementation (see “Abort Data Fetching in Effect Hook” from this article) doesn’t work.

Currently I’m wrangling with cleaning up my data fetching functions with useEffect. I return a function that React can run when it unmounts, see React Documentation. In my example, I use the didCancel Boolean from this article. Unfortunately, it doesn’t work and still fetches data even if I navigate away from the page that uses the custom data fetching hook. import { useEffect, useReducer } from "react"; import { API, graphqlOperation } from "aws-amplify"; import { getMarket } from ".

I’m extensively using React Hooks. There are new patterns to learn and some pitfalls to avoid. Here are some good resources that help with learning more about Hooks: A Simple Intro to React Hooks by Dave Ceddia How to Use the useReducer Hook by Dave Ceddia How the useEffect Hook Works by Dave Ceddia How the useContext Hook Works by Dave Ceddia Application State Management with React by Kent C.

I’m now writing my React apps with Hooks. I’m accustomed to the way setState() worked: state updates may be asynchronous and updates were merged. That’s why I used functions instead of objects when calling setState(). Doing so ensured that you always get the newest values. Example: this.state = { person: { firstName: "", secondName: "" } }; this.setState(prevState => ({ person: { …prevState.person, firstName: "Tom", secondName: "Jerry" } })); The useState Hook works differently.

I have a form input text field and press the enter key to submit the form. I get an error “Assertion failed: Input argument is not an HTMLInputElement”. Assertion failed: Input argument is not an HTMLInputElement getFormProfile @ onloadwff.js:71 setFieldValue @ onloadwff.js:71 formKeydownListener @ onloadwff.js:71 onloadwff.js:71 Uncaught TypeError: Cannot read property ‘type’ of undefined at e.setFieldValue (onloadwff.js:71) at HTMLFormElement.formKeydownListener (onloadwff.js:71) setFieldValue @ onloadwff.js:71 formKeydownListener @ onloadwff.js:71 I originally thought that I had an error in my input field, perhaps some HTML code was wrong?

I’m learning TypeScript at the moment (as well as dabbling in other things like Elixir, React Hooks, GraphQL …). But I find it hard to apply my knowledge. It’s all fine and dandy to know what types and interfaces are, but how do I use them? If you have the same problem, you might want to take a look at the articles written by Martin Hochell. I especially enjoyed 10++ TypeScript Pro tips/patterns with (or without) React and Ultimate React Component Patterns with Typescript 2.

I’m very interested in TypeScript at the moment. I love learning new things and TypeScript looks like a useful super-set of JavaScript. It is well supported (by Microsoft), open-source, and seems quite popular according to the State of JavaScript 2018 survey. It also compiles down to plain JavaScript. As a beginner, you can slowly add valid TypeScript instead of having to immediately switch to a completely new language. You can head over to Flavio Copes’s TypeScript Guide to get a sense on what TS has to offer.

Yesterday I was wondering how I could protect routes in React.js. I have a back-end application written in Node.js which uses middleware (Passport-Next and a requireLogin helper) to protect the server routes. But what about client-side routing? The app uses React Router v4 for routing and React-Redux for state management. The Redux store contains an auth key that tells me if the user is signed in. So, how can I use the Redux state to determine if a user can visit a (client-side) route?

Redux is a common tool that’s used with React. It creates a central “store”. This store holds your data (the React state). You can connect your React components to the store to read data or use dispatch actions to update the data in your store. The official docs make it sound so complicated: Why Use React Redux? Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS.

These are the plugins and settings that I use for JavaScript/React.js-development with (Neo)Vim. Vim Plugins I use minpac as my package manager. VimCasts has a good introduction video on minpac if you’re interested. Useful plugins: pangloss/vim-javascript MaxMEllon/vim-jsx-pretty w0rp/ale Optional: sheerun/vim-polyglot ternjs/tern_for_vim If you use tern.js you need to install the npm package, too. Installing NPM Packages and Setup I use ESLint and Prettier. If you use Create React App skip the ESLint installation because it doesn’t play nice.

I’m learning how to handle React Hooks. The article Getting Hooked on React Hooks helped me clear up some misunderstandings. But I’m still not sure how to use the Effect Hook when it’s supposed to fetch data on a form submit. In one of my toy apps (URL Shortener React) I have a separate form component. It’s a child to the main app and receives the onSubmit function from the parent.

The new version of React, React 16.8 was released this month - and it finally has Hooks. From the official announcement: Hooks let you use state and other React features without writing a class. You can also build your own Hooks to share reusable stateful logic between components. Today I began refactoring my React URL Shortener to using Hooks instead of class components. The app has a simple form input where you can type in a URL.

Create-React-App allows you to set environment variables. This is often used to store secret keys, for example, API Keys. You need those to authenticate a request to a third party service (i.e. a call to the Open Weather Map API). Instead of using the key directly in your file, you store it in an .env file and reference it. You don’t commit this .env file to source control (Github, Gitlab, etc.

There are some gotchas with React’s setState(). For example, state updates may be asynchronous: React sometimes batches multiple setState() calls for performance reasons. Make sure to set state correctly and to use the latest state. Here are some examples from the official documentation: // Wrong this.setState({ counter: this.state.counter + this.props.increment }); Instead you should use a function which takes the previous state as a first argument. // Correct this.setState((state, props) => ({ counter: state.

The React documentation explains how to handle HTML forms and events. Let’s have a look. Imagine you have an HTML form with an <input> field: the browser will open a new page when the user submits the form. In React, we often don’t want that because we handle our state as part of the main component and we mutate it with setState(). This is a “controlled component”. Here’s an example:

You can create stunning backgrounds with Particles.js. Luckily, a kind soul has implemented this library as a React component: react-particles-js. react-particles-js is easy to use but it can be tricky to get the CSS working properly. First, add the library to your installation: npm install react-particles-js || yarn add react-particles-js Then add this code to your app: import Particles from "react-particles-js"; const particlesOptions = { particles: { number: { value: 80, density: { enable: true, value_area: 800 } } } }; class App extends Component { render() { return <Particles className="particles" params={particlesOptions} />; } } Now you need to style the Particles component in your CSS file.