Frontend App Configuration
- Clone the project repository to your machine
- Define environment variables
- Install the project dependencies and start the app
- Push your local changes to GitHub and the Atlas Platform
With your terminal open, run the following commands:
cd <directory_to_clone_into>git clone firstname.lastname@example.org:<your_username>/<your_repository>cd <your_repository>
This will clone your repository to a local folder to access for development and set it as your current directory. If you need additional guidance, you can reference GitHub's documentation on cloning repositories to your local machine. If you are new to using Git on the command line, GitHub provides a Desktop version that helps you manage your repos with a user interface.
With your repository cloned and set to the current directory in your terminal, open the codebase in a code editor. When your app was deployed to the Atlas platform, an environment variable file was automatically provisioned. Most apps rely on environment variable files to store critical information your app will rely on, like the URLs of backend APIs, API keys, or other configuration details that should not get checked into source control.
In the following steps, you will recreate that file in your local project for development.
- Faust.js, Next.js and SvelteKit apps typically use
- Gatsby apps typically use
- Nuxt.js environment variables are typically defined inside of your
nuxt.config.jsfile, or in a
.envfile if you're using the
If you're using another framework, please reference your framework's documentation to learn how to define environment variables.
You can create the file for Faust.js starter projects via the command line using the following command:
With your environment variable file created, you can access your live app
- In a web browser, log into the WP Engine User Portal. Click
Atlasin the sidebar, then click on the name of the Atlas app associated with this project.
Manage variablesunder the
Atlas environment variablesheading.
- On the
Variablespage that opens, toggle the
Hide all valuescontrol to the
- Copy and paste the
Valuepairs for each environment variable into your local environment variables file.
As an example, if your app has these two environment variables listed in the User Portal:
| Key | Value || ------------------------- | ---------------------------- || NEXT_PUBLIC_WORDPRESS_URL | https://my-site.wpengine.com || FAUSTWP_SECRET_KEY | ABC123 |
You would need to add them to your environment variables file (
.env.development/other) in this format:
To install your frontend app's npm dependencies, run the
npm install command in the terminal.
npm run dev will start your app in development mode and make it available at
localhost:3000 in a web browser.
If you are using another framework, you will need to reference that framework's docs or
Make some basic changes to your site locally: add a component, change the way posts or pages are displayed or update the site styles with your own CSS.
Once you are ready to push your changes, you can trigger a rebuild of your site by pushing to GitHub. A basic workflow assuming SSH configuration would look like this:
git add .# This command adds all of the changed files to Git for staginggit commit -m "A description of my changes"# This command commits my changes with a helpful but succinct messagegit push -v# This command will push your changes from your local machine to GitHub
-v or verbose flag should give you feedback in the terminal window after you run the command.
Once your changes are processed by GitHub, Atlas will automatically begin rebuilding your application based on your latest commit. If you open the User Portal in the browser, and navigate to the associated Atlas environment, you can get feedback regarding the build and deployment states of your app.
Once the app has successfully finished building and deploying, you will see a success message that looks like this:
If you Atlas build is not successful, you can reference our guide on troubleshooting Atlas builds for suggestions on how to work through a failing build.