Project setup for a full-stack JavaScript web application
Are you getting ready to start your first full-stack web app? Or maybe your confused on the hierarchy? The initial setup of a web application is arguably one of the most important parts of a project. In this article, I’m going to give my take on setting up a full-stack app.
I specifically will be using Vue on the front-end, Express, Node and Sequelize on the back-end. Let’s get started!
I’m assuming you have used GitHub and know the terminology. First you’ll want to go ahead and create a repo. I’m naming mine shalltear (I’m a huge fan of Japanese anime). Then clone that repo down to your local machine so we can get started on the initial setup.
Let’s create a quick .gitignore file in the project root before we forget and push up all our node_modules to GitHub.
Getting started setting up the client
I’ll be using vue-cli to quickly scaffold out a boilerplate for the front-end. Let’s name this project “client”.
Now would be a great time to install any dependencies you know you’ll want for your project. I’m just going to start off with axios a promise based http client for the browser and node. Since we are installing this for the client side of this application, make sure you are in the client directory when installing any production or dev dependencies.
Let’s create a services folder now that will hold all of our services for API call’s to the server side of this project. Inside of the services folder, let’s start off by creating an api.js file that will hold our baseURL for API calls.
In api.js we can import the axios module and create an axios instance. Where we will pass in an object with the property baseURL and the value of our API url. The vue-cli is configured for the client to run on port 8080 so I usually like to set my server to run on port 8081, we will set that up shortly.
Okay let’s test that everything is working properly so far on the client side. In your terminal make sure you are in the project folder and cd into the client directory. Now run the script that’s already setup in your package.json file. Enter the script npm run dev
Visit http://localhost:8080/ and you should see that your Vue.js application is running properly :)
Getting started setting up the server
Let’s create a new folder in our project root called server and run npm init to create ourselves a separate package.json file. Now we can have two separate worlds for client and server. You should have your root project and two folders now client and server.
I won’t be scaffolding out a server boilerplate, instead we will be creating a simple one ourselves to get started. So let’s start off by installing a few dependencies with npm. Express, Body-Parser, Cors and Morgan. Make sure you are in the server directory when installing modules for the server side of this project.
Now let’s install a few helpful dev-dependencies that you’ll most likely want to have on hand for every project. Nodemon and eslint.
Let’s setup a config file for eslint. I like to use a standard style guide for JavaScript.
Now let’s navigate to our package.json file in our server directory to write a script we can run to have our server up and running properly.
Let’s now create a src folder inside our server directory, this folder will hold the bulk of our server functionality. Inside of the src folder I usually like to start off by creating config, controllers, models folders and a root app.js file.
The config folder will hold your configuration for connecting to your database.
The models folder will hold all our models. In short your data that you query for the endpoints that you will be able to access through API calls on the client side.
The controllers folder will hold all of the logic for how we respond to http requests from a browser.
We will go into more detail during the next few articles on creating the rest of the functionality for the server. The purpose of this article is to just get your environment up and running.
Let’s write a quick ‘Hello World’ to see if our server is running properly. Open app.js and write a console.log statement.
Finally we will navigate to the server directory and run the command npm start. We set this script up earlier in our package.json file.
AWESOME! We now have a working client and server for our full stack application. You can keep two terminal windows open running both the client side and the server side.
I hope this article was helpful to you in some way. Feel free to follow me on Twitter or GitHub!
