MySpace From Scratch — Part 2: Setup Node + Nuxt Environment

Let’s dive right in. First we need to setup our project folder. I’m going to follow a server / client pattern. So one folder for the project, with two sub folders inside, one for the API, one for the Client. Like so:

/myspace
    /api
    /client <-- this we will create with the Vue CLI

Getting the API up and running

To start we need to spin up a new node project. So I go to the api directory & npm init And walk through the steps. Nothing special, using all the defaults. Then I install express for my web framework: npm install express --save Mongoose for my DB npm install mongoose --save
Nodemon for auto refreshing with code changes npm install nodemon --save And CORS to handle cross-origin requests npm install cors --save

With all that installed I create a new file server.js and configure all of the above:

Almost there.
I like running Mongo through docker so it stays self contained, so what I like to do is run my API from docker and serve the webserver and the DB. This is accomplished with this Docker File and docker-compose.yml:

Phew. That’s all we need for the API. To run the api, make sure you have docker installed, and in that api folder run docker-compose up and it will spin up everything for you and run on port 3000. You can look at our one route by navigating to http://localhost:3000

Setting up the Client

This is infinitely easier than our last step. At the last minute I changed my mind about Vue and decided to go full on Nuxt instead. So in the root folder:

npm init nuxt-app client 

Here is how I configured it for now:

Then in the nuxt.config.js file I updated the port so it wouldn’t conflict with our api:

server: {
    port: 8000, // default: 3000
},
...

Then since I’m lazy and want my styles to be easy. I setup tailwind.

npx init tailwindcss

And finally to access our API I’m using axios:

npm install @nuxtjs/axios

And add the config to the nuxt.config.js file for axios:

modules: ['@nuxtjs/axios'],
axios: {
    baseURL: 'http://localhost:3000',
},

Then I updated the main component so that it pings our API and returns a response.

We are set up!

In one tab in your terminal navigate to your api directory and run
docker-compose up
In another tab navigate to your client directory and run npm run dev Then go to http://localhost:8000 and you’ll see the app up and running and making requests to the API.

Setup is always my least favorite part of building something. From here on out we get to do the building. Look for the next part coming soon. I’m planning on building authentication: Creating an account and logging into the application.

Read More of MySpace From Scratch

Part 1 — Idea
Part 3 — Authentication
Part 4 — Photo Uploads

Thanks for following along, while you’re here consider following me on twitter!