Forem: Kevin To

How to: Docker, typescript, and node

Kevin To — Thu, 04 May 2023 17:28:33 +0000

Why Docker?

To put it simply, we want to replicate the same environment on every machine our application will run on.

Imagine my teammate an I are working with two different operating systems/machines, each of us has a different version of node installed. Well everything might be fine and dandy on my end but they might run into all kinds of node mismatch issues on their's. This is where Docker comes in.

The Docker container replicates a desired standard environment for which our application will run in. So instead of directly running our application on whatever local machine and it's environment, we will run a docker container with that replicates the same environmental conditions (every time, everywhere) in which our application will run inside.

Part 1: Checking your scripts

My build script will spit out a transpiled index.js file in ./app/server/build folder.

My start script will run the built index.js file found in said folder.

Make sure your scripts are working correctly as Docker will run these scripts to run your application inside the container.

Part 2: The dockerfile & building your image

The dockerfile is just a text document that contains the commands for docker to build your docker image. We can have different images with varying settings.

Hold on, what is a docker image?

a docker image is an immutable file that contains the source code, libraries, dependancies, tools, and other files that are needed for a container to run. Essentially containers are instances of images.

Create the dockerfile, and inside...

So let's go line by line and figure out what's happening here.

FROM node:18-alpine
- We specify a node version, alpine is just a lightweight/barebones node version used to run inside our container
WORKDIR /usr/src/app
- In our instanced environment we need to create a new directory for our files to live in
COPY package.json yarn.lock ./
- Copy first our package.json and yarn.lock files into the root directory we just created, so we can install our dependencies needed for our application
RUN yarn install
- Run the given command to install dependancies
COPY . .
- Copy over the rest of our files
EXPOSE 8080
- Which port do we want our application to run on? In my node app I specified port 8080 so here I will do the same
RUN yarn build
- Now we build to get our index.js file spat out into the build directory
CMD ["yarn", "start"]
- And lastly we start our application

Part 3: .dockerignore file

We want to keep our container instance slim, so we'll went to exclude unnecessary files. We can do that by first creating a .dockerignore file in the root directory and filling it out with...

Part 4: Running our container

If you haven't already you'll want to download the latest version of Docker Desktop for your computer, and then start the application.

Navigate to where your dockerfile is located in your terminal and then run the docker command docker build . -t imageNameOfChoice the -t flag allows you to give a name/tag to your image that you are about to build
Once that has finished building we want to instance/run a container from the image that we just built. Run the docker command docker run -d imageNameOfChoice. the -d flag runs our container in detached mode, meaning it is disconnected from the current terminal so we can continue to use other commands. This mode means the container receives no input and displays no output.
- Detached mode will spit out a long id that references your container
You can check the currently running docker container/containers by running the docker command docker ps. You will see the randomly generated name of your running container along with the id that was given to you from running in detached mode.
Visit localhost:8080 and see your container running.
To stop your container simply run docker stop randomlyGeneratedContainerName

Conclusion

So far we've learned how to write a setup a dockerfile to create an image and build and run a container. Stay tuned for more on how to connect other services like a DB/Redis in the future!

I'm SPRUNG! A react-spring series // Part 1: Intro & the useSpring hook 🦘

Kevin To — Sun, 11 Dec 2022 11:07:32 +0000

I'm SPRUNG!

Yes this series is named after the 2005 song by T-Pain...

What is React Spring?

React Spring is a spring-physics based animation library. Instead of manipulating time, we give our elements mass, tension, and friction to mimic how things move from one position to another in real life.

Ok then... so how do we actually animate things?

First we have to get a few things out of the way.

1. The `animated` component

We can only animate animated components, these are provided by the react-spring library. We can also use a to denote an animated component as well

import { animated, a } from '@react-spring/web'

<animated.div /> // will animate

<span /> // won't animated

<a.h2 /> // will animate

2. We define our springs in two ways:

As an config object
Or as an anonymous function passed into the hook

// This spring will run when the component mounts 

const spring = useSpring({
    from: {opacity: 0, 'translateY(100%)'},
    to: {opacity: 1, 'translateY(0)'}
})

// This spring will run based on state

const [active, setActive] = useState(false)

const spring = useSpring({
    opacity: active ? 1 : 0,
    transform: active ? 'translateY(0%)' : 'translateY(100%)'
})

/*
   And lastly we can use an imperative method. We use array 
   destructuring to receive a controller object. We just need 
   to pass an anonymous function with our config object.
   This method doesn't rely on the components lifecycle. 
*/ 

  const [styles, api] = useSpring(() => ({
    opacity: 0,
    transform: 'translateY(100%)'
  }));

  api.start(({
    opacity: 1,
    transform: 'translateY(0%)'
  }))

Our first animation

const [active, setActive] = useState(false)

const spring = useSpring({
   opacity: active ? 1 : 0,
   transform: active ? 'translateY(0%)' : 'translateY(100%)' 
})

const handleClick = () => {
   setActive(state => !state)
}

return (
    <a.p style={spring}>Poof!<a.p>
    <button onClick={handleClick}>Click Me!</button>
)

Above we see that the spring will only trigger based on the state of active. By default it will be invisible, and its starting position will be 100% of its origin on the Y axis (this means it will animate bottom - up). We've also passed the whole spring. But we can also use the spread operator...

return (
    <a.p {...spring}>Poof!<a.p>
    <button onClick={handleClick}>Click Me!</button>
)

Our second animation

But what if we want to apply this spring to multiple elements in an array? React-spring has a dedicated hook for that useSprings, which we'll cover in the next post, but we can actually use the useSpring hook to do this, although it will be limited. All we have to do is map over the array and apply it to each rendered jsx element

/*
  Lets say we have four boxes we want to spin and turn into 
  circles
*/
const Example = () => {
   const [active, setActive] = useState(false)
   const elements = ['Item 1', 'Item 2', 'Item 3', 'Item 4']

   const animation2 = useSpring({
       transform: isActive ? 'rotate(720deg)' : 'rotate(0deg)',
       borderRadius: isActive ? '50% 50%' : '0% 0%',
       backgroundColor: isActive ? '#FF7518' : 'rgb(255, 255, 255)',
       color: isActive ? 'rgb(255, 255, 255)' : 'rgb(0, 0, 0)',
       transformOrigin: 'center',
   });

   const handleClick = () => {
      setActive(state => !state)
   }

   return (
      {elements.map(el => <a.p style={spring}>{el}<a.p>)}
      <button onClick={handleClick}>Click Me!</button>
   )
}

This is nice if you simply want all the elements to have the same animation all happening at once.

Conclusion

Things to note about the useSpring hook:

Components will reverse their animation when tied to a state variable. If using the imperative method, springs will jump from the end state to the beginning position and run again
Remember that your components, even if their opacity is set to 0, they are still mounted on the DOM. They're never unmounted. We will take a look at mounting and un-mounting elements using the useTransition hook in the future

This wraps up the first part of the react-spring series! So stay tuned for part 2 on the useSprings hook!

How to set up an Express Server with Typescript and ES6 import statements using Vite

Kevin To — Thu, 10 Nov 2022 09:43:32 +0000

Require this, require that... ugh! It's 2022 man!

I remember setting up my server for the first time with typescript while trying to use import and export statements... my god that was a painful day.

So I'm here to save you all that trouble and show you how you can setup a typescript server super easily with ES6 import statements. We're going to use Vite to bypass all that boring setup, and get straight to the meat of things.

Initialize a new project

First cd into the folder where you keep your projects and run this command to intialize a new Vite project. Follow the prompts and select react and typescript. CD into you project and run the command yarn install to install all the dependancies. And we're off to the races!

Install packages

First things first we need a few packages.

Express framework itself
The types for our express objects
ts-node which allows us to run our server in node.js without having to precompile
and nodemon which will restart our server every time we make a change

Toggle esModuleInterop

In you tsconfig under compiler options set the esModuleInterop to 'true'

Setup your server

Setup your typescript server. I'm calling mine server.ts and for this example it will be located inside the src directory

Edit package.json

In you package.json add "type": "module" (if its not already there) to enable ES6 import syntax, and set your nodemon script with the filepath to your server.

Run it!

And finally all we have to do is run our script. And we're all good to go!

Forem: Kevin To

How to: Docker, typescript, and node

Why Docker?

Part 1: Checking your scripts

Part 2: The dockerfile & building your image

Part 3: .dockerignore file

Part 4: Running our container

Conclusion

I'm SPRUNG! A react-spring series // Part 1: Intro & the useSpring hook 🦘

I'm SPRUNG!

What is React Spring?

Ok then... so how do we actually animate things?

1. The animated component

2. We define our springs in two ways:

Our first animation

Our second animation

Conclusion

How to set up an Express Server with Typescript and ES6 import statements using Vite

Initialize a new project

Install packages

Toggle esModuleInterop

Setup your server

Edit package.json

Run it!

1. The `animated` component