- nodeJS > 12.X.X
- Clone repo =>
git clone repo-url
cd premium-line
- Install dependencies =>
yarn install
- Start the development server =>
yarn dev
Open http://localhost:3000 in your browser to see the app.
- Redux, redux thunk, redux logger (development), redux dev tool (development)
- PropTypes
- Prettier (for code format)
- Font awesome 5
- SCSS
- Layout using bootstrap grid system
- 4 break points
- By default all environment variables loaded through
.env.local
are only available in the Node.js environment, meaning they won't be exposed to the browser. - In order to expose a variable to the browser you have to prefix the variable with
NEXT_PUBLIC_
. For example:
NEXT_PUBLIC_ANALYTICS_ID=abcdefghijk
- In order to keep server-only secrets safe, Next.js replaces
process.env.*
with the correct values at build time. This means thatprocess.env
is not a standard JavaScript object, so you’re not able to use object destructuring. Environment variables must be referenced as e.g.process.env.NEXT_PUBLIC_PUBLISHABLE_KEY
, notconst { NEXT_PUBLIC_PUBLISHABLE_KEY } = process.env
.
This build relies on Prettier formatter to enforce a code style. You can find steps on how to setup prettier formatter with WebStorm/PhpStorm here. Please refer to other tutorials if you are using a different IDE.
Notes:
- It's better to use the local
node_modules
version of prettier instead of a global one. This is to avoid version conflicts (in case the globally installed version does not match with the versions specified inpackage.json
). So when setting up the file watcher when you follow the steps from the above link you can setprogram
to$ProjectFileDir$\node_modules\.bin\prettier
(warning this assumes that node_modules sits in the root of your project. This will need to change if your directory structure changes). - You will have to create two file watchers. One for JSX files and one for JS files. The webpack build tools are already configured to work with
eslint
andprettier
. The only thing needed is the two file watchers.
In the project directory, you can run:
Starts a development server and watches for changes.
Builds the application for production usage.
Starts Next.js production server. Note: you need to run yarn build
in order to be able to run yarn start
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.