DEV Community: Jesus Ramirez

From development to production with Sanity, Next JS, and Netlify

Jesus Ramirez — Wed, 06 Oct 2021 20:27:48 +0000

So far I've implemented two projects using the self-hosted Sanity Studio for content management, Next JS hosted in Netlify for the frontend portion and I can say I've learned a few things on how to make them work.

Starting Point and Netlify

I'm going to assume that you have used them all, Sanity, Next, and Netlify. So you probably already know that Netlify deploys Next without issue by building and exporting everything before deployment.

The easiest way to use Netlify with your application is to use Continuous Deployment, which will connect to your favorite Git provider so when you push to it, your page will deploy and update automatically. You can also add a file called netlify.toml, that you can add to the root of your folder to indicate Netlify during deployment the commands you need to run your Next.js application.

[build]
command = "npm run build && npm run export"
publish = "out"

[[plugins]]
package = "netlify-plugin-cache-nextjs"

The problem with that is that in order to see a change in the project you would need to actually make a push so that Netlify redeploys the whole site every time and that's not what we want, we want the page to receive updates and create new content without deploying the whole site.

For that, we can start by changing our netlify.toml file to only build the app but not export it. The Next export command is not intended for scenarios like the one we want, where we could update data after deployment so we have to remove it.

[build]
command = "npm run build"

[[plugins]]
package = "netlify-plugin-cache-nextjs"

Data Fetching, and Incremental Static Regeneration

If you have used Next.js before, you will be familiar with the two Next's unique functions to fetch data while generating your site statically:

getStaticProps
getStaticPaths

Both of these functions work perfectly when fetching data at build time, as in our case with Netlify while deployment the props and paths help you generate the pages so that everything seems faster on the client-side.

The real problem is that in our case we have a content manager, so our goal is to update the website after it was deployed. If we didn't change anything in our files and kept the props, paths, and Netlify configuration as it was, this wouldn't be possible without pushing again via Git and rebuild the entire website from scratch.

To solve this, Next.js has something called Incremental Static Regeneration, which allows you to create or update the static pages after you've built the site. You can enable ISR on a per-page basis, making everything even more efficient by retaining the benefits of static generation while adding new content.

getStaticProps

Let's see the code below for a better understanding. You have your basic getStaticProps function that will run a function called getAllBlogs and await the response from the Sanity Client, after returning the information will go to props as usual, but now we have an extra line called revalidate. This property will enable ISR and indicate Next.js that it needs to attempt to re-generate the page every n amount of seconds, in our case, every 5 seconds.

export async function getStaticProps() {
  const allBlogPosts = await getAllBlogs();
  return {
    props: {
      allBlogPosts,
    },
    revalidate: 5,
  };
}

The trick is, that if the page was pre-rendered at build time, like in our case, Next.js will initially show the cached page. After the 5-second window, all new requests will trigger the regeneration in the background and wait until it's finished to invalidate the cache and show the updated page. In case the new regeneration fails, Next is smart enough to show the old page instead of showing an error.

getStaticPaths

But what about creating new paths? For that, we can update the fallback key from false to blocking. Initially false indicated that any paths that were not returned by the function will result in a 404 page but with blocking, the new paths not returned by the function will wait for the HTML to be generated and then cached it in any future requests.

Now our getStaticPaths functions look like this:

export async function getStaticPaths() {
  const allId = await sanityClient.fetch(
    `*[_type == "post"]{
            title,
            slug,
        }`
  );
  const paths = allId.map((id) => {
    return {
      params: {
        slug: id.slug.current.toString(),
      },
    };
  });
  return {
    paths,
    // This will server-render pages on-demand 
    // If the path doesn't exists
    fallback: 'blocking',
  };
}

Conclusions

The combo of Next.js, Sanity, and Netlify is extremely powerful for freelance creators like me. Their free tier is a great hook for new and upcoming clients, as they normally don't want to invest a lot of money in server space that they won't need or use. So I truly appreciate how easy and simple the interaction between these technologies is.

If you want to see what I showed here implemented, you can visit the repo of my personal website here.

jesusrmz19 / jesusrmz

Personal portfolio build with Next JS and Sanity CMS

jesusrmz website

This is a repo for my updated 2021 personal website.

Overview

Update

I'm learning how to integrate Sanity CMS for the content management of the project

Why a new one?

I'm making the website a little bit more dynamic this time. It will be made with NextJS and it will host all customer projects, some side projects and experiments, as well as my blog. For which, I will implement Sanity CMS in order to create and publicate new posts

Links

You can see how the project advances in this link.

View on GitHub

Parcel Template Project

Jesus Ramirez — Tue, 31 Aug 2021 22:36:03 +0000

By now, I have initialized more than 10 different projects with Parcel, some with just regular CSS, some with SCSS included but all using the same file and folder structure so I guess is about time I create a start up template that I can clone from Github to my local machine and just get everything up and running.

Parcel, as you may know by now, maybe, is a simple web application bundler that doesn't require a config file. The tool bundles all individual files as modules into one big-ass file that will be executed by the browser. Parcel works with a lot of different file types: HTML, CSS, SCSS, LESS, Stylus, JavaScript, TypeScript, etc. but I've only used it with either HTML + CSS + JS or HTML + SCSS + JS, and I love it!

Basic Files & Folder Structure

I'm sure that the way I structure my files and folders is nothing extrordinary as I'm almost 100% sure that this is how EVERYBODY structures their own projects. Basically you have one root folder with the main index.html file and two subfolders: dist & src.

The distribution or dist folder is where the project that the browser see lives, this is the folder that will have all your production ready files, the map.css file, the bundle js file, the optimized images, etc. It is important to tell that even if you don't create this folder, Parcel will create this for you during the development process or production build.

The source or src folder is where all the diferent modules and files live, Parcel will look into the folders within the src folder and bundle the files.

NPM Init

Now that we have the structure, lets install Parcel, for that we are going to use the always reliable and always ready node package manager (NPM) and it's basic npm init command. I know there are different terminals but I'm a simple guy that uses VS CODE, which means I always use the VSCODE terminal.

So go ahead an open your prefered terminal, just make sure that you're inside the root folder of your project and then type the command below:



npm init

After typing that you will see a lot of basic questions like name, description, version, etc. you can fill those now or later, there's no difference. I always hit the return key until they're all done and then modify the information in the package.json file

Now, you will see a new file in your root folder: package.json, and it should look something like this:



{
  "name": "parcelproject_template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Install Parcel

Now we install Parcel by running the command below in your terminal:



npm install parcel --save-dev

We installed it as a dev dependency because we don't really need it for production, it's a tool that we will use to bundle and deploy the site but the code that actually does all this is not needed in the browser, as all this is done behind the curtain

In the past, and by past I mean two or three months ago, there was something going on with Parcel 2.0 that it was causing me to delete the cache folder and running the program over and over again to see the changes I've made to either HTML or CSS, but the last time I used it, it worked fine.

So just in case this happens to you I'm goign to tell you how I fixed it. To start I had to uninstall Parcel 2.0 by putting the command below in the terminal



npm uninstall parcel

Then, I just installed a known stable version of Parcel by putting the below command



npm install parcel@1.12.3 --save-dev

EDITOR'S NOTE: I wrote this post in a three day period and on the third day something happened to Parcel 2.0 that stopped working so I had to uninstalled and installed the 1.12.3 version and it's working perfectly.

Not completely sure this is the best approach and maybe there's something wrong on my side, but this seems to fix my problem everytime. Ok, now that we have Parcel installed, our package.json file should look something like this:



{
  "name": "parcelproject_template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.0.0-rc.0"
  }
}

What we will do next is to write the scripts that will launch Parcel during development and the build command that will bundle and optimize everything for production. In the block below you will be able see the changes that we made to our package.json.

We removed the main direction in order to direct Parcel with the command build where to actually create the bundle files. And then we typed in two extra scripts, start, which initialize Parcel and deploys a local host for you to check your site, and build, for production, which would create or replace the files inside the dist folder with new ones all bundle up.



{
  "name": "parcelproject_template",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build index.html --dist-dir ./dist"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.0.0-rc.0"
  }
}

How to check if it worked?

At this moment I have a bunch of empty folders and an empty index.html file but in order to test that Parcel is actually working and doing what it needs to do we create basic HTML, CSS, JS files.

Go ahead and add the below code to your files:

Inside index.html you can see that I already put the reference to the main css and the script js files



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/src/css/main.css" />
    <script defer src="src/js/script.js"></script>
    <title>Placeholder</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

Create the main.css file inside the css folder that's inside the src folder. Because the intention behind this is create a template you can add whatever CSS you like, I always put the box-sizing at the top and create a main.css file that eventually will have all the imports files



*,
*::after,
*::before {
  box-sizing: border-box;
}

body,
h1 {
  padding: 0;
  margin: 0;
}

body {
  background: #000;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
h1 {
  color: #fff;
  text-transform: uppercase;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  letter-spacing: 3px;
}

And last but not least, the simple and always efficient console log test



console.log('1, 2, 3... Testing Parcel 📦');

Now if you go ahead an open up the terminal and put the command



npm run start

You should see something like the image below, and the message you put in your script.js file in the browser's dev tools

GitHub Repo and Use

Now that we have the folder, we can create a repo, initiate git in our root folder and commit all the files we have, just remember to create a .gitignore file to include things like the node_modules folder or the Parcel cache folder.

Congratz! Now you have an easy template that you can clone and push to a new repo! If you want to see how to clone and change the URL, go and read the instructiosn in the README file of my Parcel_Template repo.

jesusrmz19 / Parcel_Template

Template with ParcelJS as bundler and vanilla CSS

Project Template

This is an empty repo that is ready to be cloned anywhere and start coding with Parcel as bundler.

Instructions

Want to use it? Just clone it! Follow these simple steps:

Create a new folder in your computer
In the command line, make sure you're in that folder
Type the following to clone this repo:

git clone https://github.com/jesusrmz19/Parcel_Template.git

Now your new folder will download a folder called Parcel_Template
Change to the Parcel_Template folder:

cd Parcel_Template

Make a new repo, in this case, the new one is called example
Type the following in the command line

git remote set-url origin https://github.com/user/example.git

That's it! The command above will change the origin of your repo and now the next change you make will commit all the files to the new repo you just created.

NOTE: Remember to run npm install in your machine after changing the…

View on GitHub

Parcel is better than Gulp, for me at least

Jesus Ramirez — Wed, 02 Jun 2021 16:35:58 +0000

But first, what is Parcel?

Parcel is a simple no-configuration web application bundler, it's a tool used to bundle individual modules into a single file that can be executed by the browser. Parcel supports different languages and file types like HTML, CSS, and JavaScript.

Parcel sells itself as a "blazing fast, zero-configuration" bundler, and it works, because as you may know, their main competitor is not very easy to get into, as the learning curve for Webpack can be steep.

And for somebody like myself that has to handle a 9 to 5 while trying to learn new things in the always-changing web development world, a simple, low-configuration bundler it's just what I needed for my client and personal projects.

What about Gulp?

Before Parcel I used Gulp, and even though Gulp and Parcel are not strictly under the same category because Gulp is a task manager and Parcel is a bundler, I used Gulp in the same way that I use Parcel.

I can't remember how or when I was introduced to Gulp but at first, I thought it was the best thing, you could use browser-sync, scss, and even optimize your images for production. You only had to create a config file in the root folder, but once you got the hang of it, it was no issue, besides, you can always just copy-paste things if you have the same folder structure.

Here's what my file looked like:

const browserSync = require('browser-sync').create();

function watch() {
  browserSync.init({
    server: {
      baseDir: 'src',
    },
  });
  gulp.watch('src/assets/css/**/*.css').on('change', browserSync.reload);
  gulp.watch('src/*html').on('change', browserSync.reload);
  gulp.watch('src/assets/js/**/*.js').on('change', browserSync.reload);
}

exports.watch = watch;

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const concat = require('gulp-concat');
const terser = require('gulp-terser');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const { src, parallel, dest } = require('gulp');

const jsPath = 'src/assets/js/**/*.js';
const cssPath = 'src/assets/css/**/*.css';

function buildHTML() {
  return src('src/*.html').pipe(gulp.dest('dist'));
}

function exportDocs() {
  return src('src/assets/docs/*').pipe(gulp.dest('dist/assets/docs'));
}

function jsTask() {
  return src(jsPath)
    .pipe(sourcemaps.init())
    .pipe(concat('main.js'))
    .pipe(terser())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/assets/js'));
}

function cssTask() {
  return src(cssPath)
    .pipe(sourcemaps.init())
    .pipe(concat('main.css'))
    .pipe(postcss([cssnano()]))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/assets/css'));
}

function fontsTask() {
  return src('src/assets/fonts/**/*').pipe(gulp.dest('dist/assets/fonts'));
}

function imgTask() {
  return src('src/images/*').pipe(imagemin()).pipe(gulp.dest('dist/images'));
}

exports.exportDocs = exportDocs;
exports.cssTask = cssTask;
exports.jsTask = jsTask;
exports.fontsTask = fontsTask;
exports.imgTask = imgTask;

exports.build = parallel(
  buildHTML,
  cssTask,
  jsTask,
  exportDocs,
  fontsTask,
  imgTask
);

If it worked, why change?

I didn't look for an alternative, I was introduced to it during a JavaScript course and it was so easy to implement and use that just went for it. Only one npm install, write a couple of scripts and that was it, no more configuration.

It did the same thing I was doing with Gulp, except for the images "optimization", and I put that in quotes because I realized after a couple of uses that Gulp was not optimizing anything, I know it's highly likely that I wasn't doing something right but who has time to find out if I can always optimize all my images with a CDN or manually with a converter.

So how do you use Parcel?

I normally install Parcel in all my local projects. After the npm init and getting my package.json file you go to the CLI and write:

npm install parcel --save-dev

The only thing that remains after this is creating your scripts to run and build your project. So go ahead and add the scripts below to your package.json:

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html --dist-dir ./dist"
  }

Now Parcel should be up and running, you can even add SCSS to it if you want to, I do it all the time as I prefer the SCSS approach to projects but hey, it's up to you at the end.

In the end, if you already use Gulp or Parcel, that's great too. I would like to know how are you using them, what kind of tasks are you delegating Gulp? could be fun to know, as I only did simple things but I'm sure that's just the surface of the tool.

Deploy your Next JS app to Netlify

Jesus Ramirez — Fri, 14 May 2021 18:37:19 +0000

As you may know, Netlify has something called continuous deployment, which lets you connect a Git repository to a Netlify site so when you make any changes in the repo your site gets updated automatically.

There are two ways to connect your git repo to Netlify: using the command line, or using the app UI. In this quick tutorial, I'm going to use the UI to show you how to deploy a Next JS repo.

Get into Netlify

First, you have to visit https://app.netlify.com/start, after you are logged in you will see something like this:

Select your Git provider and repo

Then after selecting your git provider, and getting the proper authorization, you will be able to select the repo you want. In my case, I had one called "personalblog".

Put in your build commands

In the next page you could select the team, branch or even change the build command if necessary. But in my case, there's was no need, as the npm run build was my default build command and I left the rest as they were.

Update your domain!

And that's it! By default, Netlify will create a random domain for you to access your site but you can always change it in the Site Settings once the deployment is finished. You could also add your own domain to the site you just deployed. For example, I already had my personal site hosted on Netlify, so I only had to add a subdomain from it and Netlify made the verification for it.

If you want to see the final result, go visit my Blog!.

How do you guys do it?

Jesus Ramirez — Mon, 01 Mar 2021 18:27:15 +0000

How do you guys do it?

How do you don’t compare yourself with others?

How do you open Twitter every day and not feel overwhelmed with the amount of success?

How do you see everybody talking around, making connections, and don’t feel left out?

How do you see all these nice desktop setups and don’t feel the shame of yours?

How do you overcome this idea in your head that says you don’t know shit?

How do you master all these different languages and technologies in your spare time?

How do you get from nothing to a job offer within a year and with a 9-to-5?

How do you release all these incredible websites and apps every week?

How do you come up with innovative ideas?

How do you get over the typical “Unfortunately, we will not be moving forward with your application”?

How do you jump over the first barrier, when you are self-taught?

How do you know when you know enough?

How do you prove them wrong?

How?

How to use Netlify's contact forms?

Jesus Ramirez — Tue, 16 Feb 2021 17:46:38 +0000

Ok, here me out and be patient this is my first post explaining something.

My name is Jesus Ramirez and I'm a self-taught web developer based in Guadalajara, Mexico. You can find more information about me and my journey in this blog post.

I discovered Netlify a while ago, thanks to Wes and Scott of Syntax FM (great podcast, go check them out!). They have been sponsored by Netlify several times and they always talk about how easy is to use, host and deploy websites. So with my latest customer, I decided to go for it and take advantage of the free hosting because I knew it would be an automatic yes from the customer because of it. It was just a one-page website with classic about, services, and clients sections but in the contact portion, the customer wanted a form 🙄. So being new to Netlify I decided to investigate how would it work, hoping it would be easy, only to find out that they have the BEST SOLUTION EVER! Why? Because Netlify has a built-in form handling that is enabled by default, and in this post, I'm going to show you how to implement it.

Form Creation

First, we create a simple form with some HTML and CSS.

You can see it live here.

<form id="myForm" class="form" name="form">
  <label>Name:</label>
  <input type="text" id="name" name="name" placeholder="your name">
  <label>Email:</label>
  <input type="text" id="name" name="email" placeholder="your email">
  <label>Message:</label>
  <textarea type="text" name="message" placeholder="message"></textarea>
  <button id="submit" type="submit">Submit</button>
</form>

Form Setup

Once you have the basic HTML and CSS, normally you would have to connect to a server, maybe use some PHP, an external plug-in, or even pay a third party for the service. But with Netlify, the only thing you need to do is add the data-netlify: true attribute to the <form> tag. And that's it.

You could even have more than one form on your page if you wanted to, as long as you have a different name attribute for each because that's how Netlify will identify them in the site admin panel.

Success Message

But that's not it! By default, Netlify has a generic styled success message page with a link back to the original form page that you can personalize by adding an action attribute to the <form> tag and putting the personalized path to the page as long as it's relative to the site root, starting with a /.

So easy, right? Now, our form would look like the one below, with those simple attributes added, and it would work beautifully. The information from the contact can be retrieved via the admin panel or in my case, sent via email to the customer.

<form id="myForm" class="form" name="forma" method="POST" data-netlify="true" action="/success">
  <label>Name:</label>
  <input type="text" id="name" name="name" placeholder="your name">
  <label>Email:</label>
  <input type="text" id="name" name="email" placeholder="your email">
  <label>Message:</label>
  <textarea type="text" name="message" placeholder="message"></textarea>
  <button id="submit" type="submit">Submit</button>
</form>

But there's more!

When I presented the form functionality to the client they didn't like that after clicking submission the end-user was moved to a different page where they needed to jump back by clicking another button. So at first, I suggested an automatic return but the main issue was not the button but the second page. I almost lost hope in the Netlify form because there's no information about another type of success message in their documentation. But while looking through the Netlify Support Community for answers I found that somebody was able to use the action to just refresh and return to the main page to show a success message.

After digging more I found that there's a meta tag that can refresh and even return a page after a certain amount of time.

<meta http-equiv="refresh" content="0;URL='https://netlifyformtest.netlify.app#success'" />

With that implemented, I just had to create the success message element on my form page, and display it after finding the #success in the URL with a little JavaScript

<div class="container--success">
  <p>Your message was sent succesfully!</p>
</div>

<script type="text/javascript">
   let url = window.location.href;
   if (url.search('success') > 0) {
       document.querySelector('.container--success').classList.add('sent');
   } else {
       document.querySelector('.container--success').classList.remove('sentd');
   }
</script>

AAAAAAAND THAT'S IT! Isn't it so simple? In the end, the customer was happy and I was able to implement another easy and secure solution thanks to Netlify.

If you want to see the final result, send a note on the form here.

Who am I?

Jesus Ramirez — Tue, 22 Dec 2020 19:49:15 +0000

¡Hola 👋🏼!
My name is Jesús Ramirez, I’m a self-taught, freelancer, front-end developer, and here’s a little bit more about my journey.

About Me

I was born in 1990, in a small city in Mexico, called Cd. Madero. I moved to Guadalajara back in 2008 for college, where I got my undergrad degree in Electronic Engineering, and this is where I had my first introductions to programming. I had classes where we use Java, C, and C++. But as college classes normally are, these introductions were bad and didn’t inspire me to pursue any type of programming life, even though, a lot of my classmates ended up working as software engineers, software was not my University's strongest focus in the EE program.

A year before graduation, I got an intern job as a Junior Field Applications Engineer for a Rep company (for those of you who don't know, Rep Companies in the electronics business, are companies that represent electronic component's manufacturers and serve as the first point of contact in a specific territory, basically, a local sales office), anyway, eight years later, I'm still here but now as one of the senior FAEs, mainly focused in Automotive Design and Automotive customers.

So... how did I get here?

Well, it's not a long and/or inspiring story, that's for sure. It all began in 2017 when I sort of had an existential crisis, after doing the same type of work for four years. I started to feel that something was missing because I've always considered myself a creative person, somebody that likes to explore that side, and even after trying, I was not able to fulfill that part in my 9 to 5, so I had to look outside.

I bought an entry-level DSRL camera, just for the fun of it, looking for a creative hobby, for something that could fill that little void. Obviously, I started following nice photography accounts on Instagram until one day, scrolling in the explore tab I found the Made Awkward account, with its nice office pictures, computers with code in them, and after a bunch of likes, more and more desk set-ups and screens with more code began to appear, until this post came along:

https://www.instagram.com/p/BTyS63mDHlY/

After falling into an Instagram rabbit hole of images like that, I decided to investigate a little bit more, how could I do these things? was it easy? how did it work? It looked like something that could be entertaining, something where I could create things out of nothing, something where I could use the logic side of my brain, and bring that creative side that I was missing.

So, I began to look for free classes and videos, until I found Free Code Camp, and everything changed. Of course, I haven't finished all the modules there, and I've done a lot of other courses, I think I even sold my first ugly web page after just a couple of months. But FreeCodeCamp, CodePen, and all the Instagram/Twitter community helped path the way to where I am at the moment.

And, now what?

After almost three and a half years, I'm still learning something new every day, still enjoying the journey. I've designed and developed several web pages for small business, I've done a lot of different courses and challenges, everything with the purpose of keep growing and keep learning.

You can see a portion of my portfolio here.

I'm currently learning React, just finished Wes Bos's beginner course and I'm developing my first React App, a Star Wars SPA. After this, I'm hoping Wes Bos finishes his advanced React course, so I can jump back in to learn hooks, a little bit more of the backend to develop a full online store, I see a lot of potential for that in Mexico, a lot of companies lack that part, and I would love to keep adding my grain of salt.

My ultimate goal would be to get a job as a frontend engineer, hopefully somewhere outside of Mexico, so I can get myself and my family a better life.

DEV Community: Jesus Ramirez

From development to production with Sanity, Next JS, and Netlify

Starting Point and Netlify

Data Fetching, and Incremental Static Regeneration

getStaticProps

getStaticPaths

Conclusions

jesusrmz19 / jesusrmz

Personal portfolio build with Next JS and Sanity CMS

jesusrmz website

Overview

Update

Why a new one?

Links

Parcel Template Project

Basic Files & Folder Structure

NPM Init

Install Parcel

How to check if it worked?

GitHub Repo and Use

jesusrmz19 / Parcel_Template

Template with ParcelJS as bundler and vanilla CSS

Project Template

Table of contents

Instructions

Parcel is better than Gulp, for me at least

But first, what is Parcel?

What about Gulp?

If it worked, why change?

So how do you use Parcel?

Deploy your Next JS app to Netlify

Get into Netlify

Select your Git provider and repo

Put in your build commands

Update your domain!

How do you guys do it?

How to use Netlify's contact forms?

Form Creation

Form Setup

Success Message

But there's more!

Who am I?

About Me

So... how did I get here?

And, now what?