Static HTML, CSS, JS website. How to store and load data?

#1

Hi

What are the options for storing and retrieving data for a static website (HTML, CSS, JavaScript)? As an example, I need to store some data for a portfolio website and set it on build process. In this case, no frequent updates required but it would be nice to store name, list of personal projects, contacts, and other info separately. Gatsby framework provides such an option by storing data in .md, .js file and retrieves it on the build process. I’d like to do the same but without using any framework only bundler like webpack or parcler.js. Any npm modules that can do the job?

Thanks

#2

What about just creating a data.js file that contains an object with various properties/values that you would import into any applicable page?

#3

Sorry. The wording of my question a bit incorrect. I do understand how to store some data. The question is “How to load that data on build process?”

#4

The answer will depend on your project structure. Do you have some existing code to share?

#5

I don’t have any code yet. Project structure will be something like this

root/
├── src/
│   ├── js/index.js
│   ├── css/styles.css
│   ├── img/
│   └── index.html
├── .eslintrc.json
├── .gitignore
├── README.md
└── package.json
#6

If you want to statically load the data on build, your best bet is to use something like Webpack or Parcel, then it’s as simple as const mydata = require('./mydata.json').

Gatsby’s design is unique and way more sophisticated when it comes to loading resources, but fancy data extraction from various places is Gatsby’s whole reason for being.

#7

I will assume you already understand how to use webpack, since you have stated you intend to use it.

In your src/js folder, you could add a data.js file that looks something like the following:

const staticData = {
  name: 'value of name property',
  personalProjects: ['project name 1', 'project name 2', 'project name 3'],
  contacts: [
    {
     name: 'name 1',
     phone: '555-555-1212',
     email: 'name1@email.com'
    },
    {
     name: 'name 2',
     phone: '555-555-1213',
     email: 'name2@email.com'
    },
  ]
};

export default staticData;

Then in your js/index.js file, you could add the following to import the object of properties/values.

import staticData from './data';
#8

This way all the data will be accessed on page load. What I want is to set this data on the build stage. In other words, I want it to be hard-coded by a building tool.
Thank you for your response anyway.

#9

This has nothing to do with when the page is loaded. The build tool will import the object and it will be available to reference anywhere in the built code.

#10

Now I can see that. Is this some kind of optimization?

#11