DEV Community: Kati Frantz

7 things to make your portfolio projects stand out and make any employer hire you

Kati Frantz — Wed, 06 Oct 2021 07:53:12 +0000

You do not need any job experience to land an amazing developer job.

7 things to make your portfolio projects stand out and make any employer hire you:

🏘️ Build projects with real-world use cases and solutions. Consider yourself a contractor, and someone came to you with a real problem, asking for a real solution. Build it and launch it like you are working for a real business. Deploy it, purchase a domain, make it live and functional. Add it to your resume as prior experience. Make the code open-source. Do 7 of these, and not only your skills, but your experience itself will shoot to the roof.
💅 No ugly projects. Build a beautiful, fully-branded solution. For example, you are building an airbnb clone. Don't call it that. Give the company a name, for example, Vacasa. Go to ui8.net, buy a Figma design for the kind of project you are building. Implement the design from scratch. Make it perfectly responsive, create a logo for the project. How do you know you did a great job? If someone sees the website online, they should be sold and think this is a legit existing business.
📝Document your project completely. Write a useful and fully detailed case study. Explain why you used x framework or y technology. This explanation should be in the project readme, or be part of your projects on your website. Your documentation should have the designs for the project, explanation of design patterns used, project architecture, how it was deployed, development problems you ran into, and a list of all features and functionality.
🛠️ Your code should check all the boxes for production grade software: Accessibility, testability, scalability and maintainability. Write semantic HTML, create accessible components, fully test that your code works on both the backend and frontend, make sure its Easily maintainable by any developer, clean code best practices, fully typed, can scale to millions of users without performance drops, and beautifully structured and organized code. You can ask for feedback and make as many tweaks as needed to get the perfect code.
🚀 Collaborate with other developers. Create a 3-4 people team, distribute tasks, work together to complete the project. Full history of collaboration should be on Github and a public Trello board. Show your employer you have team experience, and can fit into their team.
👓 Take some time to find a very experienced developer to review your code on Github, provide Github PR reviews, and give you the best tips to make your solution the best quality possible. If you can't find someone willing to do this for you, pay for their time. I promise you its worth it.
📻 My final tip is a list of possible projects you can build that will match the quality I am talking about:

i. circle.so
ii. udemy.com
iii. tinder.com
iv. ui8.net
v. reform.app
vi. attract.io
vii. Implement a design system from scratch. Pick any one on Figma and write the code for it. Make it open-source. I got my eyes on sargam.design.

Please share this content and help someone in need of a guide.

Did you love this content? You can get even much more by subscribing for free to my email list . No spam, just tons and tons of value for your career 👇

https://katifrantz.com/newsletter

How to move from mid-level developer to senior engineer in 2021

Kati Frantz — Thu, 14 Jan 2021 13:16:06 +0000

I've spent a lot of time leading teams, training over 65 thousand developers via online courses and mentoring dozens. Here's a guide on how to move from mid-level developer to senior engineer in 2021:

Start mentoring someone today.

Show empathy, support and a strong desire to see this person succeed. Find someone who is just starting out, make sure they don’t make the mistakes you made. Get on a consistent schedule to have video calls, check up on their progress, pain points, and be there for them. And yes, don't doubt yourself. You have what it takes! You can do this!

The value you provide needs to go beyond code.

Get closer to the business. Schedule a call with your CEO now. Ask questions about the future of the business, the goals for the year. Get involved. Do market research about your company’s industry. Do this every week, attend marketing calls, make sure engineering is working towards the goals of the company. Love the business. Care for the business. Attend marketing calls, peaching calls, or watch past ones. Working at a large company ? Get super involved with the role of your team.

Level up technically.

Don't learn more frameworks. Master the ones you're already using. Do something more advanced. Watch technical workshops. Every day, dive into the code and find those things that are making the business lose money (Performance, poor design, Bugs). Pay incredible attention to detail when writing code. Creating an endpoint to fetch data ? Don't end at fetching data. Handle 401s, 404s, data validation, sanitisation, rate limiting, caching, query performance, clean code, documentation. Every Single Detail Matters.

Become a master of soft skills.

Your coding skills can only take you half way there. The higher you go, the more people skills you need. Communicate excessively. Every single detail matters. Have a deep empathy for the business you work for, and the people you collaborate with everyday. Put yourself in their shoes. Be open minded. Accept feedback joyfully from those you mentor, those you report to, and be willing to grow from it. The more people skills you have, the more doors you can open.

🚀 Did you find this impactful? Consider following me on twitter for more nuggets, tips and guides to grow in your career as a software engineer.

The Ultimate Guide to JWT server-side auth (with refresh tokens)

Kati Frantz — Mon, 30 Nov 2020 06:16:02 +0000

Hello, my name is Kati Frantz, and thank you so much for checking out this tutorial. I want to talk about how to handle JWTs effectively and securely on the server-side.

Most tutorials only cover one part, issuing the access token, but this is only part of the solution and can be very insecure in a production application. Let's start by understanding the authentication strategy and learn how best to implement it.

Understanding access tokens and refresh tokens

Let's take an example application, a social networking mobile app. We have two goals here:

Maintain the user's login status for as long as possible, with no interruptions and a great user experience. For example, I've been logged in to Instagram for about two years now.
We should make sure providing a great user experience to the user does not compromise on security.

Let's start with the first goal, a forever login. When the user downloads our application, they register a new account or log in to an existing account. The API for our mobile app returns an access token, which could be a JWT. Since we want the user to be logged in forever, we set the token expiry to 10 years. When the user wants to fetch their feed, search users, or perform any authenticated requests to the API, the mobile app sends along with this access token.

Great, this solves the first goal. Now let's talk about the second goal. Security. If an attacker takes possession of the access token (and trust me, they can), we have a huge security problem because they have access to the user's account for the next 10 years.

Refresh tokens

We can improve our application security to make it very tough for an attacker to hijack the access token, but we can never be completely secure. The best way to protect the user now is to make sure the access token is as short as possible. 10 minutes is ideal. Depending on how safe and secure your mobile app or browser client is, you can increase this time.

Now we have a short-lived access token, it's only valid for 10 minutes, which means if an attacker takes possession of the token, their access expires in 10 minutes or less. But again, this breaks our first condition. If the user's access expires every 10 minutes and they have to login again, the user experience is very poor.

This is where refresh tokens come in. When the user logs in, our API returns two tokens, an access token, and a refresh token. The access token expires in 10 minutes, and the refresh token expires in 5 years.

This refresh token does not grant access to the API but can be used to request a new access token. After 10 minutes of usage, a few seconds before the user's session expires, we make an API call in the background to the API, sending the refresh token.

The API identifies and authenticates this refresh token, and returns a new access token to the mobile app which expires in 10 minutes.

Great. We've solved the first goal, and the user experience is back. Security is partially solved. Since we send the refresh token over the network, it becomes a little more difficult for a hijacker to get a hold of the refresh token.

We are not completely safe yet. If they ever hijacked the refresh token, we're back to the same problem, because the attacker can now generate new access tokens. If your application has very good security to store the refresh token with a very low possibility of being compromised, then there's no need to fear. If not, such as in-browser environments, we need another way to secure refresh tokens.

Refresh token rotation

The Internet Engineering Task Force suggests using a technique called refresh token rotation to secure refresh tokens. You can view the details of the draft here.

First, every time the user authenticates, we generate new access and refresh tokens and return to the mobile app. We also persist the new refresh token to the database.

Whenever the mobile app requests our backend with the refresh token to get a new access token, we'll generate a new refresh token and save it to a database. Next, we'll invalidate the refresh token that was just used.

This means the mobile app can only use a refresh token once. In the event where an attacker gains access to the refresh token and attempt to use it, the backend automatically detects this, notices the token has already been used and immediately blocks the user's account.

Now if the attacker uses the refresh token before the mobile app does, in less than ten minutes after hijacking the refresh token, the mobile app attempts a refresh, and this also results in the user's account being blocked, so we've protected both ways.

At this point, the API notifies support that a user's credentials have been compromised, and once we figure out and patch any security issues, we can unblock the user's account and ask them to re-authenticate.

Creating a secure server-side JWT authentication with refresh tokens

If you want this functionality out of the box with absolutely no effort, you can run yarn create tensei-app my-app and get a fresh new project. The project has less than 18 lines of code and implements this backend architecture for you. Let's look at some code snippets from the tensei codebase to see how this is done.

We need two database tables: users and tokens. The users table has the standard fields we need for authentication such as email and password. The tokens table has the token, expires_at, last_used_at and user_id fields. The last_used_at field would help us know if a token has already been used once to acquire an access token before.

First, a user attemps to login. This is how the login controller looks:



    private login = async (ctx) => {
        const { db, body } = ctx
        const { email, password, token } = await this.validate(
            body.object ? body.object : body
        )

        const user = await db.findOne('User', {
            email
        })

        if (!user) {
            throw ctx.authenticationError('Invalid credentials.')
        }

        // Check if the user's account has been blocked. The user can be automatically blocked 
        // if data compromise is detected.
        if (user.blocked_at) {
            throw ctx.forbiddenError('Your account is temporarily disabled.')
        }

        if (!Bcrypt.compareSync(password, user.password)) {
            throw ctx.authenticationError('Invalid credentials.')
        }

        ctx.user = user

        return this.getUserPayload(ctx)
    }

    private async getUserPayload(ctx) {
        return {
            access_token: this.generateJwt({
                id: ctx.user.id
            }),
            refresh_token: await this.generateRefreshToken(ctx),
            expires_in: this.config.tokensConfig.accessTokenExpiresIn,
            user: ctx.user
        }
    }

    private async generateRefreshToken(
        ctx
    ) {
        const plainTextToken = this.generateRandomToken(48)

        // Expire all existing refresh tokens for this customer.
        await ctx.db.nativeUpdate('Token', {
            user: ctx.user.id
        },
        {
           expires_at: Dayjs().subtract(1, 'second').format(),
           // Also mark unused refresh token as used, in case the user logged in twice and got more than one
           // refresh token at a time
           last_used_at: Dayjs().subtract(1, 'second').format()
        }
        )

        const entity = ctx.db.create('Token', {
            token: plainTextToken,
            user: ctx.user.id,
            type: TokenTypes.REFRESH,
            expires_at: Dayjs().add(
                this.config.tokensConfig.refreshTokenExpiresIn,
                'second'
            )
        })

        await ctx.db.persistAndFlush(entity)

        return plainTextToken
    }

    public generateJwt(payload) {
        return Jwt.sign(payload, this.config.tokensConfig.secretKey, {
            expiresIn: this.config.tokensConfig.accessTokenExpiresIn
        })
    }

A few moments after we send the access and refresh tokens to the user, the mobile application attempts to use the refresh token to get a new access token:



    private async handleRefreshTokens(ctx) {
        const { body } = ctx

        const refreshToken = body.refresh_token

        if (!refreshToken) {
            throw ctx.authenticationError('Invalid refresh token.')
        }

        const token = await ctx.db.findOne('Token', {
            token: refreshToken,
            type: TokenTypes.REFRESH
        })

        if (!token) {
            throw ctx.authenticationError('Invalid refresh token.')
        }

        if (token.last_used_at) {
            // This token has been used before.
            // We'll block the user's access to the API by marking this refresh token as compromised.
            // Human interaction is required to lift this limit, something like deleting the compromised tokens.

            ctx.db.assign(token, {
                compromised_at: Dayjs().format()
            })

            ctx.db.assign(token.user, {
                blocked_at: Dayjs().format()
            })

            ctx.db.persist(token)
            ctx.db.persist(token.user)

            await ctx.db.flush()

            throw ctx.authenticationError('Invalid refresh token.')
        }

        if (!token.user || Dayjs(token.expires_on).isBefore(Dayjs())) {
            token && (await ctx.db.removeAndFlush(token))

            throw ctx.authenticationError('Invalid refresh token.')
        }

        ctx.db.assign(token, {
            last_used_at: Dayjs().format(),
            expires_at: Dayjs().subtract(1, 'second').format()
        })

        await ctx.db.persistAndFlush(token)

        ctx.user = token.user

        return this.getUserPayload(ctx)
    }

Conclusion

So there you have it, how to implement refresh tokens and refresh token rotation in your application to ensure maximum security. A good thing to do is make sure your application's needs fit the security measures you are taking.

Thank you very much for reading this far 🎉.

If you've found this useful, please follow me on Twitter, and subscribe to my newsletter to be instantly notified when I share a new post.

The Ultimate Guide to JWT client side auth (Stop using local storage!!!)

Kati Frantz — Mon, 23 Nov 2020 04:41:46 +0000

Hello, my name is Kati Frantz, and thank you so much for checking out this tutorial. I want to talk about how to handle JWTs effectively and securely on the client-side.

The most popular practice in the industry today is to save your JWT in a cookie or local storage. I've done this for a couple of years, and I have even taught others to do the same, but I didn't think it was a big deal until one of the applications I worked on was hacked.

This was an XSS attack. This is an attack in which a malicious person runs malicious code on the client's browser directly attacking your application.

Now, they could do this to get access to local storage or cookies and extract the JWT from there.

These tokens used in sessions are usually long-lived, and the attackers can get access to your API for a very long time.

The solution we want to talk about today is one that would, first of all, prevent us from saving our tokens in a risky place, and secondly, implementing another solution that makes sure even if the attacker manages to get hold of a token, the access to the API would expire almost immediately.

Let's get started.

For this tutorial, the first thing we need is a real project. I have set up a sample project with user registration, login, and logout.

The /api folder has a fully-featured graphql and auth server using just 20 lines of Tensei.js.



const { auth } = require('@tensei/auth')
const { tensei } = require('@tensei/core')
const { graphql } = require('@tensei/graphql')

tensei()
    .plugins([
        auth()
            .user('Customer')
            .plugin(),
        graphql()
            .middlewareOptions({
                cors: {
                    credentials: true,
                    origin: ['http://localhost:3000']
                }
            })
            .plugin()
    ])
    .databaseConfig({
        type: 'sqlite',
        dbName: 'tensei.sqlite',
    })
    .start()
    .catch(console.log)

The /client folder is a React.js project generated with create react app. We have three routes: Login, Register, and Dashboard.

User registration

When a user registers a new account, we make a request to the backend to get a JWT so we can automatically login the customer. At this point, this is usually when we'll set the JWT to local storage, but we won't be doing that. Here's the implementation of the register function:



client
      .request(register, {
        name: name.value,
        email: email.value,
        password: password.value,
      })
      .then(({ register_customer: { customer, token } }) => {
        client.setHeader("authorization", `Bearer ${token}`);

        setCustomer(customer);

        history.push("/");
      })

We do not set the token to local storage, but we save it in memory. Here, we're setting it on the HTTP client so we can make subsequent authenticated requests to the API.

Next, we set the customer and redirect to the dashboard.

There's something very important that happens when we receive a response from the backend. Let's have a look at the backend response:

The backend set's an HttpOnly cookie called ___refresh_token on the response. This cookie has the unique property of not being accessible from the client-side. This means if you run document.cookie in the developer console, you won't see the ___refresh_token cookie.

This is because an HttpOnly cookie can only be exchanged with the server, and cannot be accessed using client-side javascript.

Using this kind of cookie to set the refresh token gives us additional security, and assurance that the token can't fall into the wrong hands.

Understanding refresh tokens

The token we received in the JSON response from the API is an access token. This type of token gives the customer access to the API resources.

An access token should expire in about 10 to 15 minutes so that if it falls into the wrong hands, it becomes invalid as soon as possible.

A refresh token on the other hand does not give access. Instead, it can be used to request a new access token. That way, before the access token expires, you can silently request a new access token to keep your customers logged in.

Handling silent refresh

After registration, the customer is redirected to the dashboard, and they can access the dashboard because they are logged in. What happens when she refreshes the page or opens the app in a new tab?

Well, since we only set the token in memory, the customer loses access and is redirected to the sign-in page instead.

This is not pleasant, and we need to persist the customer's session somehow.

That's where a silent refresh comes in. Before actually redirecting the customer to the sign-in screen, we need to check if the user has an active session. We do this by calling the API to request a new access token.

A good place to do this is when the app mounts, showing a loading indicator to the user while we make this request:



  const client = useClient();
  const [customer, setCustomer] = useState(null);
  const [working, setWorking] = useState(true);

  const refreshToken = () => {
    client
      .request(refresh_token)
      .then(({ refresh_token: { customer, token, expires_in } }) => {
        client.setHeader("authorization", `Bearer ${token}`);

        setCustomer(customer);
      })
      .catch(console.log)
      .finally(() => {
        setWorking(false);
      });
  };

  useEffect(() => {
    refreshToken();
  }, [])

As soon as the app mounts, we make an HTTP request to the backend to refresh the access token. Since the ___refresh_token is already set on the customer's browser, it is sent along with the request.

The backend gets the cookie, authenticates this cookie, and sends back a new access token with the customer's information.

We then set the token on the HTTP client for subsequent requests and set the customer in the state. This means every time the customer visits the app, their session is fetched from the API and they are automatically logged in.

This solves the first problem, and the customer has a persistent session, but the access token will expire in 10 minutes, and we need to handle this case too.

The API also responds with how long the JWT takes to expire, so we can use this value to know when to silently call the API to get a new access token.



  const client = useClient();
  const [customer, setCustomer] = useState(null);
  const [working, setWorking] = useState(true);

  const refreshToken = () => {
    client
      .request(refresh_token)
      .then(({ refresh_token: { customer, token, expires_in } }) => {
        client.setHeader("authorization", `Bearer ${token}`);

        setTimeout(() => {
          refreshToken()
        }, (expires_in * 1000) - 500)

        setCustomer(customer);
      })
      .catch(console.log)
      .finally(() => {
        setWorking(false);
      });
  };

  useEffect(() => {
    refreshToken();
  }, []);

We're using the expires_in value to set a setTimeout to refresh the token. This means a few milliseconds before the token expires, the refreshToken() method is called again, and it'll set a new access token.

Great, we can now keep the customer always logged in with the access token only stored in memory.

Handling logout

What happens when the user needs to logout? We do not have access to the ___refresh_token cookie from client-side javascript, so how do we clear it?

We need to call the API, and the API would invalidate the ___refresh_token. On the dashboard page, when the logout button is clicked, we'll invoke the following function:



  const logout = () => {
    client.request(remove_refresh_token).finally(() => {
      history.push("/auth/signin");

      setCustomer(null);
    });
  };

We call the remove_refresh_token endpoint on the backend, and the response invalidates the ___refresh_token cookie as such:

The backend response contains a Set-Cookie header, which sets the Max-Age of the ___refresh_token header to 0 and its value to '', thus expiring it and making it invalid.

We then set the customer to null and redirect to the sign-in page.

Cross domain considerations

In the example project, the client and server run on separate domains. This would most likely be the case for your application, and to allow two domains to exchange sensitive information with each other, you need to set some configuration on both client and server.

On the server, first, you need to enable CORS, allowing the client domain to request resources from the server. Secondly, you need to allow the exchange of credentials. This informs the server to accept sensitive information such as cookies from the incoming client request. On our demo server, we configured this as such:



.middlewareOptions({
    cors: {
        credentials: true,
        origin: ['http://localhost:3000']
    }
})

Tensei.js uses apollo-server-express behind the scenes for the graphql server, and this configuration is directly passed to it.

On the client, you need to configure your HTTP client such as Axios or Fetch to include sensitive credentials when making requests to an external API. In the demo project we used graphql-request, which we configured as such:



import { GraphQLClient } from "graphql-request";

export default new GraphQLClient(

  process.env.REACT_APP_API_URL || "http://localhost:4500/graphql",

  {

    credentials: "include",

  }

)

Conclusion

When building applications that are not customer-facing, for tutorials or just fun projects, security might not be a big deal, but if working with real customer data, security has to be a top priority.

I highly recommend implementing a very secure JWT authentication system when building applications that would be used in the real world.

Please consider following me on Twitter and also checking out tensei.js and giving it a star.

Thank you very much for reading so far, and I hope this changes the way you handle JWT.

The React Testing Masterclass

Kati Frantz — Wed, 15 Jul 2020 09:22:06 +0000

Learn the best practices and strategies to effectively test your react components and applications.

Get the free course here

Hi 👋 I' m Kati Frantz , and I've built tons and tons of React applications. Everyone can ship software, but shipping quality software requires a lot of quality assurance and best practices.

A professional ships confident, well tested, and stable code.

This is the standard, but testing react applications can be painful and complex. What are the best practices ? What should I test ? How can I test a react router based, redux store connected stripe checkout form 😱😭?

Be glad you found this course, because this course will show you the best practices for testing components and full scale applications.

We'll be testing an e-commerce application 🛒💰 with Stripe Checkout. Here are some of the features we'll be testing:

🍄 Reusable checkboxes
🌴 External API powered products listing
🌐 Product tiles accessibility
🌾 Off canvas filter menu (with portals)
🌲 Prevent scroll on canvas open
🎏 Event listener cleanups
🔕 Debounced products search
🍉 Context dependent components
🔐 React router page navigation
📪 Redux connected components and pages
🏄 Custom hooks
👜 Checkout modal
🍇 Stripe checkout

And so much more ! I've curated a real-world project so you learn techniques and strategies you can use in your companies starting today !

Get the free course here

Mysql backups with node.js

Kati Frantz — Thu, 21 May 2020 00:58:39 +0000

If you're running an application in production, it is critical to have an automated backup system for your database. This system could automatically dump database backups and upload to the cloud every couple of hours.

In this tutorial, we'll create this script using node.js. This script would run the mysqldump command using the node.js child process. First let's examine this command.

mysqldump -u <username> -p<password> <database-name>

Running this command would generate a record of the table structure and the data from the specified database in the form of a list of SQL statements.

Let's create the node.js backup script that would run this command as a child process. First, we'll import all the modules we need.

const fs = require('fs')
const spawn = require('child_process').spawn

We need the fs module to write the dump content to the dump file.
We need the spawn method from the child_process module to run the mysqldump command.

The spawn runs the command and returns a stream. The spawn would not wait for the command to finish running before returning the output to us. This is very important because some large databases can run for many hours.

Next, we'll need a unique name for the database dump.

const dumpFileName = `${Math.round(Date.now() / 1000)}.dump.sql`

This uses the date object in javascript to generate the current epoch time and attaches .dump.sql to it. We'll use this as the dump file name.

Next, let's create a write stream. When we stream output from the spawn method, we'll pass the output to the write stream, which would write the output to a file.

const dumpFileName = `${Math.round(Date.now() / 1000)}.dump.sql`

const writeStream = fs.createWriteStream(dumpFileName)

The write stream will create a file with the specified file name.
Next, let's create the child process using spawn .

const dump = spawn('mysqldump', [
    '-u',
    '<username>',
    '-p<password>',
    '<database-name>',
])

The first argument to the spawn method is the command, and the second is a list of all arguments to be passed to this command. As seen above, we are passing through all the commands just like we did on the command line.

This method returns a child process, and we can now stream for every output emitted from the child process.

dump
    .stdout
    .pipe(writeStream)
    .on('finish', function () {
        console.log('Completed')
    })
    .on('error', function (err) {
        console.log(err)
    })

Here, we are pipeing the output from the dump as input to the writeStream. So as the child process runs, every time there's a new chunk of output, the write stream would write it to the file.

We can also listen to the finish and error events and pass callbacks to handle them. In this case we just log a message.

Here's the complete script:

const fs = require('fs')
const spawn = require('child_process').spawn
const dumpFileName = `${Math.round(Date.now() / 1000)}.dump.sql`

const writeStream = fs.createWriteStream(dumpFileName)

const dump = spawn('mysqldump', [
    '-u',
    'ghost',
    '-pghost',
    'ghost',
])

dump
    .stdout
    .pipe(writeStream)
    .on('finish', function () {
        console.log('Completed')
    })
    .on('error', function (err) {
        console.log(err)
    })

To automate this process, you can create a cron job that executes this script every x amount of time.

Free book: Deploying Node.js 🚀

Kati Frantz — Wed, 20 May 2020 03:15:35 +0000

Get free, complete access here

Hi! I'm Kati Frantz, a full-stack javascript engineer who has spent sleepless nights trying to figure out server management and node.js application deployments.

I've always found there was a lack of a reliable resource on how to deploy, manage, and scale node.js applications in the cloud. Over the past few years, I have built, deployed, scaled and managed node.js applications of all sizes.

I always wished there was a practical and simple guide for me to follow, teaching me how to deploy my own production ready servers, databases, queue workers, how to set them up, secure them, and deploy my node.js applications.

That's why I took out time to write this book, to share all the knowledge I have acquired over the years: a simple practical guide to provisioning, setting up, securing, scaling, managing and deploying node.js servers.

It's complete free, so go ahead and start learning. Get complete access here .

Please share this resource with someone who might find it useful.

Thank you !

How to deploy and manage Node.js apps with Nesabox

Kati Frantz — Fri, 27 Sep 2019 20:20:49 +0000

This is a step by step guide for deploying and managing a Node.js application using Nesabox. As a sample project, we'll be deploying a strapi application but this tutorial would work for any Node.js framework or project.

Requirements

A free Nesabox account

Creating a virtual private server

The first thing we need is a VPS to host our application. You can obtain one of almost any size from server providers such as Digital Ocean, Vultr, Linode and AWS. Nesabox connects your account with these providers to make it easy to provision a server. You can also obtain a VPS from any provider of your choice running Ubuntu 18.04 and connect it to your Nesabox account.

In this example, we'll use Digital Ocean, but any provider would work just fine. Visit your account settings page to connect your provider by adding an API token obtained from Digital Ocean (Or your chosen provider).

Once done, visit your dashboard to provision a server.

Be sure to select the databases you'll need on this server. In this case, I selected all databases supported by Strapi.

The provisioning takes abut 10 minutes. During this time, Nesabox installs all necessary packages, databases, and configures the server for production.

Creating a database

Once your server is ready, click to manage it. You should see the Mongodb tab. You can manage your Mongodb installation here by adding new databases and users.

Add a new database. We'll connect our application to this database.

We need to add a new database user to this database to access it. Click on the people icon to manage database users.

Add a database user with password.

Creating a site

Visit the Sites tab and add a new site. The name of the site should match the domain of your site.

Connecting site to Github repository.

Click to manage the newly created site. To connect the site to Github, you need to connect your account to Github from your account applications page. Once connected, provide the repository and branch for the application. In this case, bahdcoder/strapi-nesabox-demo.

This process would take only a few seconds to clone and install your project repository.

Configuring PM2

PM2 is an advanced production ready process manager for Node.js applications. Nesabox creates an ecosystem.config.js file specific to your application on the server.
On the Site Settings tab, you can update this file to add execution commands, node versions, environment variables, log files and any other configurations supported by PM2.

On the Settings tab, when you click the Edit PM2 Ecosystem file, the ecosystem.config.js file for this site is fetched securely over SSH and placed in an editor for you to edit.

The first important configurations are the script:npm and args:start. This instructs PM2 to run the npm start command when starting or restarting the application in production.

Next, we have the interpreter configuration which is a path to the specific node version this app will run on. By default, it's the latest stable version.

We can also configure all environment variables for our project in the env object. The PORT environment variable is automatically generated by Nesabox. If you need to change this, then you also have to make sure the Nginx configuration proxies to your new port too.

For this application, all the environment variables really needed are database configurations. The DATABASE_NAME, DATABASE_USERNAME and DATABASE_PASSWORD all match the MongoDB credentials we created earlier.

Setting up deploy script

The Deploy Script is the script Nesabox runs on your server on every deployment. By default, it pulls the latest changes from the deployment branch, installs npm dependencies and restarts the application with PM2.

For this application, we'll need to build the application before starting it. We'll modify it as follows:

It simply runs the npm run build command before starting with PM2.

Deploy your application

To deploy, click deploy 🚀 ! You can monitor the deployment in real time too.

To view your application, be sure to point your site domain to your server.

🎉🎉🎉

BONUS - Secure your site with Let's Encrypt

On the SSL tab, with one click, you can secure your site with a Let's Encrypt SSL certificate.

🎉🎉🎉

Conclusion

Nesabox makes deployments and application management really easy. This article is just the tip of the iceberg. Please reach out with questions if you have any. Thank you for reading this far!

I do this all the time to reduce bugs in my javascript code #1

Kati Frantz — Thu, 27 Jun 2019 16:50:14 +0000

Have a look at the following code sample:

data.course.enrolments.forEach(enrolment => enrolment.confirm())

Sometimes the data we work with is not predictable, so to avoid errors or crashes we always have to take care of edge cases. The above code makes a lot of assumptions. It assumes that data.course exists, data.course.enrolments exists and is an array of objects with a confirm property which is a valid Function.

If the data.course or data.course.enrolments property is undefined we get the following TypeError error:

Uncaught TypeError: Cannot read property enrolments of undefined
Uncaught TypeError: Cannot read property forEach of undefined

If the confirm property in each enrolment object in the data.course.enrolments array is not a valid Function, we get the following error:

Uncaught TypeError: enrolment.confirm is not a function

Now have a look at this one:

((data.course || {}).enrolments || [])
    .forEach(enrolment => enrolment.confirm && enrolment.confirm())

I'll explain how the above snippet works.

`data.course || {}`

This expression resolves to data.course if the course property exists on the data object, and resolved to an {} if it doesn't. The reason it resolves to {} is because of the || operator which checks if the left-hand side of the expression (data.course) is falsy, and if it is, resolves the expression to the right-hand side ({}). If it's not falsy then it resolved the expression to the left-hand side.

`(data.course || {}).enrolments || [])`

As explained above, the left-hand side will either be data.course or {}. Next, we try to access the enrolments property on the object resolved from the first expression.

`enrolment.confirm && enrolment.confirm()`

Unlike the || operator, the && checks if the left-hand side of the expression (enrolment.confirm) is truthy, and if it is, resolves the expression to be the right-hand side (enrolment.confirm()). This means the function enrolment.confirm will never be executed if the confirm property is not found on the enrolment object.

Summary

Taking care of edge cases as you write your code can save you a lot of debugging time, and also prevent unexpected application crashes.

Free modern, project based HTML/CSS course for beginners

Kati Frantz — Sat, 04 May 2019 14:53:54 +0000

When I started out as a developer, I learnt so many HTML tags, and as many CSS rules as I could learn, but every time I built a website, it somehow did not end up looking like a website. To learn, I used to download free templates online, just to have a look at how they were built so I could learn.

Why the hell are there so many nested divs ? How do these people even think about such structures? It always felt like building websites was a complicated science. Well if you are at that point in your career, this course is for you.

I created a free, practical course to teach you how to implement this design this mockup, covering so much about implementing practical designs in HTML & CSS, with a little touch of flexbox, just enough to get you going as a developer.

Here's a list of things we'll learn in this short course:

How to get started setting up a new project
Moving from any design tool to HTML/CSS
How to build responsive layouts with flex box
Designing common web components
Design tips for more responsive web designs

And so much more.

Please share this course with someone who needs it 🔥.

Don't forget checkout my other free courses on my website

TESTING LARAVEL WORKSHOP FOR BEGINNERS 🎉🎉🎉

Kati Frantz — Sat, 02 Jun 2018 12:42:32 +0000

Hey friends 😀. I would love to announce an upcoming online workshop (happening on the Friday, 06 July 2018 12:00:00 PM GMT), meant to introduce testing of laravel applications.

If you've never had any experience testing laravel applications, this absolutely free workshop is for you.

Why am I doing this?

First, to give you some context, I have a really great course where I teach how to build simple to advanced laravel applications to absolute beginners.

A few days ago, I saw this job posting on VueSchool, looking for a laravel developer to manage their application.

I began to think about my students, who have considerable experience building laravel applications after taking my course, but would most likely not meet the requirements of the job 😔.

No matter what applications you've built, no company would hire you to manage their applications if you do not master the skill of testing applications.

That's why I'm doing this. I want to introduce you to testing. Teach you the basics. Everything you need to proceed thereon.

A mastery of this skill would massively improve the quality of the applications you build using the amazing Laravel Framework.

If you've never written a single test for your laravel applications, this workshop is for you. I'll be there live, teaching you from the beginner's steps, answering every question you have.

I've also been thinking of creating an online course laser-focused on testing laravel applications too 🤔, but I'll let you know if that thought still stands after the workshop.

Please tweet about this. Share it on your timeline. This is an opportunity to change someone's life somewhere. Let's make this happen together.

🙏🙏🙏

Announcing the complete React/Redux course 🎉🎉🎉

Kati Frantz — Sat, 19 May 2018 10:06:13 +0000

Hello good people ! Over the past 6 months, I've been working on a React/Redux course. I just published it (finally ! 😀), and I thought I'd share it with you. It's a great opportunity to master reactjs and redux, and also build a portfolio with these technologies.

GET THE COURSE USING THIS LINK AT 90% OFF (valid for a short time)

Here's the course description:

ReactJS is one of the most in-demand javascript frameworks, and its popularity keeps rising as more companies begin to adopt it. Have a look at the charts here on npm trends. It keeps getting popular, and there's no better time to add it to your portfolio. This course is the cumulation of everything you need to become a professional React developer.

Redux is a state management library and is very popular in the world of frontend development. In this course, you'll not just learn how to use Redux independently with vanilla Javascript, but you'll master the art of using this state management library hand in hand with React.

This course starts from the very basics, explaining exactly what React and Redux are, when and how to use it. The problem with most of the React community is lack of understanding of the fundamental principles. This course focuses on providing a very deep understanding of React and Redux.

GET THE COURSE USING THIS LINK AT 90% OFF (valid for a short time)

Thereafter, we'll go all the way from basic to advanced. We'll not just scratch the surface but dive deeply into React as well as popular libraries like React Router, and Redux Thunk.

By the end of the course, you'll be able to build almost any sort of single page application.

What will you build?

This course uses a project driven approach, which means you will learn by doing. In every single lesson, you'll learn something new, while building on real-world projects.

At the end of this course, you will build and deploy numerous real-world applications, thus having a complete portfolio in React and Redux. Here are some of the projects you'll build:

What should you bring to succeed in this course?

A basic understanding of HTML, CSS, and Javascript are required to succeed in this course.

GET THE COURSE USING THIS LINK AT 90% OFF (valid for a short time)

What will you learn?

You'll learn:

How to build an deploy real-world applications with React and Redux
Frontend state management with redux
Single page application routing with React router.
Asynchronous server communication in React / Redux applications using redux thunk.
Debugging React / Redux applications
Building powerful, fast and user-friendly reactive web applications.

GET THE COURSE USING THIS LINK AT 90% OFF (valid for a short time)

Who was this course built for?

This course is for you if:

You're just getting started with frontend / Javascript development and only JS basics set (No prior knowledge of ReactJS or any other frontend framework is required)
You know the basics of React and want to five deeper
You want to understand how ReactJS works with Redux
You want to build a portfolio with numerous ReactJS projects

GET THE COURSE USING THIS LINK AT 90% OFF (valid for a short time)