|
| 1 | +--- |
| 2 | +title: Deploying Express on Upsun |
| 3 | +sectionBefore: Javascript/Node.js |
| 4 | +sidebarTitle: Express |
| 5 | +weight: -100 |
| 6 | +layout: single |
| 7 | +description: | |
| 8 | + Complete the last required steps to successfully deploy Express on {{% vendor/name %}}. |
| 9 | +--- |
| 10 | + |
| 11 | +{{< note title="Note" theme="info" >}} |
| 12 | + |
| 13 | +Before you start, check out the [{{% vendor/name %}} demo app](https://console.upsun.com/projects/create-project) and the main [Getting started guide](/get-started/here/_index.md). |
| 14 | +They provide all of the core concepts and common commands you need to know before using the materials below. |
| 15 | + |
| 16 | +{{< /note >}} |
| 17 | + |
| 18 | +{{% guides/requirements name="Express" %}} |
| 19 | + |
| 20 | +## 1. Create an Express app |
| 21 | + |
| 22 | +To create your Express app, follow these steps. |
| 23 | + |
| 24 | +1. Follow the Express [installation guide](https://expressjs.com/en/starter/installing.html). |
| 25 | + To fast track the process, run the following commands: |
| 26 | + |
| 27 | + ```bash {location="Terminal"} |
| 28 | + mkdir my-express-app && cd my-express-app |
| 29 | + npx express-generator |
| 30 | + ``` |
| 31 | + |
| 32 | +2. To initialize the local Git repository and commit local files, run the following commands: |
| 33 | + |
| 34 | + ```bash {location="Terminal"} |
| 35 | + git init |
| 36 | + echo "node_modules" >> .gitignore |
| 37 | + git add . |
| 38 | + git commit -m "Init Express application." |
| 39 | + ``` |
| 40 | + |
| 41 | +{{< note theme="info" >}} |
| 42 | +You can view your running app locally by installing dependencies (`npm install`) and running `npm run dev`. |
| 43 | +The local server is visible at `localhost:3000`. |
| 44 | +{{< /note >}} |
| 45 | + |
| 46 | +## 2. Create a new project |
| 47 | + |
| 48 | +To create a project on {{% vendor/name %}}, |
| 49 | +follow these steps. |
| 50 | + |
| 51 | +{{< note title="Remember" >}} |
| 52 | +After creating your {{% vendor/name %}} project, copy your new **project ID** for later use. |
| 53 | +{{< /note >}} |
| 54 | + |
| 55 | +{{< codetabs >}} |
| 56 | ++++ |
| 57 | +title=Using the CLI |
| 58 | ++++ |
| 59 | +To create a new project with the {{% vendor/name %}} CLI, use the following command and follow the prompts: |
| 60 | + |
| 61 | +```bash {location="Terminal"} |
| 62 | +{{% vendor/cli %}} project:create |
| 63 | +``` |
| 64 | + |
| 65 | +{{< note >}} |
| 66 | + |
| 67 | +When creating a new project using the {{% vendor/name %}} CLI command `project:create`, |
| 68 | +you are asked if you want to set the local remote to your new project. Enter **Yes (y)**. |
| 69 | + |
| 70 | +Your local source code is automatically linked to your newly created {{% vendor/name %}} project |
| 71 | +through the creation of a `.{{% vendor/cli %}}/local/project.yaml`. |
| 72 | +This file contains the corresponding `<projectId>` for the {{% vendor/name %}} CLI to use, |
| 73 | +and sets a Git remote to `{{% vendor/cli %}}`. |
| 74 | + |
| 75 | +{{< /note >}} |
| 76 | + |
| 77 | +<---> |
| 78 | ++++ |
| 79 | +title=Using the Console |
| 80 | ++++ |
| 81 | + |
| 82 | +1. Create an organization or select an existing one. |
| 83 | + |
| 84 | +2. Click **Create from scratch**. |
| 85 | + |
| 86 | +3. Fill in details like the project name and [region](/development/regions.md). |
| 87 | + |
| 88 | + {{% note %}} |
| 89 | + |
| 90 | + You can define resources for your project later on, after your first push. |
| 91 | + |
| 92 | + {{% /note %}} |
| 93 | + |
| 94 | +4. To link your local source code to your new {{% vendor/name %}} project, |
| 95 | + run the following command: |
| 96 | + |
| 97 | + ```bash {location="Terminal"} |
| 98 | + {{% vendor/cli %}} project:set-remote <projectId> |
| 99 | + ``` |
| 100 | + |
| 101 | + This command adds a new remote called `{{% vendor/cli %}}` to your local Git repository, |
| 102 | + which is equivalent to the following commands: |
| 103 | + |
| 104 | + ```bash {location="Terminal"} |
| 105 | + git remote |
| 106 | + origin |
| 107 | + {{% vendor/cli %}} |
| 108 | + ``` |
| 109 | + |
| 110 | + It also creates a new `.{{% vendor/cli %}}/local/project.yaml` file that contains the `<projectId>` |
| 111 | + for the `{{% vendor/cli %}}` CLI to use. |
| 112 | + |
| 113 | + {{< note theme="info" title="Tip" >}} |
| 114 | + |
| 115 | + If you forget your `<projectId>`, run the following command and find your project in the list: |
| 116 | + |
| 117 | + ```bash {location="Terminal"} |
| 118 | + {{% vendor/cli %}} project:list |
| 119 | + ``` |
| 120 | + {{< /note >}} |
| 121 | + |
| 122 | +{{< /codetabs >}} |
| 123 | + |
| 124 | +## 3. Choose your Git workflow |
| 125 | + |
| 126 | +You can use {{% vendor/name %}} projects as a classic Git repository, |
| 127 | +where you are able to push your source code in different ways, |
| 128 | +using either the Git CLI or the {{% vendor/name %}} CLI. |
| 129 | +You can choose which way —or Git workflow— you want to use for your project from the following options: |
| 130 | + |
| 131 | +- Your project source code is **hosted on a {{% vendor/name %}} Git repository** |
| 132 | +- Your project source code is **hosted on your own GitHub repository** |
| 133 | + |
| 134 | +{{< codetabs >}} |
| 135 | ++++ |
| 136 | +title={{% vendor/name %}} Git repository |
| 137 | ++++ |
| 138 | +For the rest of this guide, you will use the normal Git workflow (`git add . && git commit -m "message" && git push {{% vendor/cli %}}`) to commit your source code changes to Git history. |
| 139 | +You will also use the {{% vendor/name %}} CLI to deploy your [{{% vendor/name %}} environment](/environments.html) with the latest code updates. |
| 140 | + |
| 141 | +<---> |
| 142 | ++++ |
| 143 | +title=GitHub repository |
| 144 | ++++ |
| 145 | +{{% vendor/name %}} provides a [Github integration](integrations/source/github.md) that allows your {{% vendor/name %}} project to be fully integrated with your Github repository. |
| 146 | +This enables you, as a developer, to use a normal Git workflow (`git add . && git commit -m "message" && git push`) to deploy your environment—with no need to connect to the {{% vendor/name %}} Console. |
| 147 | + |
| 148 | +{{< note >}} |
| 149 | +Make sure you complete the following steps before adding a [Github integration](integrations/source/github.md): |
| 150 | + |
| 151 | +1. Create a Git repository in your own organization following the relevant [Github repository creation guide](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-new-repository). |
| 152 | +2. Create a [Github integration](integrations/source/github.md). |
| 153 | +3. Add a Git remote to your local project, from the root of your Express directory.</br> |
| 154 | + To do so, run the following commands: |
| 155 | + |
| 156 | + ```bash {location="Terminal"} |
| 157 | + git remote add origin <urlOfYourOwnGitHubRepo> |
| 158 | + git add . && git commit -m "init express" |
| 159 | + git push origin |
| 160 | + ``` |
| 161 | +{{< /note >}} |
| 162 | + |
| 163 | +{{< /codetabs >}} |
| 164 | + |
| 165 | +## 4. Configure your project |
| 166 | + |
| 167 | +To host your Express application on {{% vendor/name %}}, |
| 168 | +you need to have a few YAML configuration files at the root of your project. |
| 169 | +These files manage your app's behavior. |
| 170 | +They are located in a `.{{% vendor/cli %}}/` folder at the root of your source code |
| 171 | +and structured in a similar way to this: |
| 172 | +
|
| 173 | +```txt |
| 174 | +my-express-app |
| 175 | +├── .{{% vendor/cli %}} |
| 176 | +│ └── config.yaml |
| 177 | +├── [.environment] |
| 178 | +└── <project sources> |
| 179 | +``` |
| 180 | +
|
| 181 | +To generate these files, run the following command at the root of your project: |
| 182 | +
|
| 183 | +``` {location="Terminal"} |
| 184 | +{{% vendor/cli %}} project:init |
| 185 | +``` |
| 186 | +
|
| 187 | +Follow the prompts. |
| 188 | +
|
| 189 | +To commit your new files, run the following commands: |
| 190 | +
|
| 191 | +```bash {location="Terminal"} |
| 192 | +git add . |
| 193 | +git commit -m "Add {{% vendor/name %}} config files" |
| 194 | +``` |
| 195 | +
|
| 196 | +## 5. Deploy |
| 197 | +
|
| 198 | +And just like that, it’s time to deploy! |
| 199 | +
|
| 200 | +Depending on the Git workflow you chose at the beginning of this tutorial, |
| 201 | +there are two ways to deploy your source code changes. |
| 202 | +
|
| 203 | +{{< codetabs >}} |
| 204 | +
|
| 205 | ++++ |
| 206 | +title=Using {{% vendor/name %}} Git repository |
| 207 | ++++ |
| 208 | +
|
| 209 | +You can push your code using the normal Git workflow (`git add . && git commit -m "message" && git push`). This pushes your source code changes to your `{{% vendor/cli %}}` remote repository. Alternatively, you can use the following {{% vendor/name %}} CLI command: |
| 210 | +
|
| 211 | +```bash {location="Terminal"} |
| 212 | +{{% vendor/cli %}} push |
| 213 | +``` |
| 214 | +
|
| 215 | +<---> |
| 216 | ++++ |
| 217 | +title=Using a third-party Git repository |
| 218 | ++++ |
| 219 | +
|
| 220 | +When you choose to use a third-party Git hosting service, the {{< vendor/name >}} Git |
| 221 | +repository becomes a read-only mirror of the third-party repository. All your |
| 222 | +changes take place in the third-party repository. |
| 223 | +
|
| 224 | +Add an integration to your existing third-party repository: |
| 225 | +
|
| 226 | +- [BitBucket](/integrations/source/bitbucket.md) |
| 227 | +- [GitHub](/integrations/source/github.md) |
| 228 | +- [GitLab](/integrations/source/gitlab.md) |
| 229 | +
|
| 230 | +If you are using an integration, on each code updates, |
| 231 | +use the normal Git workflow (`git add . && git commit -m "message" && git push`) to push your code to your external repository. |
| 232 | +To do so, run the following command: |
| 233 | +
|
| 234 | +```bash {location="Terminal"} |
| 235 | +git push origin |
| 236 | +``` |
| 237 | +
|
| 238 | +Your GitHub, GitLab, or Bibucket integration process then automatically deploys changes to your environment. |
| 239 | +If you're pushing a new Git branch, a new environment is created. |
| 240 | + |
| 241 | +{{< /codetabs >}} |
| 242 | + |
| 243 | +{{% vendor/name %}} then reads your configuration files, |
| 244 | +and deploys your project using [default container resources](/manage-resources/resource-init.md). |
| 245 | +If you don't want to use those default resources, |
| 246 | +define your own [resource initialization strategy](/manage-resources/resource-init.md#define-a-resource-initialization-strategy), |
| 247 | +or [amend those default container resources](/manage-resources/adjust-resources.md) after your project is deployed. |
| 248 | +
|
| 249 | +Et voilà, your Express application is live! |
| 250 | +
|
| 251 | +{{< note title="Tip" theme="info" >}} |
| 252 | +
|
| 253 | +Each environment has its own domain name. |
| 254 | +To open the URL of your new environment, run the following command: |
| 255 | +
|
| 256 | + ```bash {location="Terminal"} |
| 257 | + {{% vendor/cli %}} environment:url --primary |
| 258 | + ``` |
| 259 | +{{< /note >}} |
| 260 | +
|
| 261 | +## 6. Make changes to your project |
| 262 | +
|
| 263 | +Now that your project is deployed, you can start making changes to it. |
| 264 | +For example, you might want to fix a bug or add a new feature. |
| 265 | +
|
| 266 | +In your project, the `main` branch always represents the production environment. |
| 267 | +Other branches are for developing new features, fixing bugs, or updating the infrastructure. |
| 268 | +
|
| 269 | +To make changes to your project, follow these steps: |
| 270 | +
|
| 271 | +1. Create a new environment (a Git branch) to make changes without impacting production: |
| 272 | +
|
| 273 | + ```bash {location="Terminal"} |
| 274 | + {{% vendor/cli %}} branch feat-a |
| 275 | + ``` |
| 276 | +
|
| 277 | + This command creates a new local `feat-a` Git branch based on the main Git branch, |
| 278 | + and activates a related environment on {{< vendor/name >}}. |
| 279 | + The new environment inherits the data (service data and assets) of its parent environment (the production environment here). |
| 280 | +
|
| 281 | +2. Make changes to your project. |
| 282 | + For example, edit the `views/index.jade` file and make the following changes: |
| 283 | +
|
| 284 | + ```diff |
| 285 | + diff --git a/views/index.jade b/views/index.jade |
| 286 | + index 3d63b9a..77aee43 100644 |
| 287 | + --- a/views/index.jade |
| 288 | + +++ b/views/index.jade |
| 289 | + @@ -2,4 +2,4 @@ extends layout |
| 290 | + |
| 291 | + block content |
| 292 | + h1= title |
| 293 | + - p Welcome to #{title} |
| 294 | + + p Welcome to #{title} on Upsun |
| 295 | + `` |
| 296 | +
|
| 297 | +3. Commit your changes: |
| 298 | +
|
| 299 | + ```bash {location="Terminal"} |
| 300 | + git add views/index.jade |
| 301 | + git commit -m "Update index page view." |
| 302 | + ``` |
| 303 | +
|
| 304 | +4. Deploy your changes to the `feat-a` environment: |
| 305 | +
|
| 306 | + ```bash {location="Terminal"} |
| 307 | + {{% vendor/cli %}} push |
| 308 | + ``` |
| 309 | +
|
| 310 | +5. Iterate by changing the code, committing, and deploying. |
| 311 | + When satisfied with your changes, merge them to the main branch, |
| 312 | + and remove the feature branch: |
| 313 | +
|
| 314 | + ```bash {location="Terminal"} |
| 315 | + {{% vendor/cli %}} merge |
| 316 | + Are you sure you want to merge feat-a into its parent, main? [Y/n] y |
| 317 | + {{% vendor/cli %}} checkout main |
| 318 | + git pull {{% vendor/cli %}} main |
| 319 | + {{% vendor/cli %}} environment:delete feat-a |
| 320 | + git fetch --prune |
| 321 | + ``` |
| 322 | + |
| 323 | + Note that deploying to production is fast because the image built for the `feat-a` environment is reused. |
| 324 | +
|
| 325 | + For a long running branch, to keep the code up-to-date with the main branch, use `git merge main` or `git rebase main`. |
| 326 | + You can also keep the data in sync with the production environment by using `{{% vendor/cli %}} env:sync`. |
| 327 | +
|
| 328 | +## Further resources |
| 329 | +
|
| 330 | +### Documentation |
| 331 | +
|
| 332 | +- [JavaScript/Node.js documentation](/languages/nodejs/) |
| 333 | +- [Managing dependencies](/languages/nodejs#dependencies) |
| 334 | +- [Add a database to Express](/get-started/stacks/express/add-database) |
| 335 | +
|
| 336 | +### Community content |
| 337 | +
|
| 338 | +- [ExpressJS topics](https://support.platform.sh/hc/en-us/search?utf8=%E2%9C%93&query=express) |
| 339 | +- [Node.js topics](https://support.platform.sh/hc/en-us/search?utf8=%E2%9C%93&query=node) |
| 340 | +- [JavaScript topics](https://support.platform.sh/hc/en-us/search?utf8=%E2%9C%93&query=js) |
| 341 | +
|
| 342 | +### Blogs |
| 343 | +
|
| 344 | +- [A quick-start guide on hosting Express on Upsun](https://upsun.com/blog/setting-up-express-on-upsun/) |
0 commit comments