Part 2 - Web Development For Entrepreneurs Who Don't Know Where To Begin - Tutorial
Tags: webdev, beginners, serverless, javascript
Published: 2020-08-30 03:17:55

---
series: Web Development For Entrepreneurs Who Don't Know Where To Begin
---

# 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](https://vercel.com/docs/cli#getting-started) 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:

```js
//  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](https://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:

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

...to this:

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

...and add this `start` script:

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

Your `scripts` should now look like this:

```json
"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](https://rollupjs.org/guide/en/), which will perform a lot of nice optimizations, but which are unnecessary and time consuming during development. The `dev` script uses [Nollup](https://github.com/PepsRyuu/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](https://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:

```md
# 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.