{"id":13417790,"url":"https://github.com/ProjectEvergreen/create-evergreen-app","last_synced_at":"2025-03-15T02:31:46.745Z","repository":{"id":50921662,"uuid":"149903256","full_name":"ProjectEvergreen/create-evergreen-app","owner":"ProjectEvergreen","description":"Get up and running with an evergreen web application development stack designed by, and for, today's modern web. ","archived":true,"fork":false,"pushed_at":"2021-05-27T16:33:38.000Z","size":6352,"stargazers_count":16,"open_issues_count":27,"forks_count":5,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-13T17:21:34.704Z","etag":null,"topics":["babel","evergreen","lit-element","lit-html","modern-web","webcomponents","webpack"],"latest_commit_sha":null,"homepage":"https://projectevergreen.github.io/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ProjectEvergreen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-22T18:04:01.000Z","updated_at":"2023-01-28T08:38:25.000Z","dependencies_parsed_at":"2022-08-28T10:11:37.151Z","dependency_job_id":null,"html_url":"https://github.com/ProjectEvergreen/create-evergreen-app","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProjectEvergreen%2Fcreate-evergreen-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProjectEvergreen%2Fcreate-evergreen-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProjectEvergreen%2Fcreate-evergreen-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ProjectEvergreen%2Fcreate-evergreen-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ProjectEvergreen","download_url":"https://codeload.github.com/ProjectEvergreen/create-evergreen-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221532151,"owners_count":16838904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","evergreen","lit-element","lit-html","modern-web","webcomponents","webpack"],"created_at":"2024-07-30T22:00:52.678Z","updated_at":"2024-10-26T12:30:56.467Z","avatar_url":"https://github.com/ProjectEvergreen.png","language":"JavaScript","funding_links":[],"categories":["Starter Kits"],"sub_categories":[],"readme":"# create-evergreen-app\n[![GitHub release](https://img.shields.io/github/tag/ProjectEvergreen/create-evergreen-app.svg)](https://github.com/ProjectEvergreen/create-evergreen-app/tags)\n![CircleCI branch](https://img.shields.io/circleci/project/github/ProjectEvergreen/create-evergreen-app/master.svg?style=plastic)\n[![GitHub issues](https://img.shields.io/github/issues-raw/ProjectEvergreen/create-evergreen-app.svg)](https://github.com/ProjectEvergreen/create-evergreen-app/issues)\n[![GitHub issues](https://img.shields.io/github/issues-pr-raw/ProjectEvergreen/create-evergreen-app.svg)](https://github.com/ProjectEvergreen/create-evergreen-app/issues)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/ProjectEvergreen/create-evergreen-app/master/LICENSE.md)\n\n\u003e ⛔ _**Attention**_\n\u003e _This project has been archived and is no longer under active maintenance.  If you are looking for a great tool for building websites and apps, please join us with our latest project [**Greenwood**](https://www.greenwoodjs.io/)!_ 🌟\n\n## Overview\nA starter project for getting up and running with an evergreen web application development stack designed by, and for, today's modern web.\n![Create Evergreen App](https://s3.amazonaws.com/uploads.thegreenhouse.io/project-evergreen/create-evergreen-app-github-repo-banner-0.4.0.png)\n\n### Project Goals\nThe goal of Project Evergreen is to march alongside the web and demonstrate those features in projects like these, that can be a reference and starting point, so that both developers and users can benefit from a modern application intended for modern browsers.  Evergreen Web Applications aim to be performant, promote usage of modern web features, be accessible to a wide range of users, and be a productive experience for developers.\n\n## Getting Started\nMake sure you have a LTS version of [Node.js](https://nodejs.org/) (\u003e= 10.x) and then follow these steps to get up and running:\n```shell\n# 1) Create new evergreen app\n$ npx create-evergreen-app my-app\n\n# 2) Change Directory\n$ cd my-app\n\n# 3) Start developing!\n$ npm start\n\n# or\n\n$ yarn start\n```\n\nYou can also run the installer locally by cloning the repo and using NodeJS\n```shell\n$ git clone https://github.com/ProjectEvergreen/create-evergreen-app.git\n$ cd create-evergreen-app\n$ npm ci # install project dependencies\n$ node ./tasks/cea-install.js my-app # you can pass other supported CLI params here as well\n$ mv my-app /where/ever/you/want # move my-app folder anywhere you want, and start developing!\n```\n\n### Additional CLI Commands\nHere are some additional commands you can use when running the installer\n```shell\n# install dependencies with Yarn instead of npm\n$ npx create-evergreen-app my-app --yarn\n\n# get help\n$ npx create-evergreen-app --help\n\n# get the version\n$ npx create-evergreen-app --version\n```\n\n## Developing with Create Evergreen App\nTo start developing, simply open the _my-app_ folder in your favorite IDE ([VSCode](https://code.visualstudio.com/) has great modern JavaScript support) and start editing  and adding files as you need in `src/`.\n\n### Development Workflows\nAutomated tasks have been made available as **npm** scripts that you can run from the command line using `yarn` or `npm run`:\n- `develop` - To start a development server with live reload and file watching\n- `build` - Generate a production build of the app for deployment\n- `serve` - Locally serve a production build\n- `test` - Run unit tests in TDD mode (prepend with `NODE_ENV=production` for \"single run\" usage)\n- `start` - alias to the `develop` task\n\ne.g. to start developing, run\n```shell\n# yarn\n$ yarn develop\n\nor\n\n# npm\n$ npm run develop\n```\n\n### Package Management\nYour team may choose to use either **npm** or **Yarn**, just make sure to pick one and remove the other manager's lock file.  Make sure to update the lock file whenever adding / removing a package.\n\n### Guides\nThese are some guides related to configuring different parts of this application to customize it for your needs.\n\n#### Folder Structure\nThere is no right or wrong folder structure per se as with most decisions relating to technology, it's about finding the best tool for the job.  Pick the conventions that fit your team / project best.\n\nThat said, CEA does come with with a lightly opinionated structure in the _src/_ directory as one of the main goals of a good folder structure should be to assist in the finding of  files / code faster and being predicatable.  Here is some info on the approach presented / suggested in this repo:\n- _index.js_ - Main Entry point into the application (defined in _webpack.config.common.js_)\n- _index.html_ - Defines the HTML \"shell\" of the application.\n- _app/_ - The top level \"app\" component, that will be used to bootstrap the application.\n- _components/_ - Essentially all the custom elements for an app will go here, encapsulating all reusable UI logic.\n- _pages/_ - Routable states and / or views that users will navigate to within an application.\n- _services/_ - Utilities for making (RESTful) API calls, convenience \"wrappers\" around browser APIs (Web Storage), etc.  These generally don't interact with the DOM (that's what components are for).\n\n\u003e Unit tests are recommended to be kept side by side with the component / `class` / etc.  For integration and E2E tests, consider making a _test/_ directory alongside the _src/_ directory and put those tests there.\n\n#### Setting Up (API) Proxies\nIn _webpack.config.develop.js_ and _lws.config.js_ are sections for setting up proxies for routing requests, say to an API running in your development envrionment.  Edit the placeholders to match your particular needs.\n\n#### CSS + Shadow DOM\n// TODO\n\n#### Performance\nPerformance is an important consideration for developing and maintaing any modern web application.  Out of the box, this project uses **webpack**'s [default settings for performance budgets](https://webpack.js.org/configuration/performance/) and will error when its thresholds are exceeded.\n\nThe goal of this project will be to support good code splitting and lazy loading strategies by default to allow apps to scale horizontally as more pages / features / dependencies get added.\n\nTo learn more about performance best practices for modern web application development, check out the [wiki](https://github.com/ProjectEvergreen/create-evergreen-app/wiki/Performance).\n\n#### Unit Testing\nFor convenience, Create Evergreen App comes with the dependencies needed to run two browsers out of the box\n1. Chrome (headless w/[Puppeteer](https://github.com/GoogleChrome/puppeteer/))\n1. Firefox\n\n**Using Firefox**\n1. Firefox (and other browsers) will likely need Custom Elements and Shadow DOM polyfilled.  To add this polyfill in Karma, uncomment the lines in the `files` array in _karma.conf.js_ related to  `~@webcomponents`.\n1. Add Firefox to the `browsers` array in _karma.conf.js_.\n\n- For information on adding more browsers, see [the Karma docs](http://karma-runner.github.io/3.0/config/browsers.html).\n- For more information on testing in general, see [our wiki!](https://github.com/ProjectEvergreen/create-evergreen-app/wiki).\n\n\u003e Chrome headless is enabled by default since it is the most portable between local and continuous integration environments.\n\n## Acknowledgements\nThis project is made by possible with the much appreciated existence of tools like:\n- [webpack](https://webpack.js.org/)\n- [LitElement](https://github.com/Polymer/lit-element)\n- [Babel](https://babeljs.io/)\n- [PostCSS](https://github.com/postcss/postcss)\n- [Browserslist](https://github.com/browserslist/browserslist)\n- [WebComponents.org](https://www.webcomponents.org/)\n\nAnd of course, nods and kudos go out to the maintainers of [Create React App](https://github.com/facebook/create-react-app) (CRA) and Pascal Shlip (@thepassle) of [Create Lit App](https://github.com/thepassle/create-lit-app) for the inspiration.\n\nThank you, to all of you!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FProjectEvergreen%2Fcreate-evergreen-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FProjectEvergreen%2Fcreate-evergreen-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FProjectEvergreen%2Fcreate-evergreen-app/lists"}