Build an Interactive JavaScript Food Menu: Lesson 2 of 14

Setting Up Our Dev Environment

Up Next

Creating the App Wrapper

Autoplaying in 7 seconds!

Cancel

Create a Free Account to Watch

There are lessons in this course. of learning!

Sign Up Now

Login to your account

First things first, we need to get our development environment set up. Let's install some development dependencies using npm that will make our development process a bit better and quicker. Run the following commands to create a package.json file and install our packages.

npm init -y
npm install --save-dev babel-core babel-preset-es2015 browserify babelify watchify node-sass lite-server
npm install --save bulma

Note: The Bulma package has been updated since this course was created. It will change the layout a bit. To install the specific version we're using, use: npm install --save bulma@0.0.12

Next, we need to set up Babel and lite-server, which works on top of Browsersync. Create a .babelrc file and a bs-config.json file and put the following code in each, respectively.

{
    "presets": [
        "es2015"
    ]
}
{
    "server": {
        "baseDir": "./build"
    }
}

Now, let's create some npm scripts that will make building our code and running a dev server much easier. Replace the scripts object in your package.json file with the following scripts.

{
    "build:js": "browserify src/js/index.js -d -t babelify -o build/bundle.js",
    "watch:js": "watchify src/js/index.js -d -v -t babelify -o build/bundle.js",
    "build:scss": "node-sass src/scss/styles.scss --output build --source-map-embed --source-map-contents",
    "watch:scss": "npm run build:scss -- --watch",
    "build": "npm run build:js && npm run build:scss",
    "serve": "npm run watch:js -- & > /dev/null 2>&1; npm run watch:scss -- & > /dev/null 2>&1; lite-server"
}

build:js simply builds our JavaScript using Browserify and Babelify. watch:js does the same except it will then watch the files for changes and will build them again whenever the files change. build:scss and watch:scss do the same as the others except it builds our CSS file using node-sass. Next, we have build, which simply runs the builds of our JavaScript and SCSS. Lastly, we have our serve command. It runs our watch scripts in the background and then starts up a local server. This server will automatically refresh whenever the files it is watching change. Since we have our watch scripts checking for changes of our files, anytime we change a file, the server will end up refreshing!

Let's now create our file structure that follows what we put in our scripts. First, let's create the JavaScript file. Create a file at src/js/index.js. Put the following in the file.

const lowers = ['alex', 'george', 'bonnie', 'maria', 'ellie'];
const uppers = lowers.map(name => name.toUpperCase());
uppers.forEach(name => console.log(`Hello, ${name}`));

Next, we need to bring in the SCSS. Since this is not a course about SCSS or CSS, we are just going to download the CSS from this project's repository so we can get moving. Download the project from Github and pull out the src/scss folder and place it in our src folder.

Let's create the build directory and place the build/static directory from the Github project into our build directory. Grab the food.json file also.

Last but not least, let's create our index file that will be served up by our server. Create the file build/index.html and put the following in it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fancy Bear Eateries</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

That's it! We will be creating everything from scratch in our JavaScript. This means the index.html file only needs to serve up our bundled CSS and JavaScript.

Let's make sure everything is working. Run npm run serve. You should see a bunch of output in your terminal and then a browser window should open. Bring up the dev tools in your browser and look at the console. You should see output like this:

Hello, ALEX
Hello, GEORGE
Hello, BONNIE
Hello, MARIA
Hello, ELLIE

There shouldn't be any errors in the console. This means everything is being built and served up correctly. With that out of the way, let's start building!

Chris Sevilleja

Co-founder of Scotch.io. Slapping the keyboard until something good happens.