FrontEnd.ro's open-source codebase and curriculum
FrontEnd.ro is an open-source & community driven initiative to teach FrontEnd development. Read more on the website and please share the news ^^^
Install & Run
- Install all the dependencies by running
yarnin the root folder.
- Create a
.envfile in root and fill in the following content
; Environment based config NODE_CONFIG_ENV=local-client ; Custom config dirs NODE_CONFIG_DIR=server/config ; Used only when developing locally NODE_ENV=development
yarn dev:client. This will run only the FrontEnd locally and connect you to the development server.
- If you want to do server-side work you're gonna need to run the server and MongoDB on your local machine as well. For this to happen you're gonna need to add the following variables inside
; Environment based config NODE_CONFIG_ENV=local-both ; Custom config dirs NODE_CONFIG_DIR=server/config ; AUTH TOKEN_SECRET= ; DB DB_CONNECT= ; AWS AWS_BUCKET= ; EMAIL EMAIL_TOKEN= ; GITHUB GITHUB_CLIENT_ID= GITHUB_CLIENT_SECRET= ; Used only when developing locally NODE_ENV=development
Then provision the DB (see next step) and run the local server using
yarn dev. Get in touch with us for more details at firstname.lastname@example.org.
If you wanna fully run the app on your local machine, you'll have to provision a MongoDB database yourself.
Have a look at the
server/_provisioning folder. It's still work in progress, but you'll find there some scripts which will make it easier to insert data in bulk, for your local environment.
Database Dump, Restore and Backup
To reduce costs we're currently doing manual dumps and backup of our MongoDB database.
Dump & Restore
We're using the MongoDB Database Tools, specifically mongodump and mongorestore.
We have 2 NPM scripts
yarn mongodump yarn mongorestore
that we use for dump/restore. We "hook" into the same
.env file to get the
DB_CONNECT string and the
Both of them assume that MongoDB Tools is already installed. Have a look here for instructions depending on your OS.
For backup we're storing the dumps on AWS S3 by using the AWS Cli v2.
We have an NPM script that reads from
.env and calls a specific cli command.
This doesn't work unless you're authenticated into AWS Cli with a pair Access key ID / Secret access key that has Write permission to our S3 bucket.
NextJS is incompatible with the default way of loading monaco-editor (via Webpack and
monaco-editor-webpack-plugin). It fails when monaco tries to load it's CSS from node_modules: https://nextjs.org/docs/messages/css-npm.
All solutions to this meant adding very custom code to our Webpack Config, which we worry it might break in the future or negatively interact with other packages.
Thus, the solution we went for is to load
monaco-editor from a CDN (cloudfront) with the
<script> tag. We feel this "old-school" way is less error-prone than custom modifications to the webpack config. And, to get minimize manual work we created the
monacoEditorCDN.yml GitHub action which will upload the files on every push (if they are not there).
This project has a dual-licence split between the source code of the UI components used and the curriculum content.
The source code of the UI components is licensed under MIT.
The curriculum belongs to our contributors and is licensed under Attribution-ShareAlike 4.0 International. You're free to use it if you're teaching these topics as long as you provide attribution to the writer/owner.
This project wouldn't be possible without our awesome contributors. Thank you >:D<
Swarup Kumar Das
If you wanna lend a helping hand, get in touch with us and let's build this together!