Context
The contents of .env files are used by Slate to set environment variables, which values are used to connect a developer to a Shopify store. The contents of a blank .env file looks something like:
# The myshopify.com URL to your Shopify store
SLATE_STORE=
# The API password generated from a Private App
SLATE_PASSWORD=
# The ID of the theme you wish to upload files too
SLATE_THEME_ID=
# A list of file patterns to ignore, with each list item seperated by ':'
SLATE_IGNORE_FILES=
For more information on the values mentioned above and how to manually get them, see Store/ Environment Configuration Tips
By default, Slate looks for and consumes the default env file named .env. Alternatively, a user can specify an alternative environment using the --env=[name] flag on a Slate command, which results in Slate looking for a file with the naming pattern of .env.[name]. For example, if the user specifies --env=production, Slate will look for a file named .env.production`.
Problem
Currently, a commented, empty .env file (as shown above) is generated automatically when using create-slate-theme. It is not generated when cloning an existing theme from a Git repo since we typically don't commit .env files to Git due to the sensitive information they contain.
The extremely manual experience for a user to fill out the values of a .env file leaves much to be desired. The default file has a few comments to help guide the user, but not much else to explain what they are doing. It would be great if we could provide the user with an interface to help them fill out these values.
Solution
Create an env command which starts a series of CLI prompts. These prompts would need to answer the following questions:
1. Does the user want to create a named or default environment file?
- Value will be used to name the
.env file appropriately.
- Validate the name provided to make sure it plays friendly with the filesystem and Slate.
2. What is the myshopify.com URL of the Shopify store they wish to connect too?
- Value will be used to fill in the
SLATE_STORE variable in our .env file.
- Validate that the URL provided is a myshopify.com URL
- Validate if the store exists by checking if the URL returns a 404
- Strip out any unneeded characters like
https://.
3. What is the API Password of the Private App on the specified store?
- Value will be used to fill in the
SLATE_PASSWORD variable in our .env file.
- Validate this value by attempting to make a request to the Theme API.
4. Which Theme would the user like to deploy too?
- Using the Theme API
/admin/themes.json endpoint, generate a list of themes which the user can select from.
- The id of the theme selected will be used to fill in the
SLATE_THEME_ID variable.
5. Would the user like to ignore deploying any files?
- The user should be able to input multiple values into this prompt, for example:
config/*json, submit, **/icon-*.liquid, submit.
- The values collected will be joined with the
: character and used to fill in the SLATE_IGNORE_FILES value.
Once the prompts are successfully answered, an .env file is generated in the root theme directory. There exists already a create method in the @shopify/slate-env package which can handle creating the file.
Context
The contents of
.envfiles are used by Slate to set environment variables, which values are used to connect a developer to a Shopify store. The contents of a blank .env file looks something like:For more information on the values mentioned above and how to manually get them, see Store/ Environment Configuration Tips
By default, Slate looks for and consumes the default env file named
.env. Alternatively, a user can specify an alternative environment using the--env=[name]flag on a Slate command, which results in Slate looking for a file with the naming pattern of.env.[name]. For example, if the user specifies--env=production, Slate will look for a file named.env.production`.Problem
Currently, a commented, empty
.envfile (as shown above) is generated automatically when usingcreate-slate-theme. It is not generated when cloning an existing theme from a Git repo since we typically don't commit.envfiles to Git due to the sensitive information they contain.The extremely manual experience for a user to fill out the values of a
.envfile leaves much to be desired. The default file has a few comments to help guide the user, but not much else to explain what they are doing. It would be great if we could provide the user with an interface to help them fill out these values.Solution
Create an
envcommand which starts a series of CLI prompts. These prompts would need to answer the following questions:1. Does the user want to create a named or default environment file?
.envfile appropriately.2. What is the myshopify.com URL of the Shopify store they wish to connect too?
SLATE_STOREvariable in our.envfile.https://.3. What is the API Password of the Private App on the specified store?
SLATE_PASSWORDvariable in our.envfile.4. Which Theme would the user like to deploy too?
/admin/themes.jsonendpoint, generate a list of themes which the user can select from.SLATE_THEME_IDvariable.5. Would the user like to ignore deploying any files?
config/*json, submit,**/icon-*.liquid, submit.:character and used to fill in theSLATE_IGNORE_FILESvalue.Once the prompts are successfully answered, an
.envfile is generated in the root theme directory. There exists already acreatemethod in the@shopify/slate-envpackage which can handle creating the file.