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

Andy Hartnett
Mar 14 · 3 min read

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!

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Sign up for Best Stories

By Dev Genius

The best stories sent monthly to your email. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Andy Hartnett

Written by

Programmer — Writer. @andyhartnett12

Dev Genius

Coding, Tutorials, News, UX, UI and much more related to development

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store