Host your dynamic website without spending a penny!

Create a dynamic app using NextJs and Prismic CMS

Prismic + NextJs

This post contains NextJs and Prismic app tutorial but the basic idea can be applied with any Static website platform.

Have you ever wondered about having a website whose content can be changed without going through the DB queries or without asking a developer? duh, we have wordpress, Drupal etc.

Okay. But what if you don’t have a server? what if you want to scale your website for a million users? Increasing the server horizontally or vertically is a one way to do it but you have to spend money for it.

So if you are either the business person, a startup founder, an NGO founder or a small businessman, you can get the idea about the process and ask your developer to create a similar website. this will help you a lot later on as you won’t have to pay or ask somebody else to make changes in the content.

What this post covers?

• It gives you an idea of how one can create such business user friendly websites. this is a very pocket-friendly and scalable way to create a website which can serve a million users.
• A tutorial on creating one such application (shows the latest notices or news from the college or schools).

What’s the alternative?

You can use Adobe AEM, Microsoft SharePoint, Drupal etc but you need a separate server for those and extra bucks. Moreover creating websites in such tools require experienced developers which again increases the cost.

Overall Idea

Create an SPA or a similar static website and fetch the content from a CMS (content management system).

we will be using surge to host our website free (Custom domain, Unlimited publishing, and Basic SSL) and prismic.io(CMS) to deliver dynamic content to our website. we will use 1 user basic plan which is free. you can use contentful, storyblok, ButterCMS etc. So here the only charge you have to pay is for CMS which is very low compared to a tradition hosting servers.

Tutorial

If you want to know how to create and host such an application, follow along. Let the hacking begin and May the force be with you.

We will use NextJs(Basically a React App). I had heard about it a lot and wanted to know what’s the buzz about. It’s really easy and found it very useful. if you do not have much knowledge about NextJs, do not worry. I will explain wherever it is necessary.

Step-1

Run below commands.

mkdir bulletin
cd bulletin
npm init -y
npm install --save react react-dom next
mkdir pages

Install prismic.io dependecies. we will use it later.

npm install prismic-javascript prismic-reactjs --save

Then open the “package.json” in the bulletin directory and add the following NPM script.

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "export": "next export",
    "start": "next start"
  }
}

Now everything is ready. Run the following command to start the dev server:

npm run dev

Then open http://localhost:3000 from your favourite browser. you will see 404 error message.

Step-2

Inside pages create two files.

Pages directory is the special a directory in NextJs. whichever files we keep here, NextJs will assign it a route just like Php. only thing necessary in file is we have to export the component as default which we want as entry point to out route.

• index.js: (corresponds to / route)

pages/index.js

It use News and Layout components. create a new components directory in root of the app. create two files News.js and Layout.js inside components.

In Layout.js and Footer.js, we are using Link component from NextJs to wrap our internal links.

In News.js, we are using prismic-reactjs lib to render the content coming from Prismic.io.

• News.js

components/News.js

• Layout.js

components/Layout.js

Sorry for the modular code 😐 but Layout uses a component named Footer.js so create one more file inside components named Footer.js.

• Footer.js

components/Footer.js

• page.js (corresponds to /page)

pages/page.js

Step-3

It’s time to create some data for our frontend. Go to the prismic and create a new repository. create a two new custom types. custom types are a template which we will fill whenever we need new data.

Create a repeatable type named “Page”. In the json editor paste below json and click on save.

Page

Create another repeatable type named “news”. In the json editor paste below json and click on save.

news

Go to the “content” tab and add new document. select the “news” type and create your first notice.

Similarly create three more documents of type “Page”.

While creating these pages, give these UIDs: about, privacy, and terms. we are using these IDs to fetch the pages.

All documents in Prismic.io

Step-4

Time to fetch the data into our frontend.

In NextJs, we have an amazing function named getInitialProps. NextJs runs this function before rendering the component. here we will fetch the data from Prismic.io.

Remember, getInitialProps can be used only with exported default React component. that is why we fetch the news in index.js and pass it to News component.

Modify the index.js and page.js as below.

• index.js

page/index.js

pages/page.js

we have to define the endpoint to our Prismic.io data repository. we have used a separate configuration file to keep Prismic related configurations.

So in the root of the app create a new file named “prismic-configuration.js”

we have to create a NextJs specific file to support of client side routes (last file).

create a new file next.config.js.

Step-5

It’s time to launch the app. run below command to run the app locally.

npm run dev

Build the app to host it live.

npm run build
npm run export

This will output the static site inside out directory.

Now install surge and host it live. the url will be shown on the terminal.

npm install --global surge 
cd out
surge

The whole project code is available on github and is also live on surge.

github: drex44/bulletin

surge: bulletin-tutorial.surge.sh

Conclusion

And that’s it! Did this work for you? Please leave any questions and comments below!

Thank you for reading!

If you found this article helpful, clap! 👏👏👏.