Part 2 - Web Development For Entrepreneurs Who Don't Know Where To Begin - Tutorial

Tutorial

Let's get down to brass tacks. 

Git Repository

You can reference the finished code in the following GitHub repo. This is also a good place to look if the code in this tutorial contains typos.

https://github.com/SamuelEarl/where-to-begin-entrepreneurs

Step 1: Install

Routify

Create a directory to store your Routify code. You can name it whatever you want, it doesn't matter. In a terminal, cd into that directory and run:

npx @roxi/routify init

NOTE: The Routify team recently migrated everything from their @sveltech repo to their @roxi repo, so there might still be some packages in your project that reference @sveltech. For example, if you have the @sveltech/routify package installed in package.json instead of the @roxi/routify package, then you will need to delete the directory you created, recreate it, and then run the following command (which specifies the 2.x branch):

npx @roxi/routify init --branch 2.x

Vercel Serverless Functions

Install the Vercel CLI on your computer:

npm i -g vercel

Step 2: Run in development mode

Let's setup our serverless functions first, then we'll run everything in dev mode.

Vercel Serverless Functions

1. Inside your Routify project create a directory called api at the root of the project (i.e. at the top level of the project).
2. Create a example.js file inside the api directory and enter the following code into that file:

//  api/example.js

module.exports = (req, res) => {
  try {
    res.json({
      body: req.body,
      query: req.query,
    });
  }
  catch(err) {
    console.log("example.js Error:", err);
    res.status(500).json(err);
  }
};

Link your local project to your Vercel account

1. Go to Vercel.com and create a free account.
2. In a terminal, navigate to the root directory of your project.
3. Type vercel login and press Enter. Vercel will send you a confirmation email to login to Vercel through the CLI.
4. Back in your terminal, type vercel and press Enter. The Vercel CLI will run and prompt you to link your local project to your Vercel account.
5. Follow the prompts and answer the following questions:
   1. Set up and develop: [y/n] Press y.
   2. Which scope do you want to deploy to? If you have an existing scope listed, then select it. Otherwise, create a new scope.
   3. Link to existing project? [y/n] Press n.
   4. What’s your project’s name? Press Enter to use the name of your project directory as the project name or type a different name and press Enter.
   5. In which directory is your code located? ./ Press Enter to accept the default location.
   6. Want to override the settings? [y/n] Press y.
      1. Which settings would you like to overwrite (select multiple)? Select Output Directory and Development Command by pressing the spacebar next to each one, then press Enter.
      2. What’s your Output Directory? Type dist and press Enter.
      3. What’s your Development Command? Type npm run dev and press Enter.

After your local project has been linked to your Vercel account, Vercel will build and deploy your project to a Vercel subdomain. We won't focus on deployment right now.

How to run Routify and Vercel serverless functions together in dev mode

In order to get Routify and Vercel serverless functions running together in dev mode you have to change your npm scripts. In your package.json file, change these scripts:

"dev": "run-p routify rollup",
"dev:nollup": "run-p routify nollup",

...to this:

"scripts": {
  "dev": "run-p routify nollup",
  "dev:rollup": "run-p routify rollup",
  ...
},

...and add this start script:

"scripts": {
  "start": "vercel dev",
  ...
},

Your scripts should now look like this:

"scripts": {
  "start": "vercel dev",
  "dev": "run-p routify nollup",
  "dev:rollup": "run-p routify rollup",
  ...
},

NOTES:

• You have to use vercel dev (from the Vercel CLI) to run the serverless functions dev server. But if you put vercel dev in a script that has the key dev, then you will get errors. So you need to put it in a script with a different key, like start.
• The dev:rollup script uses Rollup, which will perform a lot of nice optimizations, but which are unnecessary and time consuming during development. The dev script uses Nollup (which is a fork of Rollup and is designed for development) and has much faster browser reloads for development.
• Nollup does not work with SSR in development mode. If you need to test SSR, you can run npm run dev:rollup. (See https://routify.dev/blog/1.8-beta).
• Now you can run your code in dev mode with the npm start command.

In your terminal, make sure that you are in your project root directory and run npm start. Routify and Vercel will take a moment to launch the dev servers. After they are ready, open your browser and go to http://localhost:5000 to see your project in the browser.

The dev server for your serverless functions will be listening on port 3000. You can change the default port with vercel dev --listen <PORT_NUMBER>.

Troubleshooting Tip

I have run into this error on occasion during development:

Error! Detecting port 35748 timed out after 300000ms
Unhandled rejection: Error: Detecting port 35748 timed out after 300000ms
...

If you ever see the following error, you can examine the stack trace and see that this error comes from the vercel dev command. If you try to run npm start again you will get another error saying that port 5000 is already in use. So you have to kill the process that is running on port 5000 (the Routify dev server) before you can run npm start again.

I use Linux and on Linux (and probably Mac) you can run this command in your terminal to kill the process that is running on a specific port:

fuser -k 5000/tcp

Once that process has been killed you can run npm start.

Step 3: Configure Git

Doing a complete walk-through of Git is beyond the scope of this particular tutorial, but there are plenty of resources to help you get started with Git.

In this step you should go to your favorite Git host (GitHub, Bitbucket, GitLab) and create one repository for your Routify code and another repo for your Vercel serverless functions code. You can name the repos anything you want, but make sure that the names reflect the project you are creating.

Make sure to connect your local code to your remote repo and push your code to your remote repo.

Step 4: Deploy to Vercel's hosting platform

You have already deployed your project to Vercel when you typed vercel in your terminal. That's great! You're already ahead of the curve. You can deploy your project anytime you type vercel in your terminal while inside your project root. Also, if you connect your Vercel project with your Git repository, then each time you push your code to your master branch a new deployment will be created. This is called a "continuous deployment".

It is important to deploy your code early in the development process to make sure that everything is working properly. You should also deploy your code periodically to test it and make sure that your deployments are still working. There is nothing worse than coming to the end of a project only to find a bunch of errors that prevent you from launching your project.

In your Vercel dashboard (on Vercel.com) you can click on the name of the project that you deployed to see a deployment preview. Let's connect our Vercel project with a Git repository to enable continuous deployments.

Below the deployment preview you will see the text “Connect your Project with a Git repository to create a Production Deployment.” Click the button “Connect Git Repository” to the right of that text and follow the prompts. If you get any errors during the process, then Vercel will offer some pretty good error messages to help you along the way.

After you have connected your Git repo to your Vercel project, make a change in your code. At the top of the REAMD.md file add the name of your project, like this:

# Name of This Project

Now add, commit, and push your changes up to your remote repo's master branch. Since your Vercel project is now connected to your Git repos, your code will automatically be deployed again. Just wait for the build to complete and you should be good to go.

If you see any deployment errors, then click the “Deployments” tab and try to find out what is happening. There should be some messages that give you some insight as to what might be happening. Also, you can get help in the support forums.

Conclusion

That's it for Part 2. In Part 3 I will show you how to configure a few things that will make your life a little easier.