When you make a deployment with ZEIT Now, the first step is the build step. Now recognizes a custom build script, with that build script outputting your app into the public directory.
Now also supports optimized frameworks that only need to be created and then they are ready to deploy with Now CLI from the terminal.
You are also able to use environment variables (including secrets) in your builds if you do not want to hardcode values for the build.
Optimized Frameworks
A variety of frameworks have been optimized for ZEIT Now. The following list contains those frameworks that have been optimized and what has been done to aid their performance only on Now. Any getting started method will immediately be ready to deploy with Now CLI's now command from the terminal, or to be deployed with a Git integration:
Framework | Get Started Command | Optimized |
|---|---|---|
Next.js | npm init next-app my-next-project | |
Create React App | npx create-react-app my-cra-project | |
Vue.js | npx @vue/cli create my-vue-project | |
Gatsby | npx gatsby-cli new my-gatsby-project | |
Nuxt.js | npx create-nuxt-app my-nuxt-project | |
Ember.js | npx ember-cli new my-ember-project | |
Svelte | npx degit sveltejs/template my-svelte-project | |
Preact | npx preact-cli create default my-preact-project | |
Angular | npx @angular/cli new my-angular-project | |
Polymer | npx polymer-cli init polymer-3-starter-kit | |
Gridsome | npx @gridsome/cli create my-gridsome-project | |
UmiJS | npm init umi my-umi-project | |
Docusaurus | npx docusaurus-init | |
Saber | npm init site my-saber-project |
Defining a Build Script
To build your project, Now looks for a build script inside of a package.json file. By providing a build script, Now will build your project from fresh on every deployment.
For example, to build Next.js fresh, each time you deploy, the following build script should be placed in the package.json:
{ ... "scripts": { "build": "next build" } }
An example package.json file with a build script that builds Next.js on each deploy.
Using Environment Variables and Secrets
When building your project, it may be necessary to use environment variables.
Adding environment variables requires two steps, defining the environment variable, then making it available to your projects' build step.
Adding Secrets
To define an environment variable, you should use Now Secrets. By using Now Secrets, the data will be encrypted and stored securely, no longer directly accessible by anyone, and only exposed to deployments as environment variables.
Adding Now Secrets can be done with Now CLI, providing three options to work with them.
To define a Now Secret, use the following command:
now secrets add <secret-name> <secret-value>
Defining a Now Secret using Now CLI.
To remove a Now Secret, use the following command:
now secrets rm <secret-name>
Removing a Now Secret using Now CLI.
To rename a Now Secret, use the following command:
now secrets rename <secret-name> <new-name>
Renaming a Now Secret using Now CLI.
Providing Environment Variables
To provide your project with environment variables during the build script, you should create a now.json file like the one below:
{ "build": { "env": { "VARIABLE_NAME": "@secret-name" } } }
An example now.json file that provides an application's build step with a defined environment variable.
To use the environment variable from inside the application you would need to reference it using the correct syntax for the language being used. For example, using Node.js, the syntax would be:
process.env.VARIABLE_NAME
Accessing a defined environment variable from within a Node.js application.
Now, whenever the process.env.VARIABLE_NAME key is used, it will provide the application's build step with the value declared by the referenced Now Secret.
Reserved Variables
The ZEIT Now platform reserves the usage of some environment variable names by default. You can find a list of these names in the configuration documentation.
Ignored Files and Folders
By default, ZEIT Now ignores certain files and folders for security and performance reasons, preventing them from being uploaded during the deployment process.
.hg .git .gitmodules .svn .cache .next .now .npmignore .dockerignore .gitignore .*.swp .DS_Store .wafpicke-* .lock-wscript .env .env.build .venv npm-debug.log config.gypi node_modules __pycache__/ venv/ CVS
A complete list of files and folders ignored by ZEIT Now during the deployment process.
.nowignore file.Technical Details
Maximum Build Duration
A build can last for a maximum of 30 minutes. If the build exceeds this time, the deployment will error.
Caching
Each build step will cache files used to build the project, or files used in subsequent deployments, such as node_modules, yarn.lock, package-lock.json, which are cached by default.
The caching mechanism for builds ensures that the next deployment will happen quicker by skipping downloading files that have already been used in a previous deployment.
The maximum stored cache for builds is 3Gb.
If a deployment fails, a cache may still be established for successfully built files, but failed builds will not be cached.
Prevent Cache Usage
If you need to ignore the cache for a deployment, you can do so by using the -f flag for Now CLI. This prevents the cache from being used in the deployment and ensures a fresh install for all dependencies.
Related
For more information on what to do next, we recommend the following articles: